One Size Fits All - Responsive Webdesign

Vortrag vom neuland Fachtag 2014
RWD vs. Mobile Sites, E-Commerce, Atomic Design
Michael Geers (@naltatis)
Marco Pantaleo (@peeofive)

Transcript

1. onE size FITS AlL? Ein Shop für alle Fälle Michael Geers (@naltatis) Marco Pantaleo (@peeofive)
2. optimiert für 800 x 600
3. DAS WEB FRüher optimiert für 800 x 600
4. optimiert für 1024 x 768
5. optimiert für 240 x 320
6. diE letzTEn 7 jahRe 2007 2009 2008 2010 2011 2012 2013 2014
7. mobile shop m.shop.de
8. apP SToRe 2007 2009 2008 2010 2011 2012 2013 2014
9. i Am your customer
10. APp-doWnlOaDs im MoNAT 0 apps 1 app 2 apps 3 apps 4 apps 5-7 apps 8+ apps 2,4 % 4,8 % 3,7 % 6,2 % 8,9 % 8,4 % 65,5 % . Source: comScore MobiLens, U.S., Age 18+, 3 Month Average Ending June 2014
11. ipad 2007 2009 2008 2010 2011 2012 2013 2014
12. TABlet shoPS & APps
13. iPad & iPhone Screens Datenquelle: opensignal.com
14. Android Screens Datenquelle: opensignal.com
15. browser-WEiche m.example.de t.example.de www.example.de
16. browser-WEiche m.example.de t.example.de www.example.de User Agent Matching Heuristik
17. browser-WEiche m.example.de t.example.de www.example.de User Agent Matching Heuristik riesige Device Database
18. Fallback
20. Mobile version = Lite version
21. performancE Geschwindigkeit für Mobile Seiten ist kritisch! flickr.com/photos/gfreeman23
22. Smartphones zu 84% zu Hause genutzt flickr.com/photos/zenobia_joy
23. flickr.com/photos/39908901@N06
24. Browser im Auto
25. Browser im Auto
26. Responsive Design @rwd ! 28. Okt 2013 There’s still no relationship between screen size and bandwidth. Instead, we should ensure our work’s as light as possible *for everyone*.
27. Ethan MArcoTte
30. MEdia queRiEs
31. Tablet phone Desktop 320px 768px 1280px 767px 979px BrEAkpoinTs
32. FlExibles grid
33. 980 x 100 px 980 x 50 px 760 x 250 px 200 x 500 px 240 x 230 px 240 x 230 px 240 x 230 px
34. width: 100 % width: 100 % width: 77,551 % width: 20,408 % width: 24,489 % width: 24,489 % width: 24,489 %
35. width: 100 % width: 100 % width: 77,551 % width: 20,408 % width: 24,489 % width: 24,489 % width: 24,489 %
36. FLExiBle ImaGES
38. Responsive Web Design
39. Responsive Web Design ConTent Strategy Device APIs Responsive IMages MoBile first Testing FeaTURe Detection BREakpoints FeaTURe Detection gRIDS Media Queries Performance HTML5 Styleguide Style Tiles Usability Image Server
40. Testgeräte Device Lab
42. Welche Breakpoints?
43. Tablet phone Desktop 320px 768px 1280px 767px 979px BrEAkpoinTs
44. 0 200 400 600 800 1000 1200 1400 1600 1800 2000 2200 2400
45. 0 200 400 600 800 1000 1200 1400 1600 1800 2000 2200 2400 XS 200px M 800px S 500px L 1100px XL 1300px XXL 1500px
46. 6 -facher Grafik & Test Aufwand
49. Denken in Komponenten Überschrift Fließtext Produktbild Button Lade-Animation Tabs Teaser Bühne Preisdarstellung Accordeon Trennlinie Unterüberschrift Empfehlungen
50. Brad Frost
51. Atom Molekül Organismus Template Seiten ATOmIC DESiGN
52. ATomE 4er Stein 3er Stein 4er Schräge 2er Schräge Doppel- schräge
53. MolEküle Wand Dach
54. OrganiSmus Haus
55. TEmplates
56. SEiTen flickr.com/photos/cimddwc/
57. Web Beispiel Empfehlungsstreifen [Organismus]
58. Web Beispiel Button rechts [Atom] Button links [Atom] Empfehlungsstreifen [Organismus]
59. Web Beispiel Sub Headline [Atom] Button rechts [Atom] Button links [Atom] Empfehlungsstreifen [Organismus]
60. Web Beispiel Artikelkachel [Molekül] Sub Headline [Atom] Button rechts [Atom] Button links [Atom] Empfehlungsstreifen [Organismus]
61. Artikelkachel [Molekül] Preis-Block [Atom] Artikelbild [Atom] Produktname [Atom]
62. Web Beispiel verhalten
63. Neue Preis-Darstellung Preis-Block [Atom]
64. Pattern Library Sammlung aller Atome, Moleküle & Organismen
65. Entkopplung der Entw icklung Überschrift Tabs Preisdarstellung Accordeon UX Konzept
66. Entkopplung der Entw icklung Überschrift Tabs Preisdarstellung Accordeon UX Konzept UX Konzept Frontend
67. Entkopplung der Entw icklung Überschrift Tabs Preisdarstellung Accordeon UX Konzept UX Konzept Frontend UX Konzept Frontend Gestaltung
68. Entkopplung der Entw icklung Überschrift Tabs Preisdarstellung Accordeon UX Konzept UX Konzept Frontend UX Konzept Frontend Gestaltung UX Konzept Frontend Gestaltung Testing
69. Entkopplung der Entw icklung Überschrift Tabs Preisdarstellung Accordeon UX Konzept UX Konzept Frontend UX Konzept Frontend Gestaltung UX Konzept Frontend Gestaltung Testing Frontend Gestaltung Testing
70. Entkopplung der Entw icklung Überschrift Tabs Preisdarstellung Accordeon UX Konzept UX Konzept Frontend UX Konzept Frontend Gestaltung UX Konzept Frontend Gestaltung Testing Frontend Gestaltung Testing Gestaltung Testing
71. Entkopplung der Entw icklung Überschrift Tabs Preisdarstellung Accordeon UX Konzept UX Konzept Frontend UX Konzept Frontend Gestaltung UX Konzept Frontend Gestaltung Testing Frontend Gestaltung Testing Gestaltung Testing Testing
72. StylE TiLes styletil.es
73. Suchfeld [Molekül] Design Prozess
74. Suchfeld [Molekül] Design Prozess
75. Suchfeld [Molekül] M Design Prozess
76. Suchfeld [Molekül] M Design Prozess
77. Grid Systeme
78. W iREfrAmes S M L
79. empfiehlt Responsive Web Design developers.google.com
80. 0 25 50 75 100 Mobile Tablet Desktop +10,0% +73,9% +93,6% +28,4% +26,9% +28,1% Konversion Besuchsdauer RWD W in! April bis August 2014 im Vergleich zum Vorjahr
81. Desktop 49 Mobile 50 E-CoMmercE TRAFfIc shopify.com
82. Be Future Friendly bradfrostweb.com
83. Steve Ballmer Microsoft CEO Interview nach Vorstellung des iPhones
84. Danke