Was nicht passt wird responsive gemacht - conference edition

the slides from my responsive presentation at code.talks 2014 in hamburg

Transcript

1. Christoph Reinartz CONFERENCE EDITION
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 http://clagnut.com/sandbox/imagetest/ img, embed, object, video { max-width: 100%; }
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 https://www.flickr.com/photos/the-magic-tuba-pixie/5806342006 Prototype
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ück Nicht 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. http://bradfrostweb.com/ blog/post/beyond-squishy- the-principles-of-adaptive- design/ Responsible RWD
85. Ich habe fertig! !
86. Danke! Prosit! (c) Senator Film Verleih
87. Vielen Dank an Senator Film Verleih