Responsive Design ist momentan in aller Munde. Häufig wird es gleichgesetzt mit Design für mobile Geräte. Dabei geht es eigentlich darum Design zu schaffen, welches unabhängig vom verwendeten Endgerät ist. Endgeräte sind heutzutage neben klassischen Desktopsystemen und Laptops, zunehmend auch mobile Endgeräte wie Smartphones und Tablets, welche andere Eigenschaften und Voraussetzungen haben, die es in Bezug auf Design und Usability zu berücksichtigen gilt.
Der Vortrag zeigt auf, welche Chancen sich für Unternehmen ergeben, die mittels Responsive Design ihre Webangebote und Applikationen auf die gewandelte Nutzerschaft optimieren. Dabei werden sowohl technische Grundlagen vermittelt, aber auch fortgeschrittene Fragestellungen ("Mobile First" Entwicklungsansatz, Layout Patterns) behandelt.
7. Mobile Browsing
12%
10%
8%
6%
4%
2%
0%
2010 2011 20122009
Quelle: NetMarketShare - Statista
Okt 10,3%
Mobile Browsing knackt die 10% Marke
Weltweiter Anteil mobiler Endgeräte an der Internetnutzung
7
8. Mobile Browsing
0
5
10
15
20
Südamerika Europa Ozeanien Nordamerika Welt Afrika Asien
AnteilmobilerEndgeräte
Mai 2011 Mai 2012
Anteil mobiler Endgeräte an allen Seitenaufrufen im Mai 2011 und 2012
nach Kontinenten
Quelle: Statcounter - Statista
8
10. „Erst Strategie, dann CGI!“*
Evaluation:
Wer sind meine Nutzer?
Welche Devices nutzen sie?
In welchem Kontext nutzen sie mein Angebot?
Danach:
Auswahl der geeigneten Technologie
Mobile-Strategie
*Geflügeltes Wort aus den
Anfangszeiten des Web :-) 10
12. Responsive Design
Begriff von Ethan Marcotte erstmals
erwähnt in Artikel bei A List Apart
Seine Definition: Flexibles Raster,
Flexible Grafiken, Media Queries
12
15. Funktionsweise
Einbau von Media Queries
examples.css
Media Queries = Abfrage von Medieneigenschaften,
wie Display-Breite und Ausrichtung
@media only screen and (max-width: 1050px) {
/* ... */
}
@media only screen and (max-device-width: 480px) {
/* ... */
}
@media only screen and (orientation: landscape) {
/* ... */
}
15
16. Breakpoints
Breite, an dem das Design umbricht
Smartphone Portrait Mode< 480
High-End Smartphone, iPad< 1024
Restliche Geräte, Desktop, ...>= 1024
... 16
18. Frameworks
Helfen bei den ersten
Schritten und bei der
Fehlervermeidung
foundation.zurb.com atthewhartman.github.io/base twitter.github.io/bootstrap
18
19. Vorteile von RWD
+ Geringer Wartungsaufwand
+ Konsistente Markendarstellung
+ Keine Redirects
+ Zukunftssicher
+ Nur eine Technologie (HTML/CSS)
19
20. Nachteile von RWD
- Nur online nutzbar
- hoher Testaufwand
- Browserunterstützung
- Geräteoptimierung / Performance
20
- keine UI-Komponenten
21. Herausforderung
Geräte nach wie vor unterschiedlich!
Konsequenz:
Unterstützung unterschiedlicher Hardware und
Interaktionskonzepte
=> Nicht mit Responsive Design alleine abbildbar
21
22. RWD meets Adaptive
22
User Agent Sniffing / Feature Detection
Smartphone Tablet Desktop ...
Für Geräteklassen optimierte Versionen
ResponsiveResponsiveResponsiveResponsive
23. Entwicklungsprozess
Graceful
Degredation
Mobile
First
• Design für Desktop-Nutzer
• Aufwändiges Design schlanker machen
• Performance?
• Kompromisse
• Design für Mobile-Nutzer
• Flache/Simple Navigation
• Wenig Grafiken/Slideshows - Performance optimiert
• Kann auf Desktop aufgeblasen wirken
23
25. Fazit
Das Mobile Web ist da
Mit Responsive Design lassen sich schnell
Erfolge erzielen
Aber: Design für alternative Endgeräte
erfordert dedizierte Auseinandersetzung mit
den Charakteristika des jeweiligen Gerätes
Responsive Design erfordert ein Umdenken
im Entwicklungsprozess
Responsive Design ist der erste Schritt ins
Mobile Web 25