responsive web design – best practice approach

Responsive  Webdesign  –  Best  Practice  Approach

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

Über  let’s  dev

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

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

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

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

let’s  dev  GmbH  &  Co.  KG  |  Alter  Schlachthof  23c  |  76131  Karlsruhe  |  contact@letsdev.de  |  http://www.letsdev.de

Our  Services

�8

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxx

xxx

xxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxx

xxx

xxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxx

xxx

xxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxx

xxx

xxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxx

xxx

xxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxx

xxx

xxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxx

xxx

xxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxx

xxx

xxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxx

xxx

xxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxx

xxx

xxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxx

xxx

xxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxx

xxx

xxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxx

xxx

xxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxx

xxx

xxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxx

xxx

xxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxx

xxx

xxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxx

xxx

xxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxx

xxx

xxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxx

xxx

xxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxx

xxx

xxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxx

xxx

xxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxx

xxx

xxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxx

xxx

xxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxx

xxx

xxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxx

xxx

xxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxx

xxx

xxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxx

xxx

xxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxx

xxx

xxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxx

xxx

xxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxx

xxx

xxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxx

xxx

xxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxx

xxx

xxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxx

xxx

xxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxx

xxx

xxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxx

xxx

xxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxx

xxx

xxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxx

xxx

xxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxx

xxx

xxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxx

xxx

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.

Responsive  WebdesignHintergründe  &  Statistiken

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

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

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/  

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 -­‐ 74Smartphone  (netto)   -­‐ 56      iPhone 12 22      anderes  Smartphone   21 42      „normales“  Handy   62 66Spielekonsole 38 35MP3-­‐Player 47 42Fernseher 97 96Tablet  PC  (netto)   8 19      iPad 4 11      anderer  Tablet  PC   4 9E-­‐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

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

let’s  dev  GmbH  &  Co.  KG  |  Alter  Schlachthof  23c  |  76131  Karlsruhe  |  contact@letsdev.de  |  http://www.letsdev.de

Responsive  Design�15

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

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

Responsive  WebdesignVon  der  Konzeption  zur  Realisierung

let’s  dev  GmbH  &  Co.  KG  |  Alter  Schlachthof  23c  |  76131  Karlsruhe  |  contact@letsdev.de  |  http://www.letsdev.de

Responsive  Webdesign  -­‐  wie?

�19

Konzeptionell Technisch

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

Responsive  WebdesignKonzeptionell

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

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

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

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%

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

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)

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!

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

let’s  dev  GmbH  &  Co.  KG  |  Alter  Schlachthof  23c  |  76131  Karlsruhe  |  contact@letsdev.de  |  http://www.letsdev.de

Screen  Resolutions�30

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

let’s  dev  GmbH  &  Co.  KG  |  Alter  Schlachthof  23c  |  76131  Karlsruhe  |  contact@letsdev.de  |  http://www.letsdev.de

Konzeption  &  Wireframes�32

let’s  dev  GmbH  &  Co.  KG  |  Alter  Schlachthof  23c  |  76131  Karlsruhe  |  contact@letsdev.de  |  http://www.letsdev.de

Images  -­‐  Skalierung  der  Größe

�33

let’s  dev  GmbH  &  Co.  KG  |  Alter  Schlachthof  23c  |  76131  Karlsruhe  |  contact@letsdev.de  |  http://www.letsdev.de

Images  -­‐  Skalierung  des  Bildausschnittes  

�34

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

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

let’s  dev  GmbH  &  Co.  KG  |  Alter  Schlachthof  23c  |  76131  Karlsruhe  |  contact@letsdev.de  |  http://www.letsdev.de

User  Interface  Design�37

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  

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/  

Responsive  WebdesignTechnische  Aspekte

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

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

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

-­‐ -­‐

-­‐

-­‐-­‐

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

jQueryDojo

Ext  JS

QooXDoo

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

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

let’s  dev  GmbH  &  Co.  KG  |  Alter  Schlachthof  23c  |  76131  Karlsruhe  |  contact@letsdev.de  |  http://www.letsdev.de

HTML  Grundgerüst

�47

let’s  dev  GmbH  &  Co.  KG  |  Alter  Schlachthof  23c  |  76131  Karlsruhe  |  contact@letsdev.de  |  http://www.letsdev.de

Media  Queries�48

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  */  }

let’s  dev  GmbH  &  Co.  KG  |  Alter  Schlachthof  23c  |  76131  Karlsruhe  |  contact@letsdev.de  |  http://www.letsdev.de

Analyse  der  Download  Zeiten

�50

Analyse

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

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

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

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

let’s  dev  GmbH  &  Co.  KG  |  Alter  Schlachthof  23c  |  76131  Karlsruhe  |  contact@letsdev.de  |  http://www.letsdev.de

Live  Demo

�55

Responsive  WebdesignZusammenfassung

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

Vielen  Dank!

Alter  Schlachthof  23c  ·∙  76131  Karlsruhe  ·∙  +49  721  78  80  27  30    contact@letsdev.de  ·∙  http://www.letsdev.de