Introduction to HTML5 magazine apps
1 like1,076 views
This document discusses how HTML5 can be used to create interactive digital magazines and apps. It highlights that mobile consumption of media now matches web usage. The company Contentment creates HTML5-based apps and magazines using their Padify platform. They discuss responsive design principles, types of interactivity like filtering and advertising, and the benefits of a continuous publishing model to keep readers engaged. Workflow considerations like usability and quick turnaround are also covered.
Introduction to HTML5 magazine apps
- 1. Contentment getcontentment.com Interaction in HTML apps Michael Kowalski @micycle
- 2. Padify is our platform for creating HTML5- based apps, adverts, and digital magazines WINNER PME Digital Innovation Feb 2014 FINALIST SIIA Media Innovation Apr 2014
- 3. Mobile has changed the way people consume media Proportion of media and communications activities across the day Source: Digital Day, Aug 2014
- 4. In US mobile media consumption has now matched web
- 5. What we do Print assets Autotune Layout & enhance Other content Padify Reader apps iOS Android web Publish Id CMS media x1 for all devices
- 6. Our sweet spot Practical workflow Creative control Mobile friendly
- 7. What’s so great about HTML?
- 8. Shareable Cross-platform Responsive layout Accessible Semantic Low file size Non-proprietary Interactive iOS Android Web Low lock-in Future proof Smartphones Tablets Laptops TV Desktop Reusable Utility Simple web Better technology engagement
- 9. Cross-platform Responsive layout Semantic Low file size Non-proprietary Interactive iOS Android Web Low lock-in Future proof Smartphones Tablets Laptops TV Simple web technology Desktop Reusable Better engagement Utility Accessible Shareable
- 10. Native code Device capabilities HTML – Native bridge Content Hybrid apps One time for each platform Regular production
- 11. HTML5 has three main components HTML for content CSS for styling Javascript for interaction
- 12. Do you need to learn HTML? Or (gulp) Javascript? If you have to write code on a regular basis, you do not have a practical workflow A flexible toolset will allow you to create new layouts without coding
- 13. Advantages of Javascript Cross-platform: same code for iOS, Android and web ! Simple interaction model, with event handling built in ! World’s most widely used programming language ! Relatively cheap and quick to develop ! Can make use of many free libraries, widgets, etc
- 14. Differences between mobile and the desktop web VS ✘ Screens are smaller ✘ Fingers are fatter than mouse pointers ✘ Limited range of gestures; no “hover” or right click ✘ Device memory and processing power are limited ✘ Offline (or worse, intermittent connectivity) is common ✓No legacy browsers!
- 15. Principles of good mobile UX Simple user flow: one thing at a time. Take advantage of familiar patterns. Do not try and fit content to the screen – it can’t work. Scrolling is a key responsive technique.
- 16. Uses of interaction The first generation of magazine apps were often kitchen sinks of random interactivity. But interaction need not be pointless gimmickry. There are many valuable use cases: Signalling Filtering Navigation Advertising Extra utility Wow factor Data capture
- 17. Doing it wrong: “How to use this app”
- 18. The standard navigation model Explore Engage Locate
- 19. Signalling Fat fingers and small screens = easy accidents. Signalling is important: what just happened, what’s going to happen next. Elmer sofa, Make use of animated transitions like slides, zooms, parallax and fades for signalling: • Changing photos in gallery • Opening popovers and captions • Animate headings to signal a change of topic or section • Zoom open editions
- 20. Filtering Mobile screens are too small to show everything at once. Use filtering techniques to allow readers to opt in to only the content they want to see. Slideshows Popovers Hotspots Tap-to-enlarge Drawers Data filters
- 21. Adding utility Interaction can add useful features for readers that go beyond what is possible in print. These can can take advantage of device capabilities like address books and maps, as well as connecting to web services (when online). In-app purchase Affiliate shopping Shopping lists Nearest venue Music players
- 22. The advertising gap Currently a big mismatch between attention and advertising spend Kleiner Perkins “Internet Trends 2014” 50% 40% 30% 20% 10% Time spent Ad spend Print Radio TV Internet Mobile
- 23. Advertising On mobile, full screen ads are less intrusive. When in “explore” mode, readers can just swipe on by…
- 24. But if you can trigger engagement, you have an incredible canvas for native advertising “below the fold” using responsive HTML Beginning Middle End Story arc { {{ Advertising
- 25. Performance considerations Mobile performance is tricky, due to device limitations with memory and processing power. Some HTML interactions can cause glitchy page rendering or transitions (“jank”). 3 steps to rendering a web page Layout Paint Composite Calculate page geometry Colour the pixels Put it all together
- 26. Performance considerations Techniques* • Lazy load images and video • Only animate properties that won’t cause jank • Limit the amount of effects in a single page • Do lots of testing on devices: just because it works in a desktop browser doesn’t mean it will work on mobile Resources CSS Triggers http://csstriggers.com Jank Free http://jankfree.org Hopefully your vendor has done all this for you *
- 27. Workflow considerations Id ? ? ? • Converting InDesign docs to interactive HTML5 is not easy • CMS solutions may require you to rekey or copy/paste all your content = very time consuming • Internal workflow resources can easily become the biggest part of your costs • Need a responsive human-usable system that can realistically be used for regular production
- 28. Our typical workflow • Desktop importer • Bulk file upload • No copy and paste Import • Creative input • Enhance with video and interactivity • Proof & approve Visual editing Publish • Push out into apps 1-3 hours Autotune • Convert to HTML5 • Automatically clean up and optimise • Assign layouts • Add lightweight semantics
- 29. Workflow considerations Modular Responsive Quick config Tweakable Humane Instant preview Our principles Interactive components can be combined to create varied pages, designed with the content Modules are designed to work on all devices No coding or tedious coordinate entry Designs can be adjusted by hand without coding Automate out tedious drudgery, avoid repetition Can test result straight away, without “packaging”
- 30. What happens when I push this button? ? Magazine Initial experience
- 31. Mostly this: “Wow, a shop full of back issues…” FILM MAGAZINE
- 32. Typical monthly digital edition publication cycle 100% Publication day 0% Rest of the month Chance of finding something fresh
- 33. Publishing more frequently improves enagement Chance of finding something fresh Same content, released in weekly chunks
- 34. The logical next step Continuous or semi-continuous publishing Minor updates at frequent intervals Chance of finding something fresh
- 35. EVO Moved to continuous model, updated 3 or 4 times a week. Sessions more than doubled to 250k+ per month.
- 36. Long+Short New digital magazine from Nesta uses a “seasonal” publishing model. A new themed season starts every couple of months, launching with a batch of stories. Fresh stories are posted every day for rest of season.
- 37. Summary • HTML5 interactivity provides a cost effective way to add value to digital magazines • Mobile is different from the desktop web, and care needs to be taken to avoid performance problems • Practical workflow is a key consideration for successful interactive publishing • Responsive design tools create new opportunities for creating interactive native advertising • Continuous publishing can increase engagement and work more effectively for mobile consumers
- 38. Contentment Michael Kowalski michael@getcontentment.com @micycle