introduction to html5 magazine apps

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

Upload: michael-kowalski

Post on 02-Dec-2014

320 views

Category:

Mobile


1 download

DESCRIPTION

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

TRANSCRIPT

Page 1: Introduction to HTML5 magazine apps

Interaction in HTML apps

Contentment getcontentment.com

Michael Kowalski @micycle

Page 2: Introduction to HTML5 magazine apps

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

Page 3: Introduction to HTML5 magazine apps

Proportion of media and communications activities across the day

Source: Digital Day, Aug 2014

Mobile has changed the way people consume media

Page 4: Introduction to HTML5 magazine apps

In US mobile media consumption has now matched web

Page 5: Introduction to HTML5 magazine apps

Print assets

Autotune

Layout & enhance

Other content

Reader appsPadifyiOS

Android

web

PublishId

CMS media

What we do

x1 for all

devices

Page 6: Introduction to HTML5 magazine apps

Practical workflow

Creative control

Mobile friendly

Our sweet spot

Page 7: Introduction to HTML5 magazine apps

What’s so great about HTML?

Page 8: Introduction to HTML5 magazine apps

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

Page 9: Introduction to HTML5 magazine apps

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

Page 10: Introduction to HTML5 magazine apps

Content

HTML – Native bridge

Native code Device capabilities

One time for each platform

Regular production

Hybrid apps

Page 11: Introduction to HTML5 magazine apps

HTML5 has three main components

HTML for content

CSS for styling

Javascript for interaction

Page 12: Introduction to HTML5 magazine apps

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

Page 13: Introduction to HTML5 magazine apps

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

Page 14: Introduction to HTML5 magazine apps

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

Page 15: Introduction to HTML5 magazine apps

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

Page 16: Introduction to HTML5 magazine apps

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:

Page 17: Introduction to HTML5 magazine apps

Doing it wrong: “How to use this app”

Page 18: Introduction to HTML5 magazine apps

The standard navigation model

Engage

Explore

Locate

Page 19: Introduction to HTML5 magazine apps

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

Page 20: Introduction to HTML5 magazine apps

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

Page 21: Introduction to HTML5 magazine apps

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

Page 22: Introduction to HTML5 magazine apps

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

Page 23: Introduction to HTML5 magazine apps

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

Advertising

Page 24: Introduction to HTML5 magazine apps

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

Page 25: Introduction to HTML5 magazine apps

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

Page 26: Introduction to HTML5 magazine apps

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

*

Page 27: Introduction to HTML5 magazine apps

• 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 ?? ?

Page 28: Introduction to HTML5 magazine apps

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

Page 29: Introduction to HTML5 magazine apps

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

Page 30: Introduction to HTML5 magazine apps

What happens when I push this button?

Magazine

?

Initial experience

Page 31: Introduction to HTML5 magazine apps

“Wow, a shop full of back issues…”

Mostly this:

FILM MAGAZINE

Page 32: Introduction to HTML5 magazine apps

Typical monthly digital edition publication cycle

100%

Publication day

0%Rest of the

month

Chance of finding

something fresh

Page 33: Introduction to HTML5 magazine apps

Publishing more frequently improves enagement

Chance of finding

something fresh

Same content, released in weekly chunks

Page 34: Introduction to HTML5 magazine apps

Continuous or semi-continuous publishing

Minor updates at frequent intervals

The logical next step

Chance of finding

something fresh

Page 35: Introduction to HTML5 magazine apps

EVO

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

Page 36: Introduction to HTML5 magazine apps

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.

Page 37: Introduction to HTML5 magazine apps

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

Page 38: Introduction to HTML5 magazine apps

Contentment

Michael Kowalski [email protected] @micycle