Developing a practicalHTML5 magazine workflowMichael Kowalski, Contentment@micycle
• Padify is a cloud-hosted platform that providesscalable HTML5 production for digital magazinesand content based apps.• I...
Good news, everybody!
✓ HTML5✓ Responsive layouts✓ Fluid grids✓ Breakpoints✓ Media queries✓ Responsive imagesWe have the technology!
Cross-platform ResponsivelayoutAccessibleSemantic Low file sizeInteractiveNon-proprietaryiOSAndroidWebLow lock-in Future p...
Hybrid app
Hybrid appNewsstand
Cross platform deliveryis not the problem
Cross platform workflowis the problem
Where did that HTML5 come from?
✓ Fast✓ Usable✓ Scalable✓ Cost effective✓ High quality outcomeRequirements for a practicalcross platform workflow
✓ Works with existing staff✓ Works with existing content✓ Works with existing systemsPlays nicely with your stuff
Remixing not creatingNot so much a CMS. More of a CRS.
The human angle
Responsive design is a paradigm shift
headfuckResponsive design is a
Sweeten the deal with cool stuffand a humane user interface
A humane interfacetreats the user with respect,and allows for human errorDon’t make a human do whata robot could do
Autosave everything.1. Never lose the user’s workAvoid rekeying. Copy and paste is not ahumane import mechanism!2. Don’t m...
Avoid modal dialogs.4. Don’t interrupt the userAvoid order dependence.5. Let the user work in their own wayPersist user in...
The UI should not just be a view on thedata model.7. Focus on user goals7 humane design guidelines
The basic magazine data modelMagazineEditionPage
All issuesIssue 10Issue 9Issue 8A naive UI implementationAll magazinesMagazine AMagazine BIssue 10Page 1Page 2Page 3Page 2...
A better implementationAll issuesIssue 10Issue 9Issue 8Start hereNext pagewith added “nextiness”Magazine AMagazine BSwitch...
Dropbox sync for importHumane!or drag and drop uploador Indesign plugin
Editorial users can build in great interactivebehaviour without technical skills; do thingsthat were never possible in pri...
• Avoid overly technical UI for editorial staff.• Focus on workflow and goals, not the datamodel.• No developer input requ...
Tapfor moreinfoLayersHotspotsMultilevel undoAnimationCustom fontsPasteboardWYSIWYG editing
Instant previewResponsive grid layoutRule thepitchTapformoreinfo
Responsive templating
Tablet users expect a better experiencethan cookie-cutter design or PDFs
Don’t expect a robot to do a human’s workAlgorithmic design is rubbish...but cheap and fast
What we talk aboutwhen we talk about templatingDeveloperTemplate first, squirtcontent through it later.Separate content fr...
How templating usually worksData Template Page
But magazine content is mostly unstructuredData Template Page×Sometimes, a piece of text is just a piece of text
Construct a pseudo object on the fly“Data” Template PageContentMap elements using selectors
The curse of template proliferationWe want rich, varied layouts.✓✗ But too many templates becomesunwieldy and hard to mana...
Turn a big problem into a series of smaller problemsMicro-templating• Break content into chunks (depending on theparticula...
123123
Developers, developers
You don’t have to write codeBut you can
Where are the integration points?• Import scripts• InDesign plugin• Templates & widgets• Custom stylesheets• API• Hybrid a...
What developer skills are needed?• HTML• CSS• JSON• Javascript= the “open web platform”
What is the developer UI like?• Trick question!Never write UI for developers!• The only good developer UI is text files in...
Editorial system.jsonDropboxgithubWhatevercode editorand sourcecontrol toolsyou likeDeveloperDesignerCode & config
Very simple integrationPadifyNewsstandDropboxInDesignReaderapp
APINot quite so simpleintegrationPadifyStonewashDrupalCMSNewsstandHTML5PugpigDrupaltemplatesInDesignDropboxRekey
Templated High designSimple text articlesRegular featuresComplex, media-richSpecial features
COPE = Create Once, Publish EverywhereRemix Once^
Validation & discoveryPadify DraftHTML5ManualpostproductionFinishedHTMLRequirementsCustomersEarly days
PadifyRequirementsCustomersValidation & discoveryUp and running
• Remix existing resources into HTML5• Usability, interactivity and design templatesto sweeten the transition to responsiv...
Thanks!Michael Kowalski@micyclemichael@getcontentment.com
Developing a practical HTML5 magazine workflow
Developing a practical HTML5 magazine workflow
Upcoming SlideShare
Loading in...5
×

Developing a practical HTML5 magazine workflow

4,308

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 design thinking and techniques that we have used to address this problem with Padify.

Published in: Technology
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total Views
4,308
On Slideshare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
25
Comments
1
Likes
2
Embeds 0
No embeds

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
  • Developing a practical HTML5 magazine workflow

    1. 1. Developing a practicalHTML5 magazine workflowMichael Kowalski, Contentment@micycle
    2. 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. 3. Good news, everybody!
    4. 4. ✓ HTML5✓ Responsive layouts✓ Fluid grids✓ Breakpoints✓ Media queries✓ Responsive imagesWe have the technology!
    5. 5. Cross-platform ResponsivelayoutAccessibleSemantic Low file sizeInteractiveNon-proprietaryiOSAndroidWebLow lock-in Future proof-ishSmartphonesTabletsLaptopsTVOpen web platformDesktop
    6. 6. Hybrid app
    7. 7. Hybrid appNewsstand
    8. 8. Cross platform deliveryis not the problem
    9. 9. Cross platform workflowis the problem
    10. 10. Where did that HTML5 come from?
    11. 11. ✓ Fast✓ Usable✓ Scalable✓ Cost effective✓ High quality outcomeRequirements for a practicalcross platform workflow
    12. 12. ✓ Works with existing staff✓ Works with existing content✓ Works with existing systemsPlays nicely with your stuff
    13. 13. Remixing not creatingNot so much a CMS. More of a CRS.
    14. 14. The human angle
    15. 15. Responsive design is a paradigm shift
    16. 16. headfuckResponsive design is a
    17. 17. Sweeten the deal with cool stuffand a humane user interface
    18. 18. A humane interfacetreats the user with respect,and allows for human errorDon’t make a human do whata robot could do
    19. 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. 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. 21. The UI should not just be a view on thedata model.7. Focus on user goals7 humane design guidelines
    22. 22. The basic magazine data modelMagazineEditionPage
    23. 23. All issuesIssue 10Issue 9Issue 8A naive UI implementationAll magazinesMagazine AMagazine BIssue 10Page 1Page 2Page 3Page 2Start here
    24. 24. A better implementationAll issuesIssue 10Issue 9Issue 8Start hereNext pagewith added “nextiness”Magazine AMagazine BSwitch magazinesIssue 10Page 1Page 2Page 3Last viewed page
    25. 25. Dropbox sync for importHumane!or drag and drop uploador Indesign plugin
    26. 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. 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. 28. Tapfor moreinfoLayersHotspotsMultilevel undoAnimationCustom fontsPasteboardWYSIWYG editing
    29. 29. Instant previewResponsive grid layoutRule thepitchTapformoreinfo
    30. 30. Responsive templating
    31. 31. Tablet users expect a better experiencethan cookie-cutter design or PDFs
    32. 32. Don’t expect a robot to do a human’s workAlgorithmic design is rubbish...but cheap and fast
    33. 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. 34. How templating usually worksData Template Page
    35. 35. But magazine content is mostly unstructuredData Template Page×Sometimes, a piece of text is just a piece of text
    36. 36. Construct a pseudo object on the fly“Data” Template PageContentMap elements using selectors
    37. 37. The curse of template proliferationWe want rich, varied layouts.✓✗ But too many templates becomesunwieldy and hard to manage.
    38. 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. 39. 123123
    40. 40. Developers, developers
    41. 41. You don’t have to write codeBut you can
    42. 42. Where are the integration points?• Import scripts• InDesign plugin• Templates & widgets• Custom stylesheets• API• Hybrid app• Coming: webhooks and export rules
    43. 43. What developer skills are needed?• HTML• CSS• JSON• Javascript= the “open web platform”
    44. 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. 45. Editorial system.jsonDropboxgithubWhatevercode editorand sourcecontrol toolsyou likeDeveloperDesignerCode & config
    46. 46. Very simple integrationPadifyNewsstandDropboxInDesignReaderapp
    47. 47. APINot quite so simpleintegrationPadifyStonewashDrupalCMSNewsstandHTML5PugpigDrupaltemplatesInDesignDropboxRekey
    48. 48. Templated High designSimple text articlesRegular featuresComplex, media-richSpecial features
    49. 49. COPE = Create Once, Publish EverywhereRemix Once^
    50. 50. Validation & discoveryPadify DraftHTML5ManualpostproductionFinishedHTMLRequirementsCustomersEarly days
    51. 51. PadifyRequirementsCustomersValidation & discoveryUp and running
    52. 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. 53. Thanks!Michael Kowalski@micyclemichael@getcontentment.com
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×