Ergosign-Responsive-Design-2013

RESPONSIVES DESIGN
Wirkungsvolles Mittel gegen zunehmende Gerätefragmentierung ?
Nicolas Leyking
UX 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

Enterprise
Industrie
Medizin
Consumer

“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)
Steigender Bedarf an Cross Platform Applikationen

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
scan
http://www.w3.org/TR/css3-mediaqueries/

RESPONSIVE DESIGN FLEXIBLE IMAGES
Skalierung von Bildern
14
Einfache
Skalierung
Skalierung
auf einen
Bildausschnitt

Desktop PhoneNotebooks Tablets
RESPONSIVE DESIGN VS ADAPTIVES DESIGN
15
Responsives Design
Adaptives Design
6 fixe Layoutgrößen
Desktop PhoneNotebooks Tablets
1 flexibles Layout Grid
?? ?

17
www.flickr.com/photos/cannedtuna/485380320
Analyse
Analyse des Nutzungkontextes, um
Zielplattformen und Screengrößen zu
identiﬁzieren
Zentrale Dokumentation

http://www.flickr.com/photos/cannedtuna/6491204853
Design
Desktop oder Mobile First ?
Keine ﬁxen Layoutingtools
Frühes HTML Prototyping
Unmittelbares Testen

Validierung
Tests auf möglichst allen relevanten
Bildschirmgrößen
Rückﬂuss der Ergebnisse in das
Design und in den Prototypen

http://www.flickr.com/photos/cannedtuna/6491204853
Speziﬁzierung
Prototypen (+ Videos?) zu
Design Manual/Styleguide hinzufügen

RESPONSIVE DESIGN LAYOUTING PATTERNS
Column Drop
23
3 Spalten
Sukszessives untereinander anordnen

Column Drop
24http://modernizr.com

Off Canvas
25
Inhalte werden auf verschiedene
Seiten ausgelagert

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

RESPONSIVE DESIGN PATTERNS LAYOUTING PATTERNS
Tiny Tweaks
27

Tiny Tweaks
27
1 Spalte
Adaption von Schriftgröße/Bildern

Tiny Tweaks
28

RESPONSIVE DESIGN NAVIGATION PATTERNS
Top Navigation / Do nothing
30
Einfach umzusetzen
Nicht skalierbar
Wenig Abstand zwischen Einträgen
-
-
+

Top Navigation / Do nothing
31http://yiibu.com

Footer Anchor
32
Einfach umzusetzen
Platzsparend -> Fokus auf Content
Orientierung-
+
+

Footer Anchor
33http://contentsmagazine.com

Select Menu
34
Interaktion im Header
Triggert natives/touch-freundliches
Control
Eingeschränkte Styling-Möglichkeiten
Skalierbareit: Sublevel-Einträge?
Select-Control unüblich zur
Navigation
-
+
+
+
-
-

Select Menu
35http://www.fivesimplesteps.com

Toggle
36
Interaktion im Header
Skalierbar
JavaScript-Abhängigkeit
Animationen nicht performant
-
+
+
+
-

Toggle
37http://www.starbucks.com

Navigation Fly-Out/Drawer
38
Erweiterbar
Bekannt, s. Facebook, Spotify
Nicht trivial umsetzbar
Layout wirkt „kaputt“
-
+
+
+
-

Navigation Fly-Out/Drawer
39http://www.kaemingk.com/de/

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öglich
mit 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 den
Entwicklern 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.de
contact@ergosign.de
Ergosign GmbH
Adams-Lehmann-Straße 44
80797 München
Germany
T +49 89 6890607-0
F +49 89 6890607-10
T +49 681 988412-0
F +49 681 988412-10
Ergosign GmbH
Europaallee 12
66113 Saarbrücken
Germany
Ergosign GmbH
Bernhard-Nocht-Straße 109
20359 Hamburg
Germany
T +49 40 3179868-0
F +49 40 3179868-10
Ergosign Switzerland AG
Badenerstrasse 808
8048 Zürich
Switzerland
T +41 44 54293-04
F +41 44 54293-07
T +49 681 988 412-0
leyking@ergosign.de
UX Designer
Nicolas Leyking
Ihr Ansprechpartner

Ergosign-Responsive-Design-2013

Weitere ähnliche Inhalte

Was ist angesagt?

Andere mochten auch

Ähnlich wie Ergosign-Responsive-Design-2013

Mehr von Ergosign GmbH

Ergosign-Responsive-Design-2013