Responsive Web Design – Best Practice Approach

1,664 views

Published on

Der Thematik des Responsive Webdesigns wird derzeit eine erhöhte Aufmerksamkeit entgegengebracht. Das flexible Anpassen der Website auf unterschiedliche Displaygrößen steht dabei im Vordergrund. Um jedoch eine Website für verschiedene Auflösungen zu optimieren, bedarf es weit mehr als nur der reinen Skalierung oder adaptiven Anpassung. Ausgehend von den technischen Gegebenheiten und der dadurch bedingten visuellen Gestaltung müssen beispielsweise auch durchdachte Anpassungen am eigentlichen Content berücksichtigt werden. Abhängig von der jeweiligen Zielplattform und dem damit verbundenen Use Case gilt es, die jeweiligen Anforderungen professionell umzusetzen und eine ausgeprägte User Experience zu gewährleisten. Wichtige Stellhebel für eine Optimierung einer Website sind u. a. Performanz und Ladezeit, Berücksichtigung von gesten- und touchbasierten Interaktionen sowie spezielle Anpassungen für Small Devices.Im Vortrag wird daher zum einen gezielt auf die visuelle Gestaltung im Hinblick auf die jeweiligen Anwendungsfälle als auch auf relevante Kriterien für ein erfolgreiches, respsonsives Design eingegangen. Zum anderen werden technische Herausforderungen anhand eines Best Practice Approaches beispielhaft dargestellt und ein Leitfaden für die Umsetzung präsentiert.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Responsive Web Design – Best Practice Approach

  1. 1. Responsive  Webdesign  –  Best  Practice   Approach
  2. 2. let’s  dev  GmbH  &  Co.  KG  |  Alter  Schlachthof  23c  |  76131  Karlsruhe  |  contact@letsdev.de  |  http://www.letsdev.de Contents • Über  let’s  dev   • Responsive  Webdesign   • Hintergründe  &  Statistiken   • Von  der  Konzeption  zur  Realisierung   • Konzeptionelle  Vorgehensweise   • Technische  Realisierung   • Zusammenfassung 2
  3. 3. Über  let’s  dev
  4. 4. let’s  dev  GmbH  &  Co.  KG  |  Alter  Schlachthof  23c  |  76131  Karlsruhe  |  contact@letsdev.de  |  http://www.letsdev.de Über  uns • Dipl.-­‐Inf.(FH),  Karl-­‐J.  Wack,  MBE
 Founder,  Managing  Director 4
  5. 5. let’s  dev  GmbH  &  Co.  KG  |  Alter  Schlachthof  23c  |  76131  Karlsruhe  |  contact@letsdev.de  |  http://www.letsdev.de Über  uns • Philipp  Mürder,  Bsc.
 Frontend  Developer 5
  6. 6. let’s  dev  GmbH  &  Co.  KG  |  Alter  Schlachthof  23c  |  76131  Karlsruhe  |  contact@letsdev.de  |  http://www.letsdev.de Über  let’s  dev • Gegründet  2010   • Sitz  in  Karlsruhe   • Spezialisiert  auf  mobile  Enterprise   • Interdisziplinäres  Team  bestehend  aus  UX  Designern  und  Entwicklern 6
  7. 7. let’s  dev  GmbH  &  Co.  KG  |  Alter  Schlachthof  23c  |  76131  Karlsruhe  |  contact@letsdev.de  |  http://www.letsdev.de Services 7 Mobile  Development  native  &  cross  platform  (iOS,   Android,  Windows  Phone)   Focussed  on  B2B  App  development Backend  &  Web  Development   Connecting  mobile  devices  to  existing  or  new  Backend  Solutions,   implementing  Web  Applications User  Interface  Design  &  Development   Visual  Design,  Icon  Design  and  implementation  of  User  Interfaces
  8. 8. let’s  dev  GmbH  &  Co.  KG  |  Alter  Schlachthof  23c  |  76131  Karlsruhe  |  contact@letsdev.de  |  http://www.letsdev.de Our  Services 8 xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxx 2 3 4 5 1 Tablet  Publishing   The  new  way  of  providing  Digital  Content    to  your  customers. AV  Production   Professional  Production  of  high  quality  full  HD  Videos  of  mobile  Applications   including  visualization  of  touch  gestures. Consulting   We  give  you  competent  advice  during  the  conception,  development  and   distribution  phases  of  your  mobile  Application.
  9. 9. Responsive  Webdesign Hintergründe  &  Statistiken
  10. 10. let’s  dev  GmbH  &  Co.  KG  |  Alter  Schlachthof  23c  |  76131  Karlsruhe  |  contact@letsdev.de  |  http://www.letsdev.de Google  Trends  zu  
 Responsive  Design  &  Responsive  Webdesign 10 Responsive  Design Responsive  Webdesign
  11. 11. let’s  dev  GmbH  &  Co.  KG  |  Alter  Schlachthof  23c  |  76131  Karlsruhe  |  contact@letsdev.de  |  http://www.letsdev.de Fakten  zu  Responsive  Design • Steigende  Gerätevielfalt   • Unterschiedliche  Auflösungen   • Verkaufszahlen  von  Tablets  übertreffen   Desktop  PC’s   • Steigender  Internetkonsum  durch  mobile   Geräte 11
  12. 12. let’s  dev  GmbH  &  Co.  KG  |  Alter  Schlachthof  23c  |  76131  Karlsruhe  |  contact@letsdev.de  |  http://www.letsdev.de Mobile  Internetnutzung  Deutschland 12 Quelle:  http://de.statista.com/statistik/daten/studie/197383/umfrage/mobile-­‐internetnutzung-­‐ueber-­‐handy-­‐in-­‐deutschland/  
  13. 13. let’s  dev  GmbH  &  Co.  KG  |  Alter  Schlachthof  23c  |  76131  Karlsruhe  |  contact@letsdev.de  |  http://www.letsdev.de Geräteausstattung  der  Onlinehaushalte  in  2013   13 Geräteausstattung  der  Onlinehaushalte  2012  und  2013  in  % 2012 2013 Computer  bzw.  PC/Laptop  (netto)   97 98        Computer  bzw.  PC     -­‐ 76      Laptop -­‐ 74 Smartphone  (netto)   -­‐ 56      iPhone 12 22      anderes  Smartphone   21 42      „normales“  Handy   62 66 Spielekonsole 38 35 MP3-­‐Player 47 42 Fernseher 97 96 Tablet  PC  (netto)   8 19      iPad 4 11      anderer  Tablet  PC   4 9 E-­‐Book-­‐Reader 7   ! 11 Basis:  Deutschspr.  Onlinenutzer  ab  14  Jahren  (2013:  n=1  389,  2012:  n=1  366). Quelle:  http://www.ard-­‐zdf-­‐onlinestudie.de/fileadmin/Onlinestudie/PDF/Eimeren.pdf
  14. 14. let’s  dev  GmbH  &  Co.  KG  |  Alter  Schlachthof  23c  |  76131  Karlsruhe  |  contact@letsdev.de  |  http://www.letsdev.de Geräteausstattung  der  Onlinehaushalte  in  2013   14 Am  häufigsten  genutzte  Smartphone-­‐Apps  2013  in  % Instant  Messaging 37 Communitys/soziale  Netzwerke 27 Nachrichten/Aktuelles 26 Spiele-­‐Apps 14 Verkehr 13 Mail-­‐Funktion/E-­‐Mail   9 Fernsehen/Radio 6 Google  App 6 Sport 6 Browser/Explorer/Internetzugang 5 Shopping-­‐Apps/Preisvergleiche 5 Videoportale/-­‐funktionen   5 Nennungen  ab  5  %.   Basis:  Deutschspr.  Onlinenutzer  ab  14  Jahren  (n=1  389),    Teilgruppe  Besitzer  von   Smartphones  (n=776). Quelle:  http://www.ard-­‐zdf-­‐onlinestudie.de/fileadmin/Onlinestudie/PDF/Eimeren.pdf
  15. 15. let’s  dev  GmbH  &  Co.  KG  |  Alter  Schlachthof  23c  |  76131  Karlsruhe  |  contact@letsdev.de  |  http://www.letsdev.de Responsive  Design 15
  16. 16. let’s  dev  GmbH  &  Co.  KG  |  Alter  Schlachthof  23c  |  76131  Karlsruhe  |  contact@letsdev.de  |  http://www.letsdev.de Responsive  Design 16 http://www.metaltoad.com/sites/default/files/Responsive-­‐Widths_0.png
  17. 17. let’s  dev  GmbH  &  Co.  KG  |  Alter  Schlachthof  23c  |  76131  Karlsruhe  |  contact@letsdev.de  |  http://www.letsdev.de Vor-­‐  &  Nachteile 17 + Beschränkung auf das Wesentliche - Beschränkung auf das Wesentliche + Erweiterung der Zielgruppe - Ladezeiten + Plattformübergreifend - Aufwand zur Erstellung und Optimierung + Zentrale Contentpflege - Browserunterstützung + Kostenvorteil gegenüber mobilen Apps - Kein Zugriff auf gerätespezifische Funktionen
  18. 18. Responsive  Webdesign Von  der  Konzeption  zur  Realisierung
  19. 19. let’s  dev  GmbH  &  Co.  KG  |  Alter  Schlachthof  23c  |  76131  Karlsruhe  |  contact@letsdev.de  |  http://www.letsdev.de Responsive  Webdesign  -­‐  wie? 19 Konzeptionell Technisch
  20. 20. let’s  dev  GmbH  &  Co.  KG  |  Alter  Schlachthof  23c  |  76131  Karlsruhe  |  contact@letsdev.de  |  http://www.letsdev.de Responsive  Design  Prozess 20 Plan Wireframe Design Development Optimization Test
  21. 21. Responsive  Webdesign Konzeptionell
  22. 22. let’s  dev  GmbH  &  Co.  KG  |  Alter  Schlachthof  23c  |  76131  Karlsruhe  |  contact@letsdev.de  |  http://www.letsdev.de Schritte  zur  erfolgreichen  Konzeption  eines  responsiven  Designs 1. Layout  spezifizieren   2. Ziel  Content  definieren   3. Module  definieren   4. Wireframes  erstellen   5. Design   6. Styleguide  ableiten 22
  23. 23. let’s  dev  GmbH  &  Co.  KG  |  Alter  Schlachthof  23c  |  76131  Karlsruhe  |  contact@letsdev.de  |  http://www.letsdev.de Verschiedene  Layout  Typen • Fixed   • Fluid   • Adaptive   • Responsive 23
  24. 24. let’s  dev  GmbH  &  Co.  KG  |  Alter  Schlachthof  23c  |  76131  Karlsruhe  |  contact@letsdev.de  |  http://www.letsdev.de Fixed 24 960px 600px 330px 330px 30px 30px 30px
  25. 25. let’s  dev  GmbH  &  Co.  KG  |  Alter  Schlachthof  23c  |  76131  Karlsruhe  |  contact@letsdev.de  |  http://www.letsdev.de Fluid 25 100% 80% 15% 15% 5% 5% 5%
  26. 26. let’s  dev  GmbH  &  Co.  KG  |  Alter  Schlachthof  23c  |  76131  Karlsruhe  |  contact@letsdev.de  |  http://www.letsdev.de Adaptive 26 max-­‐width:
 320px 
 max-­‐width:  768px 
 max-­‐width:  960px fest  definierte  Stufen
  27. 27. let’s  dev  GmbH  &  Co.  KG  |  Alter  Schlachthof  23c  |  76131  Karlsruhe  |  contact@letsdev.de  |  http://www.letsdev.de Responsive 27 small medium large fließender,  stufenloser  Übergang  (flexible  Layout)
  28. 28. let’s  dev  GmbH  &  Co.  KG  |  Alter  Schlachthof  23c  |  76131  Karlsruhe  |  contact@letsdev.de  |  http://www.letsdev.de Konzeption 28 Smartphone  first! Tablet  first! Desktop  first! Content  first!
  29. 29. let’s  dev  GmbH  &  Co.  KG  |  Alter  Schlachthof  23c  |  76131  Karlsruhe  |  contact@letsdev.de  |  http://www.letsdev.de Ziel  Content  festlegen • Inhalte  priorisieren   • Zielplattform  beachten   • Nutzer  und  Anwendungsfall  im  Vordergrund 29
  30. 30. let’s  dev  GmbH  &  Co.  KG  |  Alter  Schlachthof  23c  |  76131  Karlsruhe  |  contact@letsdev.de  |  http://www.letsdev.de Screen  Resolutions 30
  31. 31. let’s  dev  GmbH  &  Co.  KG  |  Alter  Schlachthof  23c  |  76131  Karlsruhe  |  contact@letsdev.de  |  http://www.letsdev.de Module  definieren 31 Header Slideshow Ads Control  C Control  D Control  EControl  BControl  A
  32. 32. let’s  dev  GmbH  &  Co.  KG  |  Alter  Schlachthof  23c  |  76131  Karlsruhe  |  contact@letsdev.de  |  http://www.letsdev.de Konzeption  &  Wireframes 32
  33. 33. let’s  dev  GmbH  &  Co.  KG  |  Alter  Schlachthof  23c  |  76131  Karlsruhe  |  contact@letsdev.de  |  http://www.letsdev.de Images  -­‐  Skalierung  der  Größe 33
  34. 34. let’s  dev  GmbH  &  Co.  KG  |  Alter  Schlachthof  23c  |  76131  Karlsruhe  |  contact@letsdev.de  |  http://www.letsdev.de Images  -­‐  Skalierung  des  Bildausschnittes   34
  35. 35. let’s  dev  GmbH  &  Co.  KG  |  Alter  Schlachthof  23c  |  76131  Karlsruhe  |  contact@letsdev.de  |  http://www.letsdev.de Use  Icon  Fonts 35 http://www.spiderflyapps.com/wp-­‐content/uploads/2013/03/AndroidDevIconFont1.png
  36. 36. let’s  dev  GmbH  &  Co.  KG  |  Alter  Schlachthof  23c  |  76131  Karlsruhe  |  contact@letsdev.de  |  http://www.letsdev.de Images • Background  Image  vs.  img  Tag   • Ladezeiten  beachten     • Retina  /  non-­‐retina   • Adaptive  Images  durch  Media  Queries   • Browserunterstützung  beachten  (SVG  -­‐>  !IE8)   • SEO 36
  37. 37. let’s  dev  GmbH  &  Co.  KG  |  Alter  Schlachthof  23c  |  76131  Karlsruhe  |  contact@letsdev.de  |  http://www.letsdev.de User  Interface  Design 37
  38. 38. let’s  dev  GmbH  &  Co.  KG  |  Alter  Schlachthof  23c  |  76131  Karlsruhe  |  contact@letsdev.de  |  http://www.letsdev.de Style  Guide 38 Quelle:  http://blog.designaffairs.com/wp-­‐content/uploads/2011/03/styleguide_icon_book_01-­‐800x516.jpg  
  39. 39. let’s  dev  GmbH  &  Co.  KG  |  Alter  Schlachthof  23c  |  76131  Karlsruhe  |  contact@letsdev.de  |  http://www.letsdev.de Design  &  Code 39 Quelle:  http://www.adhamdannaway.com/  
  40. 40. Responsive  Webdesign Technische  Aspekte
  41. 41. let’s  dev  GmbH  &  Co.  KG  |  Alter  Schlachthof  23c  |  76131  Karlsruhe  |  contact@letsdev.de  |  http://www.letsdev.de Schritte  zur  erfolgreichen  Umsetzung  eines  responsiven  Designs 1. Responsive  Framework  auswählen   2. JS  Framework  auswählen   3. Komponentenbasierte  Umsetzung   4. HTML  Grundgerüst  aufsetzen   5. Media  Queries   6. Analyse  &  Optimierung   7. Test  &  Dokumentation 41
  42. 42. let’s  dev  GmbH  &  Co.  KG  |  Alter  Schlachthof  23c  |  76131  Karlsruhe  |  contact@letsdev.de  |  http://www.letsdev.de Responsive  Frameworks • Bootstrap   • Foundation   • HTML5  Boilerplate   • HTML  KickStart   • Skeleton 42
  43. 43. let’s  dev  GmbH  &  Co.  KG  |  Alter  Schlachthof  23c  |  76131  Karlsruhe  |  contact@letsdev.de  |  http://www.letsdev.de 43 Bootstrap Foundation HTML  Kickstart Skeleton HTML5   Boilerplate Fertige   Projektbasis Vorgefertigte   Komponenten Vorgefertigtes   Javascript Größe 358  KB 378  KB 699  KB   (266  KB) 28  KB 232  KB Responsive  Frameworks -­‐ -­‐ -­‐ -­‐-­‐
  44. 44. let’s  dev  GmbH  &  Co.  KG  |  Alter  Schlachthof  23c  |  76131  Karlsruhe  |  contact@letsdev.de  |  http://www.letsdev.de JS  Frameworks  auswählen 44 Prototype MooTools script.aculo.us jQuery Dojo Ext  JS QooXDoo
  45. 45. let’s  dev  GmbH  &  Co.  KG  |  Alter  Schlachthof  23c  |  76131  Karlsruhe  |  contact@letsdev.de  |  http://www.letsdev.de Komponentenbasierte  Umsetzung 45 HTML   JS  CSS Slider Form Navigation Lightbox Ads Table HTML   JS  CSS HTML   JS  CSS HTML   JS  CSS HTML   JS  CSS HTML   JS  CSS
  46. 46. let’s  dev  GmbH  &  Co.  KG  |  Alter  Schlachthof  23c  |  76131  Karlsruhe  |  contact@letsdev.de  |  http://www.letsdev.de Komponenten  basierte  Umsetzung  -­‐  CSS  modularisieren 46 Common  CSS FormSlider Navigation Lightbox Ads Table Desktop Tablet Smartphone Desktop Tablet Smartphone Desktop Tablet Smartphone Desktop Tablet Smartphone Desktop Tablet Smartphone Desktop Tablet Smartphone
  47. 47. let’s  dev  GmbH  &  Co.  KG  |  Alter  Schlachthof  23c  |  76131  Karlsruhe  |  contact@letsdev.de  |  http://www.letsdev.de HTML  Grundgerüst 47
  48. 48. let’s  dev  GmbH  &  Co.  KG  |  Alter  Schlachthof  23c  |  76131  Karlsruhe  |  contact@letsdev.de  |  http://www.letsdev.de Media  Queries 48
  49. 49. let’s  dev  GmbH  &  Co.  KG  |  Alter  Schlachthof  23c  |  76131  Karlsruhe  |  contact@letsdev.de  |  http://www.letsdev.de Media  Queries 49 width  /  height @media  (width:  60em)  {  /*  Breite  entspricht  genau  60em  */  }   @media  (min-­‐width:  50em)  {  /*  Breite  beträgt  mindestens  50em  */  }   @media  (max-­‐width:  70em)  {  /*  Breite  beträgt  höchstens  70em  */  } device-­‐width  /     device-­‐height   @media  (device-­‐width:  800px)  {  /*  Breite  entspricht  genau  800  Pixel  */  }   @media  (min-­‐device-­‐width:  800px)  {  /*  Breite  beträgt  mindestens  800px  */  }   @media  (max-­‐device-­‐width:  1024px)  {  /*  Breite  beträgt  höchstens  1024px  */  } orientation @media  (orientation:  portrait)  {  /*  Formate  für  hochformatige  Ausgabemedien  */  } aspect-­‐ratio  /     device-­‐aspect-­‐ratio @media  (aspect-­‐ratio:  4/3)  {  /*  Fall  1  */  }   @media  (min-­‐aspect-­‐ratio:  4/3)  {  /*  Fall  2  */  }   @media  (max-­‐aspect-­‐ratio:  4/3)  {  /*  Fall  3  */  } color @media  (color:  2)  {  /*  Einfaches  Farblayout  */  }   @media  (min-­‐color:  3)  {  /*  Komplexes  Farblayout  */  }   @media  (max-­‐color:  2)  {  /*  Einfaches  Farblayout  */  } color-­‐index @media  (color-­‐index:  16)  {  /*  genau  16  Farben  stehen  zur  Verfügung  */  }   @media  (min-­‐color-­‐index:  20)  {  /*  Mindestens  20  Farben  stehen  zur  Verfügung  */  }   @media  (max-­‐color-­‐index:  256)  {  /*  Höchstens  256  Farben  stehen  zur  Verfügung  */  } monochrome @media  (monochrome:  1)  {  /*  nur  schwarz  und  weiß  stehen  zur  Verfügung  */  }   @media  (min-­‐monochrome:  4)  {  /*  Mindestens  16  Graustufen  stehen  zur  Verfügung  */  }   @media  (max-­‐monochrome:  8)  {  /*  Höchstens  256  Graustufen  stehen  zur  Verfügung  */  } resolution @media  (resolution:  96dpi)  {  /*  Die  Auflösung  beträgt  96  Bildpunkte  pro  Zoll  */  }   @media  (min-­‐resolution:  200dpcm)  {  /*  Die  Auflösung  beträgt  mindestens  200  Punkte  pro  cm  */  }   @media  (max-­‐resolution:  300dpi)  {  /*  Die  Auflösung  beträgt  höchstens  300  Punkte  pro  Zoll scan @media  (scan:  progressive)  {  /*  Bildschirmlayout  */  } grid @media  (grid:  0)  {  /*  Zahlreiche  Schriftformatierungen  */  }
  50. 50. let’s  dev  GmbH  &  Co.  KG  |  Alter  Schlachthof  23c  |  76131  Karlsruhe  |  contact@letsdev.de  |  http://www.letsdev.de Analyse  der  Download  Zeiten 50 Analyse
  51. 51. let’s  dev  GmbH  &  Co.  KG  |  Alter  Schlachthof  23c  |  76131  Karlsruhe  |  contact@letsdev.de  |  http://www.letsdev.de Analyse  der  Websitengröße  &     Anzahl  der  Requests 51 Analyse
  52. 52. let’s  dev  GmbH  &  Co.  KG  |  Alter  Schlachthof  23c  |  76131  Karlsruhe  |  contact@letsdev.de  |  http://www.letsdev.de Optimierung • Images  in  verschiedenen  Auflösungen  und   geeigneten  Formaten   • Icon  Fonts  verwenden   • Anzahl  der  Requests  minimieren   • Minifying  JS  &  CSS   • Build  Tools  verwenden  (z.B.  Apache  Ant) 52
  53. 53. let’s  dev  GmbH  &  Co.  KG  |  Alter  Schlachthof  23c  |  76131  Karlsruhe  |  contact@letsdev.de  |  http://www.letsdev.de Test  &  Dokumentation • JUnit  Tests   • JSLint   • Selenium  Tests   • Emulator  Test   • Device  Tests   • HTML  Dokumentation  mit  Beispielseiten  für  die   definierten  Module 53
  54. 54. let’s  dev  GmbH  &  Co.  KG  |  Alter  Schlachthof  23c  |  76131  Karlsruhe  |  contact@letsdev.de  |  http://www.letsdev.de Test  der  verschiedenen  Devices  im     Emulation  Mode 54
  55. 55. let’s  dev  GmbH  &  Co.  KG  |  Alter  Schlachthof  23c  |  76131  Karlsruhe  |  contact@letsdev.de  |  http://www.letsdev.de Live  Demo 55
  56. 56. Responsive  Webdesign Zusammenfassung
  57. 57. let’s  dev  GmbH  &  Co.  KG  |  Alter  Schlachthof  23c  |  76131  Karlsruhe  |  contact@letsdev.de  |  http://www.letsdev.de Zusammenfassung • Der  Internetkonsum  bekräftigt  den  Bedarf  von  cross-­‐device  Unterstützung   • Responsive  Design  kann  eine  Mögliche  Lösung  sein     • Erfolgreiches  Responsive  Design  beginnt  in  der  Konzeption:   • Content  first  und  Use  Cases  mit  einbeziehen   • Grafiken  und  Images  möglichst  effizient  erstellen  (Icon  Fonts,  unterschiedliche  Größen,   retina  und  non-­‐retina)   • Modulbasierte  Konzeption   • Styleguide  und  Modulbeschreibung  erleichtern  die  Implementierung   • Erfolgreiches  Responsive  Design  bedarf  einer  effizienten  Entwicklung   • Frameworks  bieten  gute  Ausgangsgrundlage,  dennoch  „weniger  ist  manchmal  mehr“   • Modularisierung  steigert  Wartbarkeit  und  Wiederverwendung   • Die  Qualitätssicherung  ist  ein  Aufwandstreiber,  das  entsprechende  Tooling  kann   unterstützen 57
  58. 58. Vielen  Dank! Alter  Schlachthof  23c  ·∙  76131  Karlsruhe  ·∙  +49  721  78  80  27  30     contact@letsdev.de  ·∙  http://www.letsdev.de

×