Upgrade to Pro — share decks privately, control downloads, hide ads and more …

One Size Fits All - Responsive Webdesign

457365e2e75c27f3e1c3a3744f5c5e4b?s=47 Michael Geers
September 18, 2014

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)

457365e2e75c27f3e1c3a3744f5c5e4b?s=128

Michael Geers

September 18, 2014
Tweet

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

  19. None
  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

  28. None
  29. None
  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

  37. None
  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

  41. None
  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

  47. None
  48. None
  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