die überarbeitete Version meiner Responsive Web Design Präsentation, vorgetragen auf dem Learners Meetup der Open Tech School Dortmund

1. EXTENDED VERSION
Christoph Reinartz

2. /* About me */
.me {
name: “Christoph Reinartz“;
link: “http://creinartz.de“;
twitter: “@pistenprinz“;
location: “Mönchengladbach“;
}
.job--trv {
company: “trivago GmbH“;
title: “Front-end Developer“;
from: “November 2012“;
responsibilities: “Coordination UI-Development“,
“Front-end/CSS architecture“;
}

3. Die Ausgangslage

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

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

6. Auf jedes
Device Dein
Design passen
muss!
May the force be with you
Alles klar!?
Auf all den Geräten
soll dat laufen?

7. Abweichung von Ideal Parametern

9. Mobiler traffic

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

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

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

13. Die mobile Site...

15. Bullshit

16. Bullshit
Bullshit
Bullshit
Bullshit
Bullshit

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

18. 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/

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

21. Desktop, iMac, Laptop

22. Landscape Tablet, Netbook

23. IPad, Tablets

24. Filterleiste einblendbar

25. Smartphone

26. 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

27. Ja guck ma hier! Dat
passt selbst auf der
Möhre da!

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

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

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

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

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

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

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

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

42. EMs nutzen
• skalierbare Einheit
• 1em = aktuelle Fontgröße
• 2em = doppelte Fontgröße

43. Flexible Grids / Maße
#page {
max-width: 61.75em; /* 988px / 16px = 61.75em */
}
h1 {
margin-left: 14.575%; /* 144px / 988px = 0.14575 */
width: 70.85%; /* 700px / 988px = 0.7085 */
}
!

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

46. 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" />

47. 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)" />

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

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

50. 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

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

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

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

54. Prototype
A Prototype is worth
a thousand meetings

55. Aus der Praxis

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

57. Der User schlägt zurück

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

59. 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/

64. 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/

65. 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/

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

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

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

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

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

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

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

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

74. Responsive Images

75. Responsible RWD

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

77. Ich habe fertig!
! http://www.levien.com/type/myfonts/inconsolata.html

78. Danke! Prosit!

79. Vielen Dank an Senator Film Verleih