![Page 1: Responsive Web Design – Best Practice Approach](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5568b86bd8b42a7c7d8b47fc/html5/thumbnails/1.jpg)
Responsive Webdesign – Best Practice Approach
![Page 2: Responsive Web Design – Best Practice Approach](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5568b86bd8b42a7c7d8b47fc/html5/thumbnails/2.jpg)
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
![Page 3: Responsive Web Design – Best Practice Approach](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5568b86bd8b42a7c7d8b47fc/html5/thumbnails/3.jpg)
Über let’s dev
![Page 4: Responsive Web Design – Best Practice Approach](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5568b86bd8b42a7c7d8b47fc/html5/thumbnails/4.jpg)
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
![Page 5: Responsive Web Design – Best Practice Approach](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5568b86bd8b42a7c7d8b47fc/html5/thumbnails/5.jpg)
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
![Page 6: Responsive Web Design – Best Practice Approach](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5568b86bd8b42a7c7d8b47fc/html5/thumbnails/6.jpg)
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
![Page 7: Responsive Web Design – Best Practice Approach](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5568b86bd8b42a7c7d8b47fc/html5/thumbnails/7.jpg)
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
![Page 8: Responsive Web Design – Best Practice Approach](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5568b86bd8b42a7c7d8b47fc/html5/thumbnails/8.jpg)
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.
![Page 9: Responsive Web Design – Best Practice Approach](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5568b86bd8b42a7c7d8b47fc/html5/thumbnails/9.jpg)
Responsive WebdesignHintergründe & Statistiken
![Page 10: Responsive Web Design – Best Practice Approach](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5568b86bd8b42a7c7d8b47fc/html5/thumbnails/10.jpg)
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
![Page 11: Responsive Web Design – Best Practice Approach](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5568b86bd8b42a7c7d8b47fc/html5/thumbnails/11.jpg)
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
![Page 12: Responsive Web Design – Best Practice Approach](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5568b86bd8b42a7c7d8b47fc/html5/thumbnails/12.jpg)
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/
![Page 13: Responsive Web Design – Best Practice Approach](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5568b86bd8b42a7c7d8b47fc/html5/thumbnails/13.jpg)
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
![Page 14: Responsive Web Design – Best Practice Approach](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5568b86bd8b42a7c7d8b47fc/html5/thumbnails/14.jpg)
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
![Page 15: Responsive Web Design – Best Practice Approach](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5568b86bd8b42a7c7d8b47fc/html5/thumbnails/15.jpg)
let’s dev GmbH & Co. KG | Alter Schlachthof 23c | 76131 Karlsruhe | [email protected] | http://www.letsdev.de
Responsive Design�15
![Page 16: Responsive Web Design – Best Practice Approach](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5568b86bd8b42a7c7d8b47fc/html5/thumbnails/16.jpg)
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
![Page 17: Responsive Web Design – Best Practice Approach](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5568b86bd8b42a7c7d8b47fc/html5/thumbnails/17.jpg)
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
![Page 18: Responsive Web Design – Best Practice Approach](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5568b86bd8b42a7c7d8b47fc/html5/thumbnails/18.jpg)
Responsive WebdesignVon der Konzeption zur Realisierung
![Page 19: Responsive Web Design – Best Practice Approach](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5568b86bd8b42a7c7d8b47fc/html5/thumbnails/19.jpg)
let’s dev GmbH & Co. KG | Alter Schlachthof 23c | 76131 Karlsruhe | [email protected] | http://www.letsdev.de
Responsive Webdesign -‐ wie?
�19
Konzeptionell Technisch
![Page 20: Responsive Web Design – Best Practice Approach](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5568b86bd8b42a7c7d8b47fc/html5/thumbnails/20.jpg)
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
![Page 21: Responsive Web Design – Best Practice Approach](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5568b86bd8b42a7c7d8b47fc/html5/thumbnails/21.jpg)
Responsive WebdesignKonzeptionell
![Page 22: Responsive Web Design – Best Practice Approach](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5568b86bd8b42a7c7d8b47fc/html5/thumbnails/22.jpg)
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
![Page 23: Responsive Web Design – Best Practice Approach](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5568b86bd8b42a7c7d8b47fc/html5/thumbnails/23.jpg)
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
![Page 24: Responsive Web Design – Best Practice Approach](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5568b86bd8b42a7c7d8b47fc/html5/thumbnails/24.jpg)
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
![Page 25: Responsive Web Design – Best Practice Approach](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5568b86bd8b42a7c7d8b47fc/html5/thumbnails/25.jpg)
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%
![Page 26: Responsive Web Design – Best Practice Approach](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5568b86bd8b42a7c7d8b47fc/html5/thumbnails/26.jpg)
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
![Page 27: Responsive Web Design – Best Practice Approach](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5568b86bd8b42a7c7d8b47fc/html5/thumbnails/27.jpg)
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)
![Page 28: Responsive Web Design – Best Practice Approach](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5568b86bd8b42a7c7d8b47fc/html5/thumbnails/28.jpg)
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!
![Page 29: Responsive Web Design – Best Practice Approach](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5568b86bd8b42a7c7d8b47fc/html5/thumbnails/29.jpg)
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
![Page 30: Responsive Web Design – Best Practice Approach](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5568b86bd8b42a7c7d8b47fc/html5/thumbnails/30.jpg)
let’s dev GmbH & Co. KG | Alter Schlachthof 23c | 76131 Karlsruhe | [email protected] | http://www.letsdev.de
Screen Resolutions�30
![Page 31: Responsive Web Design – Best Practice Approach](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5568b86bd8b42a7c7d8b47fc/html5/thumbnails/31.jpg)
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
![Page 32: Responsive Web Design – Best Practice Approach](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5568b86bd8b42a7c7d8b47fc/html5/thumbnails/32.jpg)
let’s dev GmbH & Co. KG | Alter Schlachthof 23c | 76131 Karlsruhe | [email protected] | http://www.letsdev.de
Konzeption & Wireframes�32
![Page 33: Responsive Web Design – Best Practice Approach](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5568b86bd8b42a7c7d8b47fc/html5/thumbnails/33.jpg)
let’s dev GmbH & Co. KG | Alter Schlachthof 23c | 76131 Karlsruhe | [email protected] | http://www.letsdev.de
Images -‐ Skalierung der Größe
�33
![Page 34: Responsive Web Design – Best Practice Approach](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5568b86bd8b42a7c7d8b47fc/html5/thumbnails/34.jpg)
let’s dev GmbH & Co. KG | Alter Schlachthof 23c | 76131 Karlsruhe | [email protected] | http://www.letsdev.de
Images -‐ Skalierung des Bildausschnittes
�34
![Page 35: Responsive Web Design – Best Practice Approach](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5568b86bd8b42a7c7d8b47fc/html5/thumbnails/35.jpg)
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
![Page 36: Responsive Web Design – Best Practice Approach](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5568b86bd8b42a7c7d8b47fc/html5/thumbnails/36.jpg)
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
![Page 37: Responsive Web Design – Best Practice Approach](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5568b86bd8b42a7c7d8b47fc/html5/thumbnails/37.jpg)
let’s dev GmbH & Co. KG | Alter Schlachthof 23c | 76131 Karlsruhe | [email protected] | http://www.letsdev.de
User Interface Design�37
![Page 38: Responsive Web Design – Best Practice Approach](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5568b86bd8b42a7c7d8b47fc/html5/thumbnails/38.jpg)
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
![Page 39: Responsive Web Design – Best Practice Approach](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5568b86bd8b42a7c7d8b47fc/html5/thumbnails/39.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/
![Page 40: Responsive Web Design – Best Practice Approach](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5568b86bd8b42a7c7d8b47fc/html5/thumbnails/40.jpg)
Responsive WebdesignTechnische Aspekte
![Page 41: Responsive Web Design – Best Practice Approach](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5568b86bd8b42a7c7d8b47fc/html5/thumbnails/41.jpg)
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
![Page 42: Responsive Web Design – Best Practice Approach](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5568b86bd8b42a7c7d8b47fc/html5/thumbnails/42.jpg)
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
![Page 43: Responsive Web Design – Best Practice Approach](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5568b86bd8b42a7c7d8b47fc/html5/thumbnails/43.jpg)
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
-‐ -‐
-‐
-‐-‐
![Page 44: Responsive Web Design – Best Practice Approach](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5568b86bd8b42a7c7d8b47fc/html5/thumbnails/44.jpg)
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
![Page 45: Responsive Web Design – Best Practice Approach](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5568b86bd8b42a7c7d8b47fc/html5/thumbnails/45.jpg)
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
![Page 46: Responsive Web Design – Best Practice Approach](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5568b86bd8b42a7c7d8b47fc/html5/thumbnails/46.jpg)
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
![Page 47: Responsive Web Design – Best Practice Approach](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5568b86bd8b42a7c7d8b47fc/html5/thumbnails/47.jpg)
let’s dev GmbH & Co. KG | Alter Schlachthof 23c | 76131 Karlsruhe | [email protected] | http://www.letsdev.de
HTML Grundgerüst
�47
![Page 48: Responsive Web Design – Best Practice Approach](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5568b86bd8b42a7c7d8b47fc/html5/thumbnails/48.jpg)
let’s dev GmbH & Co. KG | Alter Schlachthof 23c | 76131 Karlsruhe | [email protected] | http://www.letsdev.de
Media Queries�48
![Page 49: Responsive Web Design – Best Practice Approach](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5568b86bd8b42a7c7d8b47fc/html5/thumbnails/49.jpg)
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 */ }
![Page 50: Responsive Web Design – Best Practice Approach](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5568b86bd8b42a7c7d8b47fc/html5/thumbnails/50.jpg)
let’s dev GmbH & Co. KG | Alter Schlachthof 23c | 76131 Karlsruhe | [email protected] | http://www.letsdev.de
Analyse der Download Zeiten
�50
Analyse
![Page 51: Responsive Web Design – Best Practice Approach](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5568b86bd8b42a7c7d8b47fc/html5/thumbnails/51.jpg)
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
![Page 52: Responsive Web Design – Best Practice Approach](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5568b86bd8b42a7c7d8b47fc/html5/thumbnails/52.jpg)
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
![Page 53: Responsive Web Design – Best Practice Approach](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5568b86bd8b42a7c7d8b47fc/html5/thumbnails/53.jpg)
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
![Page 54: Responsive Web Design – Best Practice Approach](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5568b86bd8b42a7c7d8b47fc/html5/thumbnails/54.jpg)
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
![Page 55: Responsive Web Design – Best Practice Approach](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5568b86bd8b42a7c7d8b47fc/html5/thumbnails/55.jpg)
let’s dev GmbH & Co. KG | Alter Schlachthof 23c | 76131 Karlsruhe | [email protected] | http://www.letsdev.de
Live Demo
�55
![Page 56: Responsive Web Design – Best Practice Approach](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5568b86bd8b42a7c7d8b47fc/html5/thumbnails/56.jpg)
Responsive WebdesignZusammenfassung
![Page 57: Responsive Web Design – Best Practice Approach](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5568b86bd8b42a7c7d8b47fc/html5/thumbnails/57.jpg)
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
![Page 58: Responsive Web Design – Best Practice Approach](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5568b86bd8b42a7c7d8b47fc/html5/thumbnails/58.jpg)
Vielen Dank!
Alter Schlachthof 23c ·∙ 76131 Karlsruhe ·∙ +49 721 78 80 27 30 [email protected] ·∙ http://www.letsdev.de