Developing a practical HTML5 magazine workflow

Michael Kowalski, Contentment@micycle

•Padify is a cloud-hosted platform that provides scalable HTML5 production for digital magazines and content based apps.

• It lets you design just once for all devices and orientations.

Good news, everybody!

✓ HTML5

✓ Responsive layouts

✓ Fluid grids

✓ Breakpoints

✓ Media queries

✓ Responsive images

We have the technology!

Cross-platform Responsivelayout

Accessible

Semantic Low file size

InteractiveNon-proprietary

iOSAndroid

Web

Low lock-in Future proof-ish

SmartphonesTablets

Laptops

TV

Open web platform

Desktop

Hybrid app

Hybrid app

Newsstand

Cross platform deliveryis not the problem

Cross platform workflowis the problem

Where did that HTML5 come from?

✓ Fast

✓ Usable

✓ Scalable

✓ Cost effective

✓ High quality outcome

Requirements for a practical cross platform workflow

✓ Works with existing staff

✓ Works with existing content

✓ Works with existing systems

Plays nicely with your stuff

Remixing not creating

Not so much a CMS.

More of a CRS.

The human angle

Responsive design is a

paradigm shift

headfuck

Responsive design is a

Sweeten the deal with cool stuff and a humane user interface

A humane interfacetreats the user with

respect, and allows for human error

Don’t make a human do what a robot could do

Autosave everything.1. Never lose the user’s work

Avoid rekeying. Copy and paste is not a humane import mechanism!

2. Don’t make the user redo their work

Undo anything. Keep a version history.

3. Let the user change their mind

7 humane design guidelines

Avoid modal dialogs. 4. Don’t interrupt the user

Avoid order dependence.5. Let the user work in their own way

Persist user interface state.6. Let the user go to lunch

7 humane design guidelines

The UI should not just be a view on the data model.

7. Focus on user goals

7 humane design guidelines

The basic magazine data model

Magazine

Edition

Page

All issues

Issue 10

Issue 9

Issue 8

A naive UI implementation

All magazines

Magazine A

Magazine B

Issue 10Page 1

Page 2

Page 3

Page 2Start here

A better implementation

All issues

Issue 10

Issue 9

Issue 8

Start here

Next page

with added “nextiness”

Magazine A

Magazine B

Switch magazines

Issue 10Page 1

Page 2

Page 3

Last viewed page

Dropbox sync for import

Huma

ne!

or drag and drop upload

or Indesign plugin

Editorial users can build in great interactive behaviour without technical skills; do things that were never possible in print.

Cool stuff

Video Hotspots

Animation

Layers

•No developer input required as part of regular production cycle.

•Avoid overly technical UI for editorial staff.

•Focus on workflow and goals, not the data model.

•No developer input required as part of regular production cycle.

Separate out developer concerns from editorial concerns

Tapfor more

info

Layers

Hotspots

Multilevel undo

Animation

Custom fonts

Pasteboard

WYSIWYG editing

Instant preview

Responsive grid layout

Rule the pitch

Tapfor

moreinfo

Responsive templating

Tablet users expect a better experience than cookie-cutter design or PDFs

Don’t expect a robot to do a human’s workAlgorithmic design is rubbish...but cheap and fast

What we talk about when we talk about templating

Developer

Template first, squirt content through it later. Separate content from presentation.

A starting point. Apply the template and then mess with it. Design around the content. Designer

×

How templating usually works

Data Template

Page

But magazine content is mostly unstructured

Data Template

Page

×Sometimes, a piece of text is just a

piece of text

Construct a pseudo object on the fly

“Data”

Template

PageContent

Map elements using selectors

The curse of template proliferationWe want rich, varied layouts. ✓

✗ But too many templates becomes unwieldy and hard to manage.

Turn a big problem into a series of smaller problems

Micro-templating

•Break content into chunks (depending on the particular content)

•Provide microtemplates for chunks

•Build responsive microtemplates that behave well under stress (at different breakpoints, etc)

•Mix and match microtemplates to create varied layouts that work with the actual content to hand

1

2

3

1

2

3

Developers, developers

You don’t have to write codeBut you can

Where are the integration points?• Import scripts • InDesign plugin•Templates & widgets•Custom stylesheets•API •Hybrid app•Coming: webhooks and export

rules

What developer skills are needed?•HTML•CSS• JSON• Javascript

= the “open web platform”

What is the developer UI like?•Trick question! Never write UI for developers!•The only good developer UI is text

files in folders, giving them the freedom to use whatever tools and source control they prefer.

Editorial system

.json

Dropbox

github

Whatevercode editor and source control tools you like

Developer

Designer

Code & config

Very simple integration

Padify

Newsstand

Dropbox

InDesign

Readerapp

API

Not quite so simple integration

Padify

StonewashDrupalCMS

Newsstand

HTML5

Pugpig

Drupaltemplates

InDesign

Dropbox

Rekey

Templated High design

Simple text articlesRegular features

Complex, media-richSpecial features

COPE = Create Once, Publish Everywhere

Remix Once

^

Validation & discovery

Padify DraftHTML5

Manualpost

production

FinishedHTML

Requirements

Customers

Early days

Padify

Requirements

Customers

Validation & discoveryUp and running

•Remix existing resources into HTML5•Usability, interactivity and design

templates to sweeten the transition to responsive design

•Microtemplates for scalable layout variation

•Open web platform for cheap and developer friendly customisation and integration

•Start before you’re ready

Summary

Thanks!

Michael Kowalski@micycle michael@getcontentment.com