Your SlideShare is downloading. ×
Developing a practical HTML5 magazine workflow
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Developing a practical HTML5 magazine workflow

4,187
views

Published on

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 …

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.

Published in: Technology

1 Comment
2 Likes
Statistics
Notes
  • Mildly mangled by conversion to powerpoint, will try and update a better version soon
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
4,187
On Slideshare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
21
Comments
1
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • 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
  • Transcript

    • 1. Developing a practicalHTML5 magazine workflowMichael Kowalski, Contentment@micycle
    • 2. • Padify is a cloud-hosted platform that providesscalable HTML5 production for digital magazinesand content based apps.• It lets you design just once for all devices andorientations.
    • 3. Good news, everybody!
    • 4. ✓ HTML5✓ Responsive layouts✓ Fluid grids✓ Breakpoints✓ Media queries✓ Responsive imagesWe have the technology!
    • 5. Cross-platform ResponsivelayoutAccessibleSemantic Low file sizeInteractiveNon-proprietaryiOSAndroidWebLow lock-in Future proof-ishSmartphonesTabletsLaptopsTVOpen web platformDesktop
    • 6. Hybrid app
    • 7. Hybrid appNewsstand
    • 8. Cross platform deliveryis not the problem
    • 9. Cross platform workflowis the problem
    • 10. Where did that HTML5 come from?
    • 11. ✓ Fast✓ Usable✓ Scalable✓ Cost effective✓ High quality outcomeRequirements for a practicalcross platform workflow
    • 12. ✓ Works with existing staff✓ Works with existing content✓ Works with existing systemsPlays nicely with your stuff
    • 13. Remixing not creatingNot so much a CMS. More of a CRS.
    • 14. The human angle
    • 15. Responsive design is a paradigm shift
    • 16. headfuckResponsive design is a
    • 17. Sweeten the deal with cool stuffand a humane user interface
    • 18. A humane interfacetreats the user with respect,and allows for human errorDon’t make a human do whata robot could do
    • 19. Autosave everything.1. Never lose the user’s workAvoid rekeying. Copy and paste is not ahumane import mechanism!2. Don’t make the user redo their workUndo anything. Keep a version history.3. Let the user change their mind7 humane design guidelines
    • 20. Avoid modal dialogs.4. Don’t interrupt the userAvoid order dependence.5. Let the user work in their own wayPersist user interface state.6. Let the user go to lunch7 humane design guidelines
    • 21. The UI should not just be a view on thedata model.7. Focus on user goals7 humane design guidelines
    • 22. The basic magazine data modelMagazineEditionPage
    • 23. All issuesIssue 10Issue 9Issue 8A naive UI implementationAll magazinesMagazine AMagazine BIssue 10Page 1Page 2Page 3Page 2Start here
    • 24. A better implementationAll issuesIssue 10Issue 9Issue 8Start hereNext pagewith added “nextiness”Magazine AMagazine BSwitch magazinesIssue 10Page 1Page 2Page 3Last viewed page
    • 25. Dropbox sync for importHumane!or drag and drop uploador Indesign plugin
    • 26. Editorial users can build in great interactivebehaviour without technical skills; do thingsthat were never possible in print.Cool stuffVideo Hotspots Animation Layers• No developer input required as part of regularproduction cycle.
    • 27. • Avoid overly technical UI for editorial staff.• Focus on workflow and goals, not the datamodel.• No developer input required as part ofregular production cycle.Separate out developer concernsfrom editorial concerns
    • 28. Tapfor moreinfoLayersHotspotsMultilevel undoAnimationCustom fontsPasteboardWYSIWYG editing
    • 29. Instant previewResponsive grid layoutRule thepitchTapformoreinfo
    • 30. Responsive templating
    • 31. Tablet users expect a better experiencethan cookie-cutter design or PDFs
    • 32. Don’t expect a robot to do a human’s workAlgorithmic design is rubbish...but cheap and fast
    • 33. What we talk aboutwhen we talk about templatingDeveloperTemplate first, squirtcontent through it later.Separate content frompresentation.A starting point. Applythe template and thenmess with it. Designaround the content.Designer×
    • 34. How templating usually worksData Template Page
    • 35. But magazine content is mostly unstructuredData Template Page×Sometimes, a piece of text is just a piece of text
    • 36. Construct a pseudo object on the fly“Data” Template PageContentMap elements using selectors
    • 37. The curse of template proliferationWe want rich, varied layouts.✓✗ But too many templates becomesunwieldy and hard to manage.
    • 38. Turn a big problem into a series of smaller problemsMicro-templating• Break content into chunks (depending on theparticular content)• Provide microtemplates for chunks• Build responsive microtemplates that behave wellunder stress (at different breakpoints, etc)• Mix and match microtemplates to create variedlayouts that work with the actual content to hand
    • 39. 123123
    • 40. Developers, developers
    • 41. You don’t have to write codeBut you can
    • 42. Where are the integration points?• Import scripts• InDesign plugin• Templates & widgets• Custom stylesheets• API• Hybrid app• Coming: webhooks and export rules
    • 43. What developer skills are needed?• HTML• CSS• JSON• Javascript= the “open web platform”
    • 44. What is the developer UI like?• Trick question!Never write UI for developers!• The only good developer UI is text files infolders, giving them the freedom to usewhatever tools and source control theyprefer.
    • 45. Editorial system.jsonDropboxgithubWhatevercode editorand sourcecontrol toolsyou likeDeveloperDesignerCode & config
    • 46. Very simple integrationPadifyNewsstandDropboxInDesignReaderapp
    • 47. APINot quite so simpleintegrationPadifyStonewashDrupalCMSNewsstandHTML5PugpigDrupaltemplatesInDesignDropboxRekey
    • 48. Templated High designSimple text articlesRegular featuresComplex, media-richSpecial features
    • 49. COPE = Create Once, Publish EverywhereRemix Once^
    • 50. Validation & discoveryPadify DraftHTML5ManualpostproductionFinishedHTMLRequirementsCustomersEarly days
    • 51. PadifyRequirementsCustomersValidation & discoveryUp and running
    • 52. • Remix existing resources into HTML5• Usability, interactivity and design templatesto sweeten the transition to responsive design• Microtemplates for scalable layout variation• Open web platform for cheap and developerfriendly customisation and integration• Start before you’re readySummary
    • 53. Thanks!Michael Kowalski@micyclemichael@getcontentment.com