RESPONSIVES DESIGNWirkungsvolles Mittel gegen zunehmende Gerätefragmentierung ?

Nicolas LeykingUX Designer

AGENDA

Ergosign GmbH

Motivation

Facts & Definition

UCD Workflow

Responsive Patterns

Responsive Project

Dos & Don’ts in responsive Design-Projects

2

UNTERNEHMEN IN ZAHLEN

3

Gründungsjahr: 2000

Gründer: Dr. Marcus Plach, Prof. Dr. Dieter Wallach

Feste Mitarbeiter: 65 (Stand: 01.01.2013)

Standorte in Saarbrücken, Hamburg, München und Zürich

Kunden:

70 % Deutschland

15 % Schweiz

15 % EU/US

EnterpriseIndustrieMedizinConsumer

MOTIVATION

5

“It is not the strongest of the species that survives, nor the most intelligent, but the one most responsive to change.”

- Charles Darwin

RESPONSIVE DESIGN MOTIVATION

Steigende Gerätefragmentierung

7

2011 wurden mehr mobile Geräte verkauft als Desktop PCs (Heise Online)

Immer mehr verschiedene Bildschirmauflösungen im Web vertreten (Global Stats)

Trend zu starker mobilen Internetnutzung, auch zuhause (Tommorrow Focus Media)

2013 soll es mehr mobile Webzugriffe als Zugriffe vom Desktop PC geben(Gartner Research)

RESPONSIVE DESIGN MOTIVATION

Steigende Gerätefragmentierung

7

2011 wurden mehr mobile Geräte verkauft als Desktop PCs (Heise Online)

Immer mehr verschiedene Bildschirmauflösungen im Web vertreten (Global Stats)

Trend zu starker mobilen Internetnutzung, auch zuhause (Tommorrow Focus Media)

2013 soll es mehr mobile Webzugriffe als Zugriffe vom Desktop PC geben(Gartner Research)

RESPONSIVE DESIGN MOTIVATION

Steigende Gerätefragmentierung

7

2011 wurden mehr mobile Geräte verkauft als Desktop PCs (Heise Online)

Immer mehr verschiedene Bildschirmauflösungen im Web vertreten (Global Stats)

Trend zu starker mobilen Internetnutzung, auch zuhause (Tommorrow Focus Media)

2013 soll es mehr mobile Webzugriffe als Zugriffe vom Desktop PC geben(Gartner Research)

RESPONSIVE DESIGN MOTIVATION

Steigende Gerätefragmentierung

7

2011 wurden mehr mobile Geräte verkauft als Desktop PCs (Heise Online)

Immer mehr verschiedene Bildschirmauflösungen im Web vertreten (Global Stats)

Trend zu starker mobilen Internetnutzung, auch zuhause (Tommorrow Focus Media)

2013 soll es mehr mobile Webzugriffe als Zugriffe vom Desktop PC geben(Gartner Research)

RESPONSIVE DESIGN MOTIVATION

Steigende Gerätefragmentierung

7

2011 wurden mehr mobile Geräte verkauft als Desktop PCs (Heise Online)

Immer mehr verschiedene Bildschirmauflösungen im Web vertreten (Global Stats)

Trend zu starker mobilen Internetnutzung, auch zuhause (Tommorrow Focus Media)

2013 soll es mehr mobile Webzugriffe als Zugriffe vom Desktop PC geben(Gartner Research)

Steigender Bedarf an Cross Platform Applikationen

RESPONSIVE DESIGN

8

RESPONSIVE DESIGN FACTS

9

Responsive Design

Ethan Marcotte, Initiator von responsivem Design

Cross Platform Ansatz auf einer Codebasis

Flexibles, programmtechnisches, konzeptuelles Regelwerk

Gerätespezifische UX durch moderne Web-Frameworks

RESPONSIVE DESIGN DEFINITION

10

Flexible Grid Layout Media Queries Flexible Images + Media

@media (min width:400px){...}

% , em

+ +

Aus was setzt sich ein responsives Design zusammen ?

RESPONSIVES DESIGN FLEXIBLE LAYOUTS

11

1 2 3 4 5 6 7 8 9 10 11 12

Header in 12 columns

Content Area in 8 columns Sidebar in 3 columns

Element

Element

Element

Element

RESPONSIVES DESIGN FLEXIBLE LAYOUTS

12

http://www.metaltoad.com/blog/simple-device-diagram-responsive-design-planning

RESPONSIVE DESIGN MEDIA QUERIES

Media Queries - Features

13

width / height

device-width / device-height

orientation

aspect-ratio

device aspect ratio

color / color-index

monochrome

resolution

grid

scanhttp://www.w3.org/TR/css3-mediaqueries/

RESPONSIVE DESIGN FLEXIBLE IMAGES

Skalierung von Bildern

14

EinfacheSkalierung

Skalierungauf einenBildausschnitt

Desktop PhoneNotebooks Tablets

RESPONSIVE DESIGN VS ADAPTIVES DESIGN

15

Responsives Design

Adaptives Design

6 fixe Layoutgrößen

Desktop PhoneNotebooks Tablets

1 flexibles Layout Grid

?? ?

RESPONSIVE UCD WORKFLOW

16

17

www.flickr.com/photos/cannedtuna/485380320

AnalyseAnalyse des Nutzungkontextes, umZielplattformen und Screengrößen zu identifizieren

Zentrale Dokumentation

http://www.flickr.com/photos/cannedtuna/6491204853

DesignDesktop oder Mobile First ?

Keine fixen Layoutingtools

Frühes HTML Prototyping

Unmittelbares Testen

ValidierungTests auf möglichst allen relevanten Bildschirmgrößen

Rückfluss der Ergebnisse in das Design und in den Prototypen

http://www.flickr.com/photos/cannedtuna/6491204853

SpezifizierungPrototypen (+ Videos?) zu Design Manual/Styleguide hinzufügen

RESPONSIVE UI PATTERNS

21

LAYOUTING PATTERNS

22

RESPONSIVE DESIGN LAYOUTING PATTERNS

Column Drop

23

3 Spalten

Sukszessives untereinander anordnen

RESPONSIVE DESIGN LAYOUTING PATTERNS

Column Drop

24http://modernizr.com

RESPONSIVE DESIGN LAYOUTING PATTERNS

Column Drop

24http://modernizr.com

RESPONSIVE DESIGN LAYOUTING PATTERNS

Column Drop

24http://modernizr.com

RESPONSIVE DESIGN LAYOUTING PATTERNS

Off Canvas

25

Inhalte werden auf verschiedene Seiten ausgelagert

RESPONSIVE DESIGN LAYOUTING PATTERNS

Off Canvas

26http://www.kaemingk.com/de/

RESPONSIVE DESIGN LAYOUTING PATTERNS

Off Canvas

26http://www.kaemingk.com/de/

RESPONSIVE DESIGN LAYOUTING PATTERNS

Off Canvas

26http://www.kaemingk.com/de/

RESPONSIVE DESIGN PATTERNS LAYOUTING PATTERNS

Tiny Tweaks

27

RESPONSIVE DESIGN PATTERNS LAYOUTING PATTERNS

Tiny Tweaks

27

1 Spalte

Adaption von Schriftgröße/Bildern

RESPONSIVE DESIGN PATTERNS LAYOUTING PATTERNS

Tiny Tweaks

28

RESPONSIVE DESIGN PATTERNS LAYOUTING PATTERNS

Tiny Tweaks

28

RESPONSIVE DESIGN PATTERNS LAYOUTING PATTERNS

Tiny Tweaks

28

NAVIGATION PATTERNS

29

RESPONSIVE DESIGN NAVIGATION PATTERNS

Top Navigation / Do nothing

30

Einfach umzusetzen

Nicht skalierbar

Wenig Abstand zwischen Einträgen--

+

RESPONSIVE DESIGN NAVIGATION PATTERNS

Top Navigation / Do nothing

31http://yiibu.com

RESPONSIVE DESIGN NAVIGATION PATTERNS

Top Navigation / Do nothing

31http://yiibu.com

RESPONSIVE DESIGN NAVIGATION PATTERNS

Top Navigation / Do nothing

31http://yiibu.com

RESPONSIVE DESIGN NAVIGATION PATTERNS

Footer Anchor

32

Einfach umzusetzen

Platzsparend -> Fokus auf Content

Orientierung-

+

+

RESPONSIVE DESIGN NAVIGATION PATTERNS

Footer Anchor

33http://contentsmagazine.com

RESPONSIVE DESIGN NAVIGATION PATTERNS

Footer Anchor

33http://contentsmagazine.com

RESPONSIVE DESIGN NAVIGATION PATTERNS

Footer Anchor

33http://contentsmagazine.com

RESPONSIVE DESIGN NAVIGATION PATTERNS

Footer Anchor

33http://contentsmagazine.com

RESPONSIVE DESIGN NAVIGATION PATTERNS

Select Menu

34

Interaktion im Header

Platzsparend -> Fokus auf Content

Triggert natives/touch-freundliches Control

Eingeschränkte Styling-Möglichkeiten

Skalierbareit: Sublevel-Einträge?

Select-Control unüblich zur Navigation

-

+

+

+

-

-

RESPONSIVE DESIGN NAVIGATION PATTERNS

Select Menu

35http://www.fivesimplesteps.com

RESPONSIVE DESIGN NAVIGATION PATTERNS

Select Menu

35http://www.fivesimplesteps.com

RESPONSIVE DESIGN NAVIGATION PATTERNS

Select Menu

35http://www.fivesimplesteps.com

RESPONSIVE DESIGN NAVIGATION PATTERNS

Toggle

36

Interaktion im Header

Platzsparend -> Fokus auf Content

Skalierbar

JavaScript-Abhängigkeit

Animationen nicht performant

-

+

+

+

-

RESPONSIVE DESIGN NAVIGATION PATTERNS

Toggle

37http://www.starbucks.com

RESPONSIVE DESIGN NAVIGATION PATTERNS

Toggle

37http://www.starbucks.com

RESPONSIVE DESIGN NAVIGATION PATTERNS

Toggle

37http://www.starbucks.com

RESPONSIVE DESIGN NAVIGATION PATTERNS

Toggle

37http://www.starbucks.com

RESPONSIVE DESIGN NAVIGATION PATTERNS

Navigation Fly-Out/Drawer

38

Erweiterbar

Platzsparend -> Fokus auf Content

Bekannt, s. Facebook, Spotify

Nicht trivial umsetzbar

Layout wirkt „kaputt“

-

+

+

+

-

RESPONSIVE DESIGN NAVIGATION PATTERNS

Navigation Fly-Out/Drawer

39http://www.kaemingk.com/de/

RESPONSIVE DESIGN NAVIGATION PATTERNS

Navigation Fly-Out/Drawer

39http://www.kaemingk.com/de/

RESPONSIVE DESIGN NAVIGATION PATTERNS

Navigation Fly-Out/Drawer

39http://www.kaemingk.com/de/

RESPONSIVE DESIGN NAVIGATION PATTERNS

Navigation Fly-Out/Drawer

39http://www.kaemingk.com/de/

RESPONSIVE PROJECT

40

iPad

RESPONSIVE DESIGN RESPONSIVE PROJECTS

iPad - Drawer

41

iPad

iPad

RESPONSIVE DESIGN RESPONSIVE PROJECTS

iPad - Drawer

41

iPad

iPad

RESPONSIVE DESIGN RESPONSIVE PROJECTS

iPad - Drawer

41

iPad

RESPONSIVE DESIGN RESPONSIVE PROJECTS

42

Unterschiedliches Layouting

iPad iPhone

DOS & DON’TS IN RESPONSIVE DESIGN-PROJECTS

43

RESPONSIVE DESIGN PRO & CONTRA

+

44

Sorge für ein einheitliches, teamweites Verständnis über Responsivität

Teste dein responsives Design so früh wie möglichmit leichtgewichtigen Prototypen

Sammel soviel Informationen wie möglich über deine Zielplattformen

Entwicklungsbeginn vor Abschluss und Abnahme des Designs

1:1 Übertragung des Designs von Desktop auf Mobile

-Dos Don’ts

Sammel Feedback von langjährigen Benutzern der Plattformen

Dokumentiere das Layoutverhalten durch anschauliche Mittel

Einsatz von fixen layouting Tools(Photoshop)

+

+

+

+

+

-

-

-

Stelle die Dokumentation und die Prototypen denEntwicklern zur Verfügung

+

Verzicht auf relevante Inhalte aufgrund von Platzmangel.

-

IST RESPONSIVES UI DESIGN EIN WIRKUNGSVOLLES MITTEL GEGEN

ZUNEHMENDE GERÄTEFRAGEMENTIERUNG?

45

JA, aber ...

www.ergosign.decontact@ergosign.de

Ergosign GmbHAdams-Lehmann-Straße 4480797 MünchenGermany

T +49 89 6890607-0F +49 89 6890607-10

T +49 681 988412-0F +49 681 988412-10

Ergosign GmbHEuropaallee 1266113 SaarbrückenGermany

Ergosign GmbHBernhard-Nocht-Straße 10920359 HamburgGermany

T +49 40 3179868-0F +49 40 3179868-10

Ergosign Switzerland AGBadenerstrasse 8088048 ZürichSwitzerland

T +41 44 54293-04F +41 44 54293-07

T +49 681 988 412-0leyking@ergosign.de

UX Designer

Nicolas LeykingIhr Ansprechpartner