introduction to html5 magazine apps

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