Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
DESIGN                     HTML 5  The Future of Mobile Editorial Design
&Nico Engelhardt nicoengelhardt.com        Johannes Ippen                          johannesippen.tumblr.com
M aga zine1s t HT ML5                     Firtsot 55 .0 00            Edii n            agazine Lifestyle M        AppSt o...
in the end, it‘s a …WebApp
Pro                      Con+ No Approval            - No AppStore+ Flexible Development   - No Camera Access+ CloudSyncin...
=/
Let‘s talk about …Editorial Design
„Can youbeautify this?“
Design    =    /Aesthetics
Design  is aboutSolutions
Problem:How do I get peopleto read this text?
Images
Structu       re
Simplification
Visualization
Emotion
vs.
iPad Mags
20 x 30cm15 x 20cm              300 dpi 131 dpi            Size matters
Interaction
DONT:scale down      squeeze      make it aPDF Version   content into    500MB  of print      web-like     download magazi...
WhyHTML 5is the perfect design tool
HTML      new elements improve             content structure     CSS3    new style properties make             PhotoShop o...
<article>                  <h1>                <video><blockquote>               <section>
@font-face             transform              gradients              box-shadow              rgba              border-radi...
SwipeTable of content           Interactive                   Elements
>            >    >   >
- >Wireframe to HTML5  getting over the Adobe Workflow
Helpersbecause no one is perfect
Typography
www.kernjs.com
www.google.com              /webfonts
www.typekit.co              m
Styles & Effects
www.layerstyles               .com
www.gradients.g               lrzad.com
www.tumultco.c                 om/hype/
Layout Grid
www.lessframew              ork.com
www.csswizardr              y.com/inuitcss/
But still, we were missing a realMagazine Grid
8 columns            images            reach the     nice   viewportreadable    bordertext with   gutter   pagination
<article>   <section>      < p class="grid x4">…</p>      < p class="grid x3">…</p>      < p class="grid x1">…</p>   </sec...
both orientations
MagazineGridCreate Great Magazine Layouts for the iPad
Pluginable   Lightweight   IE? Hell no!AReadable       iPhone
…and the best part is: it‘s      FREEDownload       grid .asidemag.com  today:                   CC-BY-SA
asidemag.com Download: asidemag.com/grid   Twitter: @asidemagazine   Social: fb.com/asidemag
Design ♥ HTML5 – The Future of Mobile Editorial Design
Design ♥ HTML5 – The Future of Mobile Editorial Design
Design ♥ HTML5 – The Future of Mobile Editorial Design
Upcoming SlideShare
Loading in …5
×

Design ♥ HTML5 – The Future of Mobile Editorial Design

11,370 views

Published on

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

Published in: Design, Technology

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 zine1s 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 youbeautify this?“
  9. Design = /Aesthetics
  10. Design is aboutSolutions
  11. Problem:How do I get peopleto read this text?
  12. Images
  13. Structu re
  14. Simplification
  15. Visualization
  16. Emotion
  17. vs.
  18. iPad Mags
  19. 20 x 30cm15 x 20cm 300 dpi 131 dpi Size matters
  20. Interaction
  21. DONT:scale down squeeze make it aPDF Version content into 500MB of print web-like download magazine template monster
  22. WhyHTML 5is the perfect design tool
  23. HTML new elements improve content structure CSS3 new style properties make PhotoShop obsoleteJavaScript adds an interactivity layer
  24. <article> <h1> <video><blockquote> <section>
  25. @font-face transform gradients box-shadow rgba border-radius …
  26. SwipeTable of content Interactive Elements
  27. > > > >
  28. - >Wireframe to HTML5 getting over the Adobe Workflow
  29. Helpersbecause 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 realMagazine Grid
  42. 8 columns images reach the nice viewportreadable bordertext 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. MagazineGridCreate Great Magazine Layouts for the iPad
  46. Pluginable Lightweight IE? Hell no!AReadable iPhone
  47. …and the best part is: it‘s FREEDownload grid .asidemag.com today: CC-BY-SA
  48. asidemag.com Download: asidemag.com/grid Twitter: @asidemagazine Social: fb.com/asidemag

×