A talk given to the AOP Product Group, discussing the challenges with producing digital magazines that work across all devices. The problem is not delivery, but workflow. I talk about some of the design thinking and techniques that we have used to address this problem with Padify.
2. • 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.
19. A humane interface
treats the user with respect,
and allows for human error
Don’t make a human do what
a robot could do
20. 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
21. 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
22. The UI should not just be a view on the
data model.
7. Focus on user goals
7 humane design guidelines
24. All issues
Issue 10
Issue 9
Issue 8
A naive UI implementation
All magazines
Magazine A
Magazine B
Issue 10
Page 1
Page 2
Page 3
Page 2Start here
25. 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 10
Page 1
Page 2
Page 3
Last viewed page
26. Dropbox sync for import
Humane!
or drag and drop upload
or Indesign plugin
27. 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.
28. • 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
33. Don’t expect a robot to do a human’s work
Algorithmic design is rubbish
...but cheap and fast
34. 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
×
36. But magazine content is mostly unstructured
Data Template Page
×
Sometimes, a piece of text is just a piece of text
37. Construct a pseudo object on the fly
“Data” Template PageContent
Map elements using selectors
38. The curse of template proliferation
We want rich, varied layouts.✓
✗ But too many templates becomes
unwieldy and hard to manage.
39. 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
44. Where are the integration points?
• Import scripts
• InDesign plugin
• Templates & widgets
• Custom stylesheets
• API
• Hybrid app
• Coming: webhooks and export rules
45. What developer skills are needed?
• HTML
• CSS
• JSON
• Javascript
= the “open web platform”
46. 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.
54. • 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
we understand the techniques: breakpoints, scrolling over pagination, responsive images etc
Many devices => responsive design => HTML5
It would be nice to think that we can just automate this problem away. Can’t we just create some kind of magic unicorn conversion process that automatically converts print design into responsive design? Unfortunately not. You wouldn’t outsource your print design to a robot
It would be nice to think that we can just automate this problem away. Can’t we just create some kind of magic unicorn conversion process that automatically converts print design into responsive design? Unfortunately not. You wouldn’t outsource your print design to a robot
A brief comment on templating. There’s a lot of confusion about this because developers and designers use the word “templating” in quite different ways. If we’re working with rich content, then we can better results with the second kind.
It would be nice to think that we can just automate this problem away. Can’t we just create some kind of magic unicorn conversion process that automatically converts print design into responsive design? Unfortunately not. You wouldn’t outsource your print design to a robot
well, we can do what we do with any large problem - break it down into smaller chunks