Präsentation über Responsive Web Design anlässlich der ONE Konferenz 2012

1. Responsive Web Design
ein Überblick
Michael Schmid
Head Technology
michael@amazeelabs.com
@schnitzel

2. Was ist
Responsive Web Design?

3. der Start

4. der Start
21. September 2004

5. der Start
21. September 2004
Cameron Adams kommt mit
einer Idee für
„Resolution dependent
layout“

6. http://www.themaninblue.com/experiment/ResolutionLayout/

7. der Start

8. der Start
• basierend auf Javascript

9. der Start
• basierend auf Javascript
• nicht sehr schnell

10. der Start
• basierend auf Javascript
• nicht sehr schnell
• wenig Aufmerksamkeit

11. zweiter Anlauf
25. Mai 2010
Ethan Marcotte schlägt
MediaQueries für
Responsive Seiten vor
http://www.alistapart.com/articles/responsive-web-design/

12. Media Queries CSS 2.1
<link rel="stylesheet" type="text/css"
href="core.css" media="screen" />
<link rel="stylesheet" type="text/css"
href="print.css" media="print" />

13. Media Queries CSS 3
<link rel="stylesheet" type="text/css"
media="screen and (max-width: 480px)"
href="mobile.css" />

15. zweiter Anlauf

16. zweiter Anlauf
• basierend auf CSS

17. zweiter Anlauf
• basierend auf CSS
• sehr schnell

18. zweiter Anlauf
• basierend auf CSS
• sehr schnell
• einfach

19. zweiter Anlauf
• basierend auf CSS
• sehr schnell
• einfach
• grosse Aufmerksamkeit

20. zweiter Anlauf
• basierend auf CSS
• sehr schnell
• einfach
• grosse Aufmerksamkeit
• kein IE 6-8 Support

21. zweiter Anlauf
• basierend auf CSS
• sehr schnell
• einfach
• grosse Aufmerksamkeit
• kein IE 6-8 Support
• polyfill „css3-mediaqueries.js“

22. Kombinationen

23. Kombinationen
/* Wide Layout */
all and (min-width: 1220px)

24. Kombinationen
/* Wide Layout */
all and (min-width: 1220px)
/* Normal Layout */
all and (min-width: 980px) and
(max-width: 1019px)

25. Kombinationen
/* Wide Layout */
all and (min-width: 1220px)
/* Normal Layout */
all and (min-width: 980px) and
(max-width: 1019px)
/* Narrow Layout (Tablet) */
all and (min-width: 740px) and
(max-width: 979px)

26. Responsive vs. Adaptive

27. Responsive vs. Adaptive
• Responsive
fluid layout

28. Responsive vs. Adaptive
• Responsive
fluid layout
• Adaptive
mehrere fixe layouts

29. Responsive vs. Adaptive
• Responsive
fluid layout
• Adaptive
mehrere fixe layouts
• Hybrid
Kombination von beiden

30. „Responsive“
http://www.smashingmagazine.com

31. „Responsive“
http://www.smashingmagazine.com

32. „Responsive“
http://www.smashingmagazine.com

33. „Responsive“
http://www.smashingmagazine.com

34. „Hybrid“
http://www.amazeelabs.com

35. „Hybrid“
http://www.amazeelabs.com

36. „Hybrid“
http://www.amazeelabs.com

37. „Hybrid“
http://www.amazeelabs.com

38. Projektmanagement mit
Responsive Web Design

39. Responsive Web Design
beeinflusst:

40. Responsive Web Design
beeinflusst:
• Designer

41. Responsive Web Design
beeinflusst:
• Designer
• Themer

42. Responsive Web Design
beeinflusst:
• Designer
• Themer
• Projektleiter

43. Responsive Web Design
beeinflusst:
• Designer
• Themer
• Projektleiter
• Tester

44. Responsive Web Design
beeinflusst:
• Designer
• Themer
• Projektleiter
• Tester
• Kunden

45. Breakpoints

46. Breakpoints
• Was ist der wichtiste Inhalt?

47. Breakpoints
• Was ist der wichtiste Inhalt?
• Was können wir weglassen?

48. Breakpoints
• Was ist der wichtiste Inhalt?
• Was können wir weglassen?
• Wireframes, Papier, Whiteboard

49. Breakpoints
• Was ist der wichtiste Inhalt?
• Was können wir weglassen?
• Wireframes, Papier, Whiteboard
• Sub-Breakpoints?

51. Mobile First

52. Mobile First
• vom Kleinsten zum Grössten

53. Mobile First
• vom Kleinsten zum Grössten
• Content First

54. Mobile First
• vom Kleinsten zum Grössten
• Content First
• schwierig mit Kunden

55. the grid is your friend

56. the grid is your friend
• mit Grids designen

57. the grid is your friend
• mit Grids designen
• 1 Tag mit Grids verbringen
spart 1 Woche mit Theming

58. the grid is your friend
• mit Grids designen
• 1 Tag mit Grids verbringen
spart 1 Woche mit Theming
• Gridberechnung
http://grids.heroku.com

59. http://www.fotobout.com

60. http://www.fotobout.com

61. http://www.fotobout.com

62. http://www.fotobout.com

63. http://www.fotobout.com

64. http://www.fotobout.com

65. http://www.fotobout.com

73. Designe nicht jede Seite

74. Designe nicht jede Seite
• Nur die wichtigsten Seiten

75. Designe nicht jede Seite
• Nur die wichtigsten Seiten
• Mehr Responsive Layouts

76. Designe nicht jede Seite
• Nur die wichtigsten Seiten
• Mehr Responsive Layouts

77. Designe nicht jede Seite
• Nur die wichtigsten Seiten
• Mehr Responsive Layouts
• Designe spezielle Dinge:

78. Designe nicht jede Seite
• Nur die wichtigsten Seiten
• Mehr Responsive Layouts
• Designe spezielle Dinge:
• grössere Touch Bereiche

83. Testen

84. Testen
• Browser

85. Testen
• Browser
• Responsinator.com

86. Testen
• Browser
• Responsinator.com

87. Testen
• Browser
• Responsinator.com
• Adobe Shadow

88. Testen
• Browser
• Responsinator.com
• Adobe Shadow
• Browserstack

89. Testen
• Browser
• Responsinator.com
• Adobe Shadow
• Browserstack

90. Testen
• Browser
• Responsinator.com
• Adobe Shadow
• Browserstack
• Xcode (iOS Simulator)

91. Testen
• Browser
• Responsinator.com
• Adobe Shadow
• Browserstack
• Xcode (iOS Simulator)
• Android Emulator

92. Responsive Images

93. Responsive Images
• Ungelöstes Problem

94. Responsive Images
• Ungelöstes Problem

95. Responsive Images
• Ungelöstes Problem
• Aktuell nur mit JavaScript lösbar

96. Responsive Images
• Ungelöstes Problem
• Aktuell nur mit JavaScript lösbar
• Mehrere Bilder für verschiedene
Layouts

97. Responsive Images
• Ungelöstes Problem
• Aktuell nur mit JavaScript lösbar
• Mehrere Bilder für verschiedene
Layouts

98. Responsive Images
• Ungelöstes Problem
• Aktuell nur mit JavaScript lösbar
• Mehrere Bilder für verschiedene
Layouts
• HighDPI Geräte wie iPhone 4S
brauchen grössere Auflösungen

99. Responsive
vs.
Native

100. Responsive vs. Native

101. Responsive vs. Native
Responsive

102. Responsive vs. Native
Responsive
• viel weniger Maintenance

103. Responsive vs. Native
Responsive
• viel weniger Maintenance
• HomeScreen Apps noch nicht
verbreitet

104. Responsive vs. Native
Responsive
• viel weniger Maintenance
• HomeScreen Apps noch nicht
verbreitet
• kein Hardware Zugang (Photo,
Kompass, etc.)

105. Responsive vs. Native
Responsive
• viel weniger Maintenance
• HomeScreen Apps noch nicht
verbreitet
• kein Hardware Zugang (Photo,
Kompass, etc.)
• Keine Push Notification

106. „brauche ich eine Mobile
fähige Webseite?“

107. vor nicht allzu langer Zeit:

108. vor nicht allzu langer Zeit:
„braucht jede Firma
ihre eigene Webseite?“

109. Zukunft?

110. Zukunft?
• Mobiler Traffic wächst rasant

111. Zukunft?
• Mobiler Traffic wächst rasant
• Faktor 26x bis 2015

112. Zukunft?
• Mobiler Traffic wächst rasant
• Faktor 26x bis 2015
• Aktuell 6500 verschiedene webfähige
Geräte

113. Zukunft von
Responsive Web Design

114. Zukunft

115. Zukunft
• Immer bessere Unterstützung von
Frameworks, CMS, etc.

116. Zukunft
• Immer bessere Unterstützung von
Frameworks, CMS, etc.
• Weitere Media Queries

117. Zukunft
• Immer bessere Unterstützung von
Frameworks, CMS, etc.
• Weitere Media Queries
• color

118. Zukunft
• Immer bessere Unterstützung von
Frameworks, CMS, etc.
• Weitere Media Queries
• color
• monochrome

119. Zukunft
• Immer bessere Unterstützung von
Frameworks, CMS, etc.
• Weitere Media Queries
• color
• monochrome
• scan (TV progressive | interlace)

120. Zukunft
• Immer bessere Unterstützung von
Frameworks, CMS, etc.
• Weitere Media Queries
• color
• monochrome
• scan (TV progressive | interlace)
• grid (textbasiert)

121. noch mehr Zukunft

122. noch mehr Zukunft
• Media Queries für

123. noch mehr Zukunft
• Media Queries für
• Batteriestand?

124. noch mehr Zukunft
• Media Queries für
• Batteriestand?
• Internet Geschwindigkeit?

125. noch mehr Zukunft
• Media Queries für
• Batteriestand?
• Internet Geschwindigkeit?
• Umgebungslicht?

126. dankeschön
Michael Schmid
Head Technology
michael@amazeelabs.com
@schnitzel