responsive web design – best practice approach
DESCRIPTION
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.TRANSCRIPT
Responsive Webdesign – Best Practice Approach
let’s dev GmbH & Co. KG | Alter Schlachthof 23c | 76131 Karlsruhe | [email protected] | 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 | [email protected] | 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 | [email protected] | http://www.letsdev.de
Über uns
• Philipp Mürder, Bsc. Frontend Developer
�5
let’s dev GmbH & Co. KG | Alter Schlachthof 23c | 76131 Karlsruhe | [email protected] | 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 | [email protected] | 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 | [email protected] | 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 | [email protected] | 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 | [email protected] | 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 | [email protected] | 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 | [email protected] | 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 | [email protected] | 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 | [email protected] | http://www.letsdev.de
Responsive Design�15
let’s dev GmbH & Co. KG | Alter Schlachthof 23c | 76131 Karlsruhe | [email protected] | 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 | [email protected] | 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 | [email protected] | http://www.letsdev.de
Responsive Webdesign -‐ wie?
�19
Konzeptionell Technisch
let’s dev GmbH & Co. KG | Alter Schlachthof 23c | 76131 Karlsruhe | [email protected] | 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 | [email protected] | 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 | [email protected] | http://www.letsdev.de
Verschiedene Layout Typen
• Fixed
• Fluid
• Adaptive
• Responsive
�23
let’s dev GmbH & Co. KG | Alter Schlachthof 23c | 76131 Karlsruhe | [email protected] | http://www.letsdev.de
Fixed�24
960px
600px
330px
330px
30px
30px
30px
let’s dev GmbH & Co. KG | Alter Schlachthof 23c | 76131 Karlsruhe | [email protected] | http://www.letsdev.de
Fluid�25
100%
80%
15%
15%
5%
5%
5%
let’s dev GmbH & Co. KG | Alter Schlachthof 23c | 76131 Karlsruhe | [email protected] | 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 | [email protected] | 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 | [email protected] | 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 | [email protected] | 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 | [email protected] | http://www.letsdev.de
Screen Resolutions�30
let’s dev GmbH & Co. KG | Alter Schlachthof 23c | 76131 Karlsruhe | [email protected] | 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 | [email protected] | http://www.letsdev.de
Konzeption & Wireframes�32
let’s dev GmbH & Co. KG | Alter Schlachthof 23c | 76131 Karlsruhe | [email protected] | http://www.letsdev.de
Images -‐ Skalierung der Größe
�33
let’s dev GmbH & Co. KG | Alter Schlachthof 23c | 76131 Karlsruhe | [email protected] | http://www.letsdev.de
Images -‐ Skalierung des Bildausschnittes
�34
let’s dev GmbH & Co. KG | Alter Schlachthof 23c | 76131 Karlsruhe | [email protected] | 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 | [email protected] | 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 | [email protected] | http://www.letsdev.de
User Interface Design�37
let’s dev GmbH & Co. KG | Alter Schlachthof 23c | 76131 Karlsruhe | [email protected] | 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 | [email protected] | 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 | [email protected] | 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 | [email protected] | 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 | [email protected] | 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 | [email protected] | 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 | [email protected] | 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 | [email protected] | 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 | [email protected] | http://www.letsdev.de
HTML Grundgerüst
�47
let’s dev GmbH & Co. KG | Alter Schlachthof 23c | 76131 Karlsruhe | [email protected] | http://www.letsdev.de
Media Queries�48
let’s dev GmbH & Co. KG | Alter Schlachthof 23c | 76131 Karlsruhe | [email protected] | 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 | [email protected] | http://www.letsdev.de
Analyse der Download Zeiten
�50
Analyse
let’s dev GmbH & Co. KG | Alter Schlachthof 23c | 76131 Karlsruhe | [email protected] | http://www.letsdev.de
Analyse der Websitengröße &
Anzahl der Requests�51
Analyse
let’s dev GmbH & Co. KG | Alter Schlachthof 23c | 76131 Karlsruhe | [email protected] | 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 | [email protected] | 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 | [email protected] | http://www.letsdev.de
Test der verschiedenen Devices im
Emulation Mode�54
let’s dev GmbH & Co. KG | Alter Schlachthof 23c | 76131 Karlsruhe | [email protected] | http://www.letsdev.de
Live Demo
�55
Responsive WebdesignZusammenfassung
let’s dev GmbH & Co. KG | Alter Schlachthof 23c | 76131 Karlsruhe | [email protected] | 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 [email protected] ·∙ http://www.letsdev.de