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