Sie sind auf Seite 1von 26

RESPONSIVE DESIGN

Status Quo - iico Berlin 2013 - Peter Grosskopf

Vorstellung
Peter Grosskopf (32) Geschftsfhrer Zweitag GmbH
Entwickler/ Designer

Grnder

Dozent

Mnster

Motivation

Mobile Browsing
Mobile Browsing knackt die 10% Marke Weltweiter Anteil mobiler Endgerte an der Internetnutzung 12% 10% 8% 6% 4% 2% 0% 2009 2010 2011 2012
7

Okt 10,3%

Quelle: NetMarketShare - Statista

Mobile Browsing
Anteil mobiler Endgerte an allen Seitenaufrufen im Mai 2011 und 2012 nach Kontinenten
20 Anteil mobiler Endgerte 15 10 5 0

Sdamerika

Europa

Ozeanien

Nordamerika

Welt

Afrika Mai 2011

Asien Mai 2012

Quelle: Statcounter - Statista


8

Action

required?

Mobile-Strategie
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
*Gegeltes Wort aus den Anfangszeiten des Web :-)
10

Technologiewahl
Je nach Zielsetzung und Strategie gibt es verschiedene technologische Anstze

mobile site

responsive

hybrid

native

...

11

Responsive Design
Begriff von Ethan Marcotte erstmals erwhnt in Artikel bei A List Apart Seine Denition: Flexibles Raster, Flexible Graken, Media Queries

12

Beispiele

http://rbmaradio.com

13

Beispiele

*Inspirationen sammeln

http://mediaqueri.es*

14

Funktionsweise
Einbau von Media Queries
Media Queries = Abfrage von Medieneigenschaften, wie Display-Breite und Ausrichtung
examples.css

@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 < 480 < 1024 >= 1024 ...
Smartphone Portrait Mode High-End Smartphone, iPad Restliche Gerte, Desktop, ...
16

Layout Patterns

Mostly Fluid

Column Drop

Layout Shifter

Off Canvas
http://www.lukew.com/ff/entry.asp?1514
17

Frameworks

Helfen bei den ersten Schritten und bei der Fehlervermeidung

foundation.zurb.com

atthewhartman.github.io/base

twitter.github.io/bootstrap

18

Vorteile von RWD


+ Geringer Wartungsaufwand + Konsistente Markendarstellung + Keine Redirects + Zukunftssicher + Nur eine Technologie (HTML/CSS)
19

Nachteile von RWD


- Nur online nutzbar - hoher Testaufwand - Browseruntersttzung - Gerteoptimierung / Performance - keine UI-Komponenten
20

Herausforderung
Gerte nach wie vor unterschiedlich!
Konsequenz: Untersttzung unterschiedlicher Hardware und Interaktionskonzepte => Nicht mit Responsive Design alleine abbildbar

21

RWD meets Adaptive


User Agent Snifng / Feature Detection
Fr Gerteklassen optimierte Versionen

Smartphone
Responsive

Tablet
Responsive

Desktop
Responsive

...
Responsive

22

Entwicklungsprozess
Graceful Degredation

Design fr Desktop-Nutzer Aufwndiges Design schlanker machen Performance? Kompromisse


Mobile First

Design fr Mobile-Nutzer Flache/Simple Navigation Wenig Graken/Slideshows - Performance optimiert Kann auf Desktop aufgeblasen wirken
23

Entwicklungsprozess
Darber hinaus:

Entwickler = Designer

Mut zum Prototyping

24

Fazit
Das Mobile Web ist da Mit Responsive Design lassen sich schnell Erfolge erzielen Aber: Design fr alternative Endgerte erfordert dedizierte Auseinandersetzung mit den Charakteristika des jeweiligen Gertes Responsive Design erfordert ein Umdenken im Entwicklungsprozess Responsive Design ist der erste Schritt ins Mobile Web

25

Danke

26