Practical workflows for responsive design
•Als PPT, PDF herunterladen•
1 gefällt mir•806 views
Presentation given at Publishing and Media Expo, London in Feb 2013. The topic is building a practical production workflow for responsive, cross-platform content.
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (19)
Andere mochten auch
Ähnlich wie Practical workflows for responsive design
Ähnlich wie Practical workflows for responsive design (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Practical workflows for responsive design
- 1. Practical workflows for responsive layout Michael Kowalski, Contentment @micycle @PadifyApp
- 2. Background Michael Kowalski, founder of Contentment, a London-based tech startup building new tools for publishing. Our first product Padify provides simple cloud-hosted HTML5 production for digital magazines and content based apps.
- 4. We have the technology ✓ HTML5 ✓ Fluid grids ✓ Breakpoints ✓ Media queries ✓ Responsive images
- 5. iOS Android Accessible Smartphones Web Tablets Responsive Laptops Cross-platform layout TV Desktop Semantic Lightweight Non-proprietary Interactive Low lock-in Future proof Simple web technology
- 6. Hybrid apps Wrap & provision Wra p as E Deg PUB r ade to . mo bi Web apps eBooks
- 7. BUT... • 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.
- 8. You can’t automate everything • 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.
- 9. Workflow requirements 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.
- 10. Our approach: the remixing workflow
- 11. How a remixing workflow works • 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.
- 13. Usable import • Good: Dropbox sync, drag and drop, plugins, style mapping. • Bad: Retyping, copy and paste, file upload. export sync HTML5 layout tool
- 14. Usable layout tools • 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
- 15. Usable templating for complex content? • Uh, sounds hard.
- 17. Micro-templating • 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.
- 18. 1 1 2 3 2 3
- 19. Use simple interactions to reduce layout complexity • 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.
- 20. What we talk about when we talk about templating Template first, squirt A starting point. Apply content through it later. the template and then Separate content from mess with it. Design presentation. around the content. Developer Designer
- 21. Just once Every week/month Designer Production • Design responsive • Import content from print micro-templates. production. • Break content into chunks. Developer • Apply micro-templates that are best fit content • Code responsive chunks. micro-templates. • Tweak by hand if • Implement import necessary. process, mapping rules, etc. • Enhance with video and other interactivity to taste.
- 22. A moveable feast Automatic Manual Simple text articles Complex, media-rich Regular features Special features Low circulation High circulation
- 24. Summary ✓ 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.
- 25. Thanks! Michael Kowalski, Contentment @micycle @PadifyApp
Hinweis der Redaktion
- we understand the techniques: breakpoints, scrolling over pagination, responsive images etc
- we have the technology
- hybrid apps or web nativeso that makes it pretty future proof
- problem solved? not really. what we’ve been describing so far are technical solutions. but for publishers there are some business challenges as well. how do we build a practical workflow, that accounts for what we already have, and that doesn’t pile on too much extra cost and effort?
- 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
- Optimise for humans. Reduce the production bottleneck.
- Here’s a quick summary of what I mean by a remixing interface. I’ll go into this in a bit more detail in a moment.
- There is sometimes this idea that spending a lot of effort on usability for internal processes is wasted effort because there aren’t many users, compared with - say - the number of readers. But optimising for usability is the same thing as optimising for productivity
- Copy-and-paste is an inefficient import mechanism.
- well, we can do what we do with any large problem - break it down into smaller chunks
- Here’s a really simple example
- well, we can do what we do with any large problem - break it down into smaller chunks
- 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.