Ergosign-Responsive-Design-2013
Upcoming SlideShare
Loading in...5
×
 

Ergosign-Responsive-Design-2013

on

  • 3,070 views

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

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.

Statistics

Views

Total Views
3,070
Views on SlideShare
1,747
Embed Views
1,323

Actions

Likes
1
Downloads
23
Comments
0

19 Embeds 1,323

http://www.ergosign.de 839
http://ergosign.de 237
http://user-centered-design.net 58
http://www.hci-hub.de 43
http://www.gui-dance.com 34
http://usability-engineering.org 21
http://gui-dance.com 17
http://usability-engineering.net 17
http://www.antetype.com 14
http://localhost 10
http://www.ergosign.ch 9
http://user-centred-design.com 8
http://ergosign.ch 6
http://hci-hub.de 5
http://ergo-score.com 1
http://ergosign-technologies.com 1
http://ergosign.net 1
http://shaping-interaction.com 1
http://www.ergoscore.de 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Ergosign-Responsive-Design-2013 Ergosign-Responsive-Design-2013 Presentation Transcript

  • 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
  • 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 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 ?? ?
  • RESPONSIVE UCD WORKFLOW 16
  • 17 www.flickr.com/photos/cannedtuna/485380320 Analyse Analyse des Nutzungkontextes, um Zielplattformen und Screengrößen zu identifizieren Zentrale Dokumentation
  • http://www.flickr.com/photos/cannedtuna/6491204853 Design Desktop oder Mobile First ? Keine fixen Layoutingtools Frühes HTML Prototyping Unmittelbares Testen
  • Validierung Tests 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 Spezifizierung Prototypen (+ 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ö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