26
RESPONSIVE DESIGN Status Quo - iico Berlin 2013 - Peter Grosskopf

Responsive Design by Peter Grosskopf

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

Page 1: Responsive Design by Peter Grosskopf

RESPONSIVE DESIGNStatus Quo - iico Berlin 2013 - Peter Grosskopf

Page 2: Responsive Design by Peter Grosskopf

Vorstellung

2

Peter Grosskopf (32)

Gründer Entwickler/Designer Dozent Münster

Geschäftsführer Zweitag GmbH

Page 3: Responsive Design by Peter Grosskopf

3

Motivation

Page 4: Responsive Design by Peter Grosskopf

4

Page 5: Responsive Design by Peter Grosskopf

5

Page 6: Responsive Design by Peter Grosskopf

6

Page 7: Responsive Design by Peter Grosskopf

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

Page 8: Responsive Design by Peter Grosskopf

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

Page 9: Responsive Design by Peter Grosskopf

9

required?Action

Page 10: Responsive Design by Peter Grosskopf

„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

Page 11: Responsive Design by Peter Grosskopf

Technologiewahl

Je nach Zielsetzung und Strategie gibt es verschiedene technologische Ansätze

mobile site responsive hybrid native ...

11

Page 12: Responsive Design by Peter Grosskopf

Responsive Design

Begriff von Ethan Marcotte erstmals erwähnt in Artikel bei A List Apart

Seine Definition: Flexibles Raster, Flexible Grafiken, Media Queries

12

Page 13: Responsive Design by Peter Grosskopf

Beispiele http://rbmaradio.com

13

Page 14: Responsive Design by Peter Grosskopf

Beispiele http://mediaqueri.es*

*Inspirationen sammeln

14

Page 15: Responsive Design by Peter Grosskopf

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

Page 16: Responsive Design by Peter Grosskopf

Breakpoints

Breite, an dem das Design umbricht

Smartphone Portrait Mode< 480

High-End Smartphone, iPad< 1024

Restliche Geräte, Desktop, ...>= 1024...

16

Page 17: Responsive Design by Peter Grosskopf

Layout Patterns

17

Mostly Fluid Column Drop

Layout Shifter Off Canvas

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

Page 18: Responsive Design by Peter Grosskopf

Frameworks

Helfen bei den ersten Schritten und bei der

Fehlervermeidung

foundation.zurb.com atthewhartman.github.io/base twitter.github.io/bootstrap18

Page 19: Responsive Design by Peter Grosskopf

Vorteile von RWD+ Geringer Wartungsaufwand

+ Konsistente Markendarstellung

+ Keine Redirects

+ Zukunftssicher

+ Nur eine Technologie (HTML/CSS)19

Page 20: Responsive Design by Peter Grosskopf

Nachteile von RWD- Nur online nutzbar

- hoher Testaufwand

- Browserunterstützung

- Geräteoptimierung / Performance

20

- keine UI-Komponenten

Page 21: Responsive Design by Peter Grosskopf

HerausforderungGeräte nach wie vor unterschiedlich!

Konsequenz:Unterstützung unterschiedlicher Hardware und Interaktionskonzepte=> Nicht mit Responsive Design alleine abbildbar

21

Page 22: Responsive Design by Peter Grosskopf

RWD meets Adaptive

22

User Agent Sniffing / Feature Detection

Smartphone Tablet Desktop ...

Für Geräteklassen optimierte Versionen

ResponsiveResponsiveResponsiveResponsive

Page 23: Responsive Design by Peter Grosskopf

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

Page 24: Responsive Design by Peter Grosskopf

Entwicklungsprozess

Darüber hinaus:

Entwickler = Designer Mut zum Prototyping

24

Page 25: Responsive Design by Peter Grosskopf

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

Page 26: Responsive Design by Peter Grosskopf

26

Danke