Successfully reported this slideshow.

Design ♥ HTML5 – The Future of Mobile Editorial Design

43

Share

Loading in …3
×
1 of 51
1 of 51

Design ♥ HTML5 – The Future of Mobile Editorial Design

43

Share

Nico Engelhardt and Johannes Ippen, the makers of asidemag.com about Editorial Design for the iPad. Keynote from the MobileTech Conference 2011

Nico Engelhardt and Johannes Ippen, the makers of asidemag.com about Editorial Design for the iPad. Keynote from the MobileTech Conference 2011

More Related Content

Related Audiobooks

Free with a 14 day trial from Scribd

See all

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
  8. „Can you beautify this?“
  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
  17. vs.
  18. iPad Mags
  19. 20 x 30cm 15 x 20cm 300 dpi 131 dpi Size matters
  20. Interaction
  21. DONT: scale down squeeze make it a PDF Version content into 500MB of print web-like download magazine template monster
  22. Why HTML 5 is the perfect design tool
  23. HTML new elements improve content structure CSS3 new style properties make PhotoShop obsolete JavaScript adds an interactivity layer
  24. <article> <h1> <video> <blockquote> <section>
  25. @font-face transform gradients box-shadow rgba border-radius …
  26. Swipe Table of content Interactive Elements
  27. > > > >
  28. - > Wireframe to HTML5 getting over the Adobe Workflow
  29. Helpers because no one is perfect
  30. Typography
  31. www.kernjs.com
  32. www.google.com /webfonts
  33. www.typekit.co m
  34. Styles & Effects
  35. www.layerstyles .com
  36. www.gradients.g lrzad.com
  37. www.tumultco.c om/hype/
  38. Layout Grid
  39. www.lessframew ork.com
  40. www.csswizardr y.com/inuitcss/
  41. But still, we were missing a real Magazine Grid
  42. 8 columns images reach the nice viewport readable border text with gutter pagination
  43. <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>
  44. both orientations
  45. MagazineGrid Create Great Magazine Layouts for the iPad
  46. Pluginable Lightweight IE? Hell no! A Readable iPhone
  47. …and the best part is: it‘s FREE Download grid .asidemag.com today: CC-BY-SA
  48. asidemag.com Download: asidemag.com/grid Twitter: @asidemagazine Social: fb.com/asidemag

×