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.

1. RESPONSIVE DESIGN
Status Quo - iico Berlin 2013 - Peter Grosskopf

2. Vorstellung
2
Peter Grosskopf (32)
Gründer
Entwickler/
Designer
Dozent Münster
Geschäftsführer Zweitag GmbH

3. 3
Motivation

4. 4

5. 5

6. 6

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

9. 9
required?Action

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

11. Technologiewahl
Je nach Zielsetzung und Strategie gibt
es verschiedene technologische Ansätze
mobile site responsive hybrid native ...
11

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

13. Beispiele http://rbmaradio.com
13

14. Beispiele http://mediaqueri.es*
*Inspirationen sammeln
14

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

17. Layout Patterns
17
Mostly Fluid Column Drop
Layout Shifter Off Canvas
http://www.lukew.com/ff/entry.asp?1514

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

24. Entwicklungsprozess
Darüber hinaus:
Entwickler = Designer Mut zum Prototyping
24

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

26. 26
Danke