Post on 16-Nov-2014
description
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