Slides from PPA Tech Talk presentation. Introduction to hybrid HTML5 apps for magazine publishers.

1. Contentment
getcontentment.com
Interaction in
HTML apps
Michael Kowalski
@micycle

2. Padify is our
platform for
creating HTML5-
based apps,
adverts,
and digital
magazines
WINNER
PME Digital
Innovation
Feb 2014
FINALIST
SIIA Media
Innovation
Apr 2014

3. Mobile has changed the way people consume media
Proportion of media and communications activities across the day
Source: Digital Day, Aug 2014

4. In US mobile media
consumption has
now matched web

5. What we do
Print assets
Autotune
Layout
& enhance
Other content
Padify Reader apps
iOS
Android
web
Publish
Id
CMS media
x1
for all
devices

6. Our sweet spot
Practical
workflow
Creative
control
Mobile
friendly

7. What’s so great about HTML?

8. Shareable
Cross-platform Responsive
layout
Accessible
Semantic Low file size
Non-proprietary Interactive
iOS
Android
Web
Low lock-in Future proof
Smartphones
Tablets
Laptops
TV
Desktop
Reusable
Utility
Simple web
Better technology
engagement

9. Cross-platform Responsive
layout
Semantic Low file size
Non-proprietary Interactive
iOS
Android
Web
Low lock-in Future proof
Smartphones
Tablets
Laptops
TV
Simple web
technology
Desktop
Reusable
Better
engagement
Utility
Accessible
Shareable

10. Native code
Device capabilities
HTML – Native
bridge
Content
Hybrid apps
One time for
each platform
Regular
production

11. HTML5 has three main components
HTML for content
CSS for styling
Javascript for interaction

12. Do you need to learn HTML? Or (gulp) Javascript?
If you have to write
code on a regular
basis, you do not
have a practical
workflow
A flexible toolset will
allow you to create
new layouts
without coding

13. Advantages of Javascript
Cross-platform: same code for iOS, Android and web
!
Simple interaction model, with event handling built in
!
World’s most widely used programming language
!
Relatively cheap and quick to develop
!
Can make use of many free libraries, widgets, etc

14. Differences between mobile and the desktop web
VS
✘ Screens are smaller
✘ Fingers are fatter than mouse pointers
✘ Limited range of gestures; no “hover” or right click
✘ Device memory and processing power are limited
✘ Offline (or worse, intermittent connectivity) is common
✓No legacy browsers!

15. Principles of good mobile UX
Simple user flow: one thing at a time.
Take advantage of familiar patterns.
Do not try and fit content to the screen –
it can’t work. Scrolling is a key
responsive technique.

16. Uses of interaction
The first generation of magazine apps were often kitchen sinks of
random interactivity. But interaction need not be pointless gimmickry.
There are many valuable use cases:
Signalling Filtering
Navigation
Advertising
Extra
utility
Wow
factor
Data
capture

17. Doing it wrong: “How to use this app”

18. The standard navigation model
Explore
Engage
Locate

19. Signalling
Fat fingers and small screens = easy accidents.
Signalling is important: what just happened, what’s going to
happen next.
Elmer sofa,
Make use of animated transitions
like slides, zooms, parallax and
fades for signalling:
• Changing photos in gallery
• Opening popovers and captions
• Animate headings to signal a
change of topic or section
• Zoom open editions

20. Filtering
Mobile screens are too small to show everything at once.
Use filtering techniques to allow readers to opt in to only the
content they want to see.
Slideshows
Popovers
Hotspots
Tap-to-enlarge
Drawers
Data filters

21. Adding utility
Interaction can add useful features for readers that go beyond
what is possible in print. These can can take advantage of device
capabilities like address books and maps, as well as connecting
to web services (when online).
In-app purchase
Affiliate shopping
Shopping lists
Nearest venue
Music players

22. The advertising gap
Currently a big mismatch between attention and advertising spend
Kleiner Perkins “Internet Trends 2014”
50%
40%
30%
20%
10%
Time spent Ad spend
Print Radio TV Internet Mobile

23. Advertising
On mobile, full screen ads are less intrusive.
When in “explore” mode, readers can just swipe on by…

24. But if you can trigger engagement, you have an incredible canvas
for native advertising “below the fold” using responsive HTML
Beginning
Middle
End
Story arc
{
{{
Advertising

25. Performance considerations
Mobile performance is tricky, due to device limitations with
memory and processing power.
Some HTML interactions can cause glitchy page rendering or
transitions (“jank”).
3 steps to rendering a web page
Layout Paint Composite
Calculate page
geometry
Colour the
pixels
Put it all
together

26. Performance considerations
Techniques*
• Lazy load images and video
• Only animate properties
that won’t cause jank
• Limit the amount of effects
in a single page
• Do lots of testing on
devices: just because it
works in a desktop browser
doesn’t mean it will work
on mobile
Resources
CSS Triggers
http://csstriggers.com
Jank Free
http://jankfree.org
Hopefully your vendor has done
all this for you
*

27. Workflow considerations
Id ? ? ?
• Converting InDesign docs to interactive HTML5 is not easy
• CMS solutions may require you to rekey or copy/paste all
your content = very time consuming
• Internal workflow resources can easily become the biggest
part of your costs
• Need a responsive human-usable system that can realistically
be used for regular production

28. Our typical workflow
• Desktop importer
• Bulk file upload
• No copy and paste
Import
• Creative input
• Enhance with video
and interactivity
• Proof & approve
Visual
editing
Publish
• Push out into apps
1-3
hours
Autotune
• Convert to HTML5
• Automatically clean
up and optimise
• Assign layouts
• Add lightweight
semantics

29. Workflow considerations
Modular
Responsive
Quick config
Tweakable
Humane
Instant preview
Our principles
Interactive components can be combined to
create varied pages, designed with the content
Modules are designed to work on all devices
No coding or tedious coordinate entry
Designs can be adjusted by hand without coding
Automate out tedious drudgery, avoid repetition
Can test result straight away, without “packaging”

30. What happens when I push this button?
?
Magazine
Initial experience

31. Mostly this:
“Wow, a shop full of back issues…”
FILM MAGAZINE

32. Typical monthly digital edition publication cycle
100%
Publication
day
0%
Rest of the
month
Chance of
finding
something
fresh

33. Publishing more frequently improves enagement
Chance of
finding
something
fresh
Same content, released in
weekly chunks

34. The logical next step
Continuous or semi-continuous publishing
Minor updates at
frequent intervals
Chance of
finding
something
fresh

35. EVO
Moved to continuous model,
updated 3 or 4 times a week.
Sessions more than doubled
to 250k+ per month.

36. Long+Short
New digital magazine from
Nesta uses a “seasonal”
publishing model.
A new themed season starts
every couple of months,
launching with a batch of
stories.
Fresh stories are posted
every day for rest of season.

37. Summary
• HTML5 interactivity provides a cost effective way to add
value to digital magazines
• Mobile is different from the desktop web, and care needs
to be taken to avoid performance problems
• Practical workflow is a key consideration for successful
interactive publishing
• Responsive design tools create new opportunities for
creating interactive native advertising
• Continuous publishing can increase engagement and work
more effectively for mobile consumers

38. Contentment
Michael Kowalski
michael@getcontentment.com
@micycle