Insbesondere im Bereich des Webdesigns hat sich “responsives Design” als ein aktuelles Schlüsselthema herausgestellt. Das anhaltend starke Wachstum von mobilen Geräten sowie unterschiedlichste Bildschirmgrößen und Formate, mit denen Webseiten heute betrachtet werden, führen zu fast unkontrollierbaren Darstellungseffekten. Vorrangiges Ziel von responsivem Design ist die optimale Platzausnutzung des darstellenden Gerätes, ohne auf ein statisches Design zurückgreifen zu müssen. Mit verstärktem Einzug mobiler Geräte in den Bereich der Arbeitswelt stellen sich heute sehr ähnliche Herausforderungen an das UI-Design im Bereich von Produktiv-Software. Softwarehersteller sehen sich heute mit dem Problem einer fast unbeherrschbaren Fragmentierung von Geräten und Betriebssystemen konfrontiert. Der Ansatz jeder Applikation, ein natives Pendant zur Verfügung zu stellen, scheint schlicht unwirtschaftlich. Daher wird verstärkt der Cross Platform-Ansatz verfolgt. Ein wichtiger Schlüssel zu einer One-Size-Fits-All-Lösung ist responsives Design. Auch wenn dies häufig in direktem Zusammenhang mit der technologischen Brücke durch Web-Technologien steht, sind responsive Konzepte zunächst technologieunabhängig. Dieser Beitrag unterstreicht die Signifikanz sowie Stärken und Schwächen von responsivem Design an konkreten Beispielen erläutert und Strategien sowie Vorgehensweisen bei der Konzipierung solcher Designs vorgestellt werden.

1. RESPONSIVES DESIGN
Wirkungsvolles Mittel gegen zunehmende Gerätefragmentierung ?
Nicolas Leyking
UX Designer

2. AGENDA
Ergosign GmbH
Motivation
Facts & Definition
UCD Workflow
Responsive Patterns
Responsive Project
Dos & Don’ts in responsive Design-Projects
2

3. 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

4. Enterprise
Industrie
Medizin
Consumer

5. MOTIVATION
5

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

7. 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)

8. 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)

9. 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)

10. 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)

11. 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

12. RESPONSIVE DESIGN
8

13. 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

14. 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 ?

15. 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

16. RESPONSIVES DESIGN FLEXIBLE LAYOUTS
12
http://www.metaltoad.com/blog/simple-device-diagram-responsive-design-planning

17. 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/

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

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

20. RESPONSIVE UCD WORKFLOW
16

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

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

23. Validierung
Tests auf möglichst allen relevanten
Bildschirmgrößen
Rückfluss der Ergebnisse in das
Design und in den Prototypen

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

25. RESPONSIVE UI PATTERNS
21

26. LAYOUTING PATTERNS
22

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

28. RESPONSIVE DESIGN LAYOUTING PATTERNS
Column Drop
24http://modernizr.com

29. RESPONSIVE DESIGN LAYOUTING PATTERNS
Column Drop
24http://modernizr.com

30. RESPONSIVE DESIGN LAYOUTING PATTERNS
Column Drop
24http://modernizr.com

31. RESPONSIVE DESIGN LAYOUTING PATTERNS
Off Canvas
25
Inhalte werden auf verschiedene
Seiten ausgelagert

32. RESPONSIVE DESIGN LAYOUTING PATTERNS
Off Canvas
26http://www.kaemingk.com/de/

33. RESPONSIVE DESIGN LAYOUTING PATTERNS
Off Canvas
26http://www.kaemingk.com/de/

34. RESPONSIVE DESIGN LAYOUTING PATTERNS
Off Canvas
26http://www.kaemingk.com/de/

35. RESPONSIVE DESIGN PATTERNS LAYOUTING PATTERNS
Tiny Tweaks
27

36. RESPONSIVE DESIGN PATTERNS LAYOUTING PATTERNS
Tiny Tweaks
27
1 Spalte
Adaption von Schriftgröße/Bildern

37. RESPONSIVE DESIGN PATTERNS LAYOUTING PATTERNS
Tiny Tweaks
28

38. RESPONSIVE DESIGN PATTERNS LAYOUTING PATTERNS
Tiny Tweaks
28

39. RESPONSIVE DESIGN PATTERNS LAYOUTING PATTERNS
Tiny Tweaks
28

40. NAVIGATION PATTERNS
29

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

42. RESPONSIVE DESIGN NAVIGATION PATTERNS
Top Navigation / Do nothing
31http://yiibu.com

43. RESPONSIVE DESIGN NAVIGATION PATTERNS
Top Navigation / Do nothing
31http://yiibu.com

44. RESPONSIVE DESIGN NAVIGATION PATTERNS
Top Navigation / Do nothing
31http://yiibu.com

45. RESPONSIVE DESIGN NAVIGATION PATTERNS
Footer Anchor
32
Einfach umzusetzen
Platzsparend -> Fokus auf Content
Orientierung-
+
+

46. RESPONSIVE DESIGN NAVIGATION PATTERNS
Footer Anchor
33http://contentsmagazine.com

47. RESPONSIVE DESIGN NAVIGATION PATTERNS
Footer Anchor
33http://contentsmagazine.com

48. RESPONSIVE DESIGN NAVIGATION PATTERNS
Footer Anchor
33http://contentsmagazine.com

49. RESPONSIVE DESIGN NAVIGATION PATTERNS
Footer Anchor
33http://contentsmagazine.com

50. 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
-
+
+
+
-
-

51. RESPONSIVE DESIGN NAVIGATION PATTERNS
Select Menu
35http://www.fivesimplesteps.com

52. RESPONSIVE DESIGN NAVIGATION PATTERNS
Select Menu
35http://www.fivesimplesteps.com

53. RESPONSIVE DESIGN NAVIGATION PATTERNS
Select Menu
35http://www.fivesimplesteps.com

54. RESPONSIVE DESIGN NAVIGATION PATTERNS
Toggle
36
Interaktion im Header
Platzsparend -> Fokus auf Content
Skalierbar
JavaScript-Abhängigkeit
Animationen nicht performant
-
+
+
+
-

55. RESPONSIVE DESIGN NAVIGATION PATTERNS
Toggle
37http://www.starbucks.com

56. RESPONSIVE DESIGN NAVIGATION PATTERNS
Toggle
37http://www.starbucks.com

57. RESPONSIVE DESIGN NAVIGATION PATTERNS
Toggle
37http://www.starbucks.com

58. RESPONSIVE DESIGN NAVIGATION PATTERNS
Toggle
37http://www.starbucks.com

59. RESPONSIVE DESIGN NAVIGATION PATTERNS
Navigation Fly-Out/Drawer
38
Erweiterbar
Platzsparend -> Fokus auf Content
Bekannt, s. Facebook, Spotify
Nicht trivial umsetzbar
Layout wirkt „kaputt“
-
+
+
+
-

60. RESPONSIVE DESIGN NAVIGATION PATTERNS
Navigation Fly-Out/Drawer
39http://www.kaemingk.com/de/

61. RESPONSIVE DESIGN NAVIGATION PATTERNS
Navigation Fly-Out/Drawer
39http://www.kaemingk.com/de/

62. RESPONSIVE DESIGN NAVIGATION PATTERNS
Navigation Fly-Out/Drawer
39http://www.kaemingk.com/de/

63. RESPONSIVE DESIGN NAVIGATION PATTERNS
Navigation Fly-Out/Drawer
39http://www.kaemingk.com/de/

64. RESPONSIVE PROJECT
40

65. iPad
RESPONSIVE DESIGN RESPONSIVE PROJECTS
iPad - Drawer
41
iPad

66. iPad
RESPONSIVE DESIGN RESPONSIVE PROJECTS
iPad - Drawer
41
iPad

67. iPad
RESPONSIVE DESIGN RESPONSIVE PROJECTS
iPad - Drawer
41
iPad

68. RESPONSIVE DESIGN RESPONSIVE PROJECTS
42
Unterschiedliches Layouting
iPad iPhone

69. DOS & DON’TS
IN RESPONSIVE DESIGN-PROJECTS
43

70. 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.
-

71. IST RESPONSIVES UI DESIGN EIN WIRKUNGSVOLLES MITTEL GEGEN
ZUNEHMENDE GERÄTEFRAGEMENTIERUNG?
45
JA, aber ...

72. 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