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

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>

47. both orientations

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