Developing a practical HTML5 magazine workflow
•Download as PPT, PDF•
2 likes•5,105 views
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.
Report
Share
Developing a practical HTML5 magazine workflow
- 1. Developing a practical HTML5 magazine workflow Michael Kowalski, Contentment @micycle
- 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.
- 4. ✓ HTML5 ✓ Responsive layouts ✓ Fluid grids ✓ Breakpoints ✓ Media queries ✓ Responsive images We have the technology!
- 6. Cross-platform Responsive layout Accessible Semantic Low file size InteractiveNon-proprietary iOS Android Web Low lock-in Future proof-ish Smartphones Tablets Laptops TV Open web platform Desktop
- 7. Hybrid app
- 9. Cross platform delivery is not the problem
- 10. Cross platform workflow is the problem
- 11. Where did that HTML5 come from?
- 12. ✓ Fast ✓ Usable ✓ Scalable ✓ Cost effective ✓ High quality outcome Requirements for a practical cross platform workflow
- 13. ✓ Works with existing staff ✓ Works with existing content ✓ Works with existing systems Plays nicely with your stuff
- 14. Remixing not creating Not so much a CMS. More of a CRS.
- 15. The human angle
- 16. Responsive design is a paradigm shift
- 18. Sweeten the deal with cool stuff and a humane user interface
- 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
- 23. The basic magazine data model Magazine Edition Page
- 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
- 29. Tap for more info Layers Hotspots Multilevel undo Animation Custom fonts Pasteboard WYSIWYG editing
- 30. Instant preview Responsive grid layout Rule the pitch Tap for more info
- 32. Tablet users expect a better experience than cookie-cutter design or PDFs
- 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 ×
- 35. How templating usually works Data Template Page
- 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
- 40. 1 2 3 1 2 3
- 43. You don’t have to write code But you can
- 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.
- 47. Editorial system .json Dropbox github Whatever code editor and source control tools you like Developer Designer Code & config
- 49. API Not quite so simple integration Padify Stonewash Drupal CMS Newsstand HTML5 Pugpig Drupal templates InDesign Dropbox Rekey
- 50. Templated High design Simple text articles Regular features Complex, media-rich Special features
- 51. COPE = Create Once, Publish Everywhere Remix Once ^
- 52. Validation & discovery Padify Draft HTML5 Manual post production Finished HTML Requirements Customers Early days
- 53. Padify Requirements Customers Validation & discovery Up and running
- 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
Editor's Notes
- 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
- Here’s a really simple example