Was nicht passt wird responsive gemacht - Extended Edition

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

Transcript

1. Christoph Reinartz EXTENDED VERSION
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. May the force be with you Auf jedes Device Dein Design passen muss! 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 http://clagnut.com/sandbox/imagetest/ img, embed, object, video { max-width: 100%; } Background-Images: CSS3, MediaQueries
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 https://www.flickr.com/photos/the-magic-tuba-pixie/5806342006 Prototype
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. http://bradfrostweb.com/ blog/post/beyond-squishy- the-principles-of-adaptive- design/ Responsible RWD Der User
77. Ich habe fertig! ! http://www.levien.com/type/myfonts/inconsolata.html
78. Danke! Prosit!
79. Vielen Dank an Senator Film Verleih