Practical workflows for responsive design

Practical workflows for responsive layout

Michael Kowalski, Contentment@micycle @PadifyApp

Michael Kowalski, founder of Contentment, a London-based tech startup building new tools for publishing.

Background

Our first product Padify provides simple cloud-hosted HTML5 production for digital magazines and content based apps.

Good news, everybody!

✓HTML5

✓Fluid grids

✓Breakpoints

✓Media queries

✓Responsive images

We have the technology

Cross-platform Responsivelayout

Accessible

Semantic Lightweight

InteractiveNon-proprietary

iOSAndroid

Web

Low lock-in Future proof

SmartphonesTablets

Laptops

TV

Simple webtechnology

Desktop

Hybrid apps

eBooksWeb apps

Wrap & provision

Wrap as EPUB

Degrade to .mobi

•You already have a lot of content that is not responsive.

•You have existing production staff and workflows.

•Production window between print and digital is short.

•Developers are expensive.

BUT...

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

•Algorithms don’t make good design decisions.

•Therefore must allow for human intervention.

•No silver bullet.

You can’t automate everything

1. Workflow is for non-technical staff, NOT developers.

2. No coding required for regular production.

3. Produce once for all platforms and orientations.

4. Avoid rework.

5. Fast turnaround.

6. Deliver beautiful, interactive results.

Workflow requirements

Our approach: the remixing workflow

•Don’t start from scratch. Use your print assets as a starting point.

•Do a basic conversion to HTML5. Throw away print-specific styling. Keep only what you can reuse in your digital editions.

•Use templating to get to a rough first draft.

•Provide a visual interface for non-technical staff to add responsive layout and interactivity.

How a remixing workflow works

Usability = productivity

•Good: Dropbox sync, drag and drop, plugins, style mapping.

•Bad: Retyping, copy and paste, file upload.

Usable import

HTML5layouttool

syncexport

•Easy to edit: visual editing, drag and drop.

•Easy to fix mistakes: multi-step undo, versioning.

•Easy to reuse work: templates, saved styles.

•Easy to see results: instant preview for multiple devices.

•Bad: packaging for preflight

•Bad: form-based interfaces

•Bad: extra work for orientations/screen sizes

Usable layout tools

Usable templating for complex content?•Uh, sounds hard.

•Responsive design for a chunk of content.

•Designed to behave well under stress (at different breakpoints, etc).

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

•Mix and match to create varied, exciting layouts that work with the actual content to hand.

Micro-templating

1

2

3

1

2

3

•Screens are smaller than print pages.

•Reduce content density with tap-to-reveal.

•Mix of: slideshows, hotspots, drawers, etc.

•Add these behaviours to content already in the page, rather than creating from scratch.

Use simple interactions to reduce layout complexity

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

ProductionDesigner•Design

responsive micro-templates.

•Import content from print production.

•Break content into chunks.

•Apply micro-templates that are best fit content chunks.

•Tweak by hand if necessary.

•Enhance with video and other interactivity to taste.

Developer•Code responsive

micro-templates.

•Implement import process, mapping rules, etc.

Just once Every week/month

A moveable feast

Automatic Manual

Simple text articlesRegular featuresLow circulation

Complex, media-richSpecial featuresHigh circulation

✓ Design a remixing workflow to reduce rework and increase efficiency.

✓ Use microtemplating and interactions to reduce layout complexity.

✓ Optimise for non-technical staff and usability.

✓ Use design templates, not developer templates.

✓ Find the appropriate balance of automation and manual effort.

Summary

Thanks!

Michael Kowalski, Contentment@micycle @PadifyApp