Upload
peter-grosskopf
View
521
Download
0
Embed Size (px)
DESCRIPTION
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.
Citation preview
RESPONSIVE DESIGNStatus Quo - iico Berlin 2013 - Peter Grosskopf
Vorstellung
2
Peter Grosskopf (32)
Gründer Entwickler/Designer Dozent Münster
Geschäftsführer Zweitag GmbH
3
Motivation
4
5
6
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
Mobile Browsing
0
5
10
15
20
Südamerika Europa Ozeanien Nordamerika Welt Afrika Asien
Ante
il m
obile
r En
dger
äte
Mai 2011 Mai 2012
Anteil mobiler Endgeräte an allen Seitenaufrufen im Mai 2011 und 2012 nach Kontinenten
Quelle: Statcounter - Statista
8
9
required?Action
„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
Technologiewahl
Je nach Zielsetzung und Strategie gibt es verschiedene technologische Ansätze
mobile site responsive hybrid native ...
11
Responsive Design
Begriff von Ethan Marcotte erstmals erwähnt in Artikel bei A List Apart
Seine Definition: Flexibles Raster, Flexible Grafiken, Media Queries
12
Beispiele http://rbmaradio.com
13
Beispiele http://mediaqueri.es*
*Inspirationen sammeln
14
FunktionsweiseEinbau 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
Breakpoints
Breite, an dem das Design umbricht
Smartphone Portrait Mode< 480
High-End Smartphone, iPad< 1024
Restliche Geräte, Desktop, ...>= 1024...
16
Layout Patterns
17
Mostly Fluid Column Drop
Layout Shifter Off Canvas
http://www.lukew.com/ff/entry.asp?1514
Frameworks
Helfen bei den ersten Schritten und bei der
Fehlervermeidung
foundation.zurb.com atthewhartman.github.io/base twitter.github.io/bootstrap18
Vorteile von RWD+ Geringer Wartungsaufwand
+ Konsistente Markendarstellung
+ Keine Redirects
+ Zukunftssicher
+ Nur eine Technologie (HTML/CSS)19
Nachteile von RWD- Nur online nutzbar
- hoher Testaufwand
- Browserunterstützung
- Geräteoptimierung / Performance
20
- keine UI-Komponenten
HerausforderungGeräte nach wie vor unterschiedlich!
Konsequenz:Unterstützung unterschiedlicher Hardware und Interaktionskonzepte=> Nicht mit Responsive Design alleine abbildbar
21
RWD meets Adaptive
22
User Agent Sniffing / Feature Detection
Smartphone Tablet Desktop ...
Für Geräteklassen optimierte Versionen
ResponsiveResponsiveResponsiveResponsive
EntwicklungsprozessGraceful
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
Entwicklungsprozess
Darüber hinaus:
Entwickler = Designer Mut zum Prototyping
24
FazitDas 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
Danke