Design ♥ HTML5 – The Future of Mobile Editorial Design
43 likes5,491 views
The document discusses the impact of HTML5 on mobile editorial design, highlighting its advantages for creating flexible, interactive content without relying on traditional app stores. It emphasizes the importance of design aesthetics in engaging readers and outlines various tools and techniques for enhancing magazine layouts. Additionally, it promotes a specific magazine grid layout for optimal readability on mobile devices.
Design ♥ HTML5 – The Future of Mobile Editorial Design
- 1. DESIGN HTML 5 The Future of Mobile Editorial Design
- 2. & Nico Engelhardt nicoengelhardt.com Johannes Ippen johannesippen.tumblr.com
- 3. M aga zine 1s t HT ML5 Firtsot 55 .0 00 Edii n agazine Lifestyle M AppSt ore No
- 4. in the end, it‘s a … WebApp
- 5. Pro Con + No Approval - No AppStore + Flexible Development - No Camera Access + CloudSyncing - Lower Performance + Crossplatform + Easy Installation
- 6. = /
- 7. Let‘s talk about … Editorial Design
- 9. Design = / Aesthetics
- 10. Design is about Solutions
- 11. Problem: How do I get people to read this text?
- 12. Images
- 13. Structu re
- 14. Simplification
- 15. Visualization
- 16. Emotion
- 19. vs.
- 20. iPad Mags
- 21. 20 x 30cm 15 x 20cm 300 dpi 131 dpi Size matters
- 22. Interaction
- 23. DONT: scale down squeeze make it a PDF Version content into 500MB of print web-like download magazine template monster
- 24. Why HTML 5 is the perfect design tool
- 25. HTML new elements improve content structure CSS3 new style properties make PhotoShop obsolete JavaScript adds an interactivity layer
- 27. <article> <h1> <video> <blockquote> <section>
- 28. @font-face transform gradients box-shadow rgba border-radius …
- 29. Swipe Table of content Interactive Elements
- 30. > > > >
- 31. - > Wireframe to HTML5 getting over the Adobe Workflow
- 32. Helpers because no one is perfect
- 33. Typography
- 34. www.kernjs.com
- 35. www.google.com /webfonts
- 36. www.typekit.co m
- 37. Styles & Effects
- 38. www.layerstyles .com
- 39. www.gradients.g lrzad.com
- 40. www.tumultco.c om/hype/
- 41. Layout Grid
- 42. www.lessframew ork.com
- 43. www.csswizardr y.com/inuitcss/
- 44. But still, we were missing a real Magazine Grid
- 45. 8 columns images reach the nice viewport readable border text with gutter pagination
- 46. <article> <section> < p class="grid x4">…</p> < p class="grid x3">…</p> < p class="grid x1">…</p> </section> <sec tion class="gutter column3"> … </section> … </article>
- 48. MagazineGrid Create Great Magazine Layouts for the iPad
- 49. Pluginable Lightweight IE? Hell no! A Readable iPhone
- 50. …and the best part is: it‘s FREE Download grid .asidemag.com today: CC-BY-SA
- 51. asidemag.com Download: asidemag.com/grid Twitter: @asidemagazine Social: fb.com/asidemag