Mein Talk über Responsive Web Design bei den code.talks 2014 in Hamburg

1. CONFERENCE EDITION
Christoph Reinartz

2. @pistenprinz

3. Die Ausgangslage
(c) Senator Film Verleih

4. https://www.flickr.com/photos/glenscott/509720363

5. https://www.flickr.com/photos/lukew/10430507184/

6. Abweichung von Ideal Parametern

8. Mobiler traffic

9. Mobiler „clickout“ share

10. Der klassische Ansatz
• 2 Webseiten
• Desktop-Seite
• speziell auf mobile Geräte angepasste
mobile Seite
• Redirect auf m. * je nach User-Agent

11. Die mobile Site...

12. Die mobile Site...

14. Bullshit

15. Bullshit
Bullshit
Bullshit
Bullshit
Bullshit

16. Bullshit
Bullshit
Bullshit
Bullshit
Bullshit
Kein Bullshit

17. https://www.flickr.com/photos/janitors/10081142374

18. https://www.flickr.com/photos/scaar/8473324580

19. https://www.flickr.com/photos/shebalso/12341492965

20. Der responsive Ansatz
Eine Webseite, die sich automatisch dem
Device (Screen-Größe) anpasst

21. Beispiel: The Boston Globe
• Full „fluid“ responsive
• fluid innerhalb der Breakpoints
• funktioniert gut bei textlastigen Seiten
http://upstatement.com/blog/2012/01/how-to-approach-a-responsive-design/

23. Beispiel: trivago
• Sprungstufen-basiertes Layout
• adaptives Layout
• innerhalb der Breakpoints fixe Darstellung
• ohne kompletten Relaunch möglich

24. Desktop, iMac, Laptop

25. Landscape Tablet, Netbook

26. IPad, Tablets

27. Filterleiste einblendbar

28. Smartphone

29. Eine Definition
Responsive web design isn’t
your site working on phones and tablets.
It’s about your site working
everywhere.
https://twitter.com/ScottKellum

30. Ich würde sagen
dat passt!
(c) Senator Film Verleih

35. Alter Kontext
MODERNER BROWSER
FOKUSIERT
STATIONÄR
BEQUEM
SCHNELLE
VERBINDUNG
SCHNELLE
CPU
EFFIZIENTE EINGABE

36. 960
https://www.flickr.com/photos/tomwachtel/14015354802

37. 2007
https://www.flickr.com/photos/dahlstroms/6750733205

38. http://maddesigns.de/responsive-workflow/#11

39. Android Fragmentation
http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/

41. https://www.flickr.com/photos/adactio/5818096043

43. Zutaten nach dem Rezept
von Ethan Marcotte
!
• Relative Maße
• Ein flexibles gridbasiertes Layout
• Flexible Images und Medien
• Media Queries

44. EMs nutzen
• skalierbare Einheit
• 1em = aktuelle Fontgröße
• 2em = doppelte Fontgröße
body {font-size: 100%} body {font-size: 150%}
font-size: 12px Textbeispiel Textbeispiel
font-size: 1em Textbeispiel Textbeispiel

46. Sieh das mal relativ!
!
!
target / context = result
Erstellung relativer Maße: Fonts / Grids

47. Flexible Grids / Maße
960px
200px
target / context = result
(200 / 960) * 100 = 20,83%

48. Flexible / fluid media
Fluid Images: max-width
img,
embed,
object,
video {
max-width: 100%;
}
http://clagnut.com/sandbox/imagetest/

49. Flexible / fluid media

50. Flexible / fluid media

51. Flexible / fluid media

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

53. Media Queries
CSS3
Nicht nur Device Typen sondern
Devicegerätetypische Eigenschaften abfragen
!
<link rel="stylesheet" type="text/css"
href="style.css" media="screen and
(device-width: 480px)" />

54. Media Queries
Mehrere Eigenschaften in einer Query
!
@media screen and (max-device-width: 480px)
and (resolution: 192dpi) {
.column {
float: none;
}
}

55. Viewport
https://www.flickr.com/photos/mendhak/2252824493

56. Viewport-Metatag
<meta content="width=device-width,
initial-scale=1.0" name="viewport" />
Mit Viewport-Metatag
viewport-width = device-width
!
Ohne Viewport-Metatag
Default-Canvas ~980px
http://bkaprt.com/rwd/29

57. Klassischer Workflow
http://blog.meltmedia.com/2013/04/a-clients-prep-guide-for-a-responsive-
project/

58. Responsive Workflow
http://blog.meltmedia.com/2013/04/a-clients-prep-guide-for-a-responsive-
project/

59. 59
Prototype
https://www.flickr.com/photos/the-magic-tuba-pixie/5806342006

60. Prototype
A Prototype is worth
a thousand meetings

61. Aus der Praxis
(c) Senator Film Verleih

62. A/B Testing
https://www.flickr.com/photos/esparta/4482887906

63. Der User schlägt zurück

64. Der User schlägt zurückNicht mit
uns !

65. Der User schlägt zurück
https://www.flickr.com/photos/95284782@N06/8880500036

66. Jawohl,
dat passt!
(c) Senator Film Verleih

67. The Truth…
Your visitors don’t give
a shit if your site
is responsive.
http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/

71. So doch
nicht !!

72. Mobile Strategie
You May Be Losing Users
If Responsive Web Design Is Your Only
Mobile Strategy
http://www.smashingmagazine.com/2014/07/22/responsive-web-design-should-not-be-your-only-mobile-strategy/

73. Page Sizes
72% of responsive websites deliver the
same number of bytes regardless of
screen size, even on slow mobile network
connections.
http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/

74. Den Ferrari nicht schrotten!
http://www.mobile-zeitgeist.com/2013/08/07/warum-responsive-webdesign-
schrott-ist/

75. Verbesserungen
https://www.flickr.com/photos/91173606@N00/3448611327

76. Gleiche URL, aber andere Struktur
https://www.flickr.com/photos/chrisdlugosz/3402955869

77. Mobile First Ansatz wählen
https://www.flickr.com/photos/pixel_boogie/3451813645

78. Content First
https://www.flickr.com/photos/klara/4236116910

79. Performance messen / verbessern
https://www.flickr.com/photos/aussiegall/286709039

80. Auf echten Devices testen
https://www.flickr.com/photos/hysysk/4042285394

81. Conditional loading
https://www.flickr.com/photos/webethere/8708630443

82. Responsive Images

83. Responsible RWD

84. Responsible RWD
http://bradfrostweb.com/
blog/post/beyond-squishy-the-
principles-of-adaptive-design/

85. Ich habe fertig!
!

86. Danke! Prosit!
(c) Senator Film Verleih

87. Vielen Dank an Senator Film Verleih