Introduction to HTML5 magazine apps
Post on 02-Dec-2014
316 Views
Preview:
DESCRIPTION
Transcript
Interaction in HTML apps
Contentment getcontentment.com
Michael Kowalski @micycle
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
Proportion of media and communications activities across the day
Source: Digital Day, Aug 2014
Mobile has changed the way people consume media
In US mobile media consumption has now matched web
Print assets
Autotune
Layout & enhance
Other content
Reader appsPadifyiOS
Android
web
PublishId
CMS media
What we do
x1 for all
devices
Practical workflow
Creative control
Mobile friendly
Our sweet spot
What’s so great about HTML?
Cross-platform Responsive layout
Accessible
Semantic Low file size
InteractiveNon-proprietary
iOSAndroid
Web
Low lock-in Future proof
SmartphonesTablets
Laptops
TVDesktop
ReusableUtility
Simple web technologyBetter
engagement
Shareable
Cross-platform Responsive layout
Semantic Low file size
InteractiveNon-proprietary
iOSAndroid
Web
Low lock-in Future proof
SmartphonesTablets
Laptops
TV
Simple web technology
Desktop
Reusable
Better engagement
Utility
AccessibleShareable
Content
HTML – Native bridge
Native code Device capabilities
One time for each platform
Regular production
Hybrid apps
HTML5 has three main components
HTML for content
CSS for styling
Javascript for interaction
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
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
Differences between mobile and the desktop web
✘ 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!
VS
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.
Principles of good mobile UX
Uses of interaction
Navigation
Signalling Filtering
Advertising
Extra utility
Wow factor
Data capture
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:
Doing it wrong: “How to use this app”
The standard navigation model
Engage
Explore
Locate
Fat fingers and small screens = easy accidents. Signalling is important: what just happened, what’s going to happen next.
Signalling
Lucy Kurrein’s Elmer sofa, made by SCP
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
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.
Filtering
Slideshows
Popovers
Hotspots
Tap-to-enlarge
Drawers
Data filters
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).
Adding utility
In-app purchase
Affiliate shopping
Shopping lists
Nearest venue
Music players
Currently a big mismatch between attention and advertising spend
Klei
ner P
erki
ns “I
nter
net T
rend
s 201
4”
10%
20%
30%
40%
50%
Print Radio TV Internet Mobile
Time spent Ad spend
The advertising gap
On mobile, full screen ads are less intrusive. When in “explore” mode, readers can just swipe on by…
Advertising
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
Mobile performance is tricky, due to device limitations with memory and processing power. Some HTML interactions can cause glitchy page rendering or transitions (“jank”).
Performance considerations
Layout Paint Composite
Calculate page geometry
Colour the pixels
Put it all together
3 steps to rendering a web page
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
Performance considerations
Resources CSS Triggers http://csstriggers.com Jank Free http://jankfree.org
Hopefully your vendor has done all this for you
*
• 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
Workflow considerations
Id ?? ?
Our typical workflow
Import
• Desktop importer • Bulk file upload • No copy and paste
• Creative input • Enhance with video
and interactivity • Proof & approve
Visual editing
Publish
• Push out into apps
1-3hours
Autotune
• Convert to HTML5 • Automatically clean
up and optimise • Assign layouts • Add lightweight
semantics
Workflow considerations
Modular
Responsive Quick config
Tweakable Humane
Instant preview
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”
Our principles
What happens when I push this button?
Magazine
?
Initial experience
“Wow, a shop full of back issues…”
Mostly this:
FILM MAGAZINE
Typical monthly digital edition publication cycle
100%
Publication day
0%Rest of the
month
Chance of finding
something fresh
Publishing more frequently improves enagement
Chance of finding
something fresh
Same content, released in weekly chunks
Continuous or semi-continuous publishing
Minor updates at frequent intervals
The logical next step
Chance of finding
something fresh
EVO
Moved to continuous model, updated 3 or 4 times a week. Sessions more than doubled to 250k+ per month.
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.
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
Contentment
Michael Kowalski michael@getcontentment.com @micycle
top related