Ergosign-Responsive-Design-2013

3,564 views

Published on

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.

Published in: Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,564
On SlideShare
0
From Embeds
0
Number of Embeds
1,799
Actions
Shares
0
Downloads
36
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Ergosign-Responsive-Design-2013

  1. 1. RESPONSIVES DESIGN Wirkungsvolles Mittel gegen zunehmende Gerätefragmentierung ? Nicolas Leyking UX Designer
  2. 2. AGENDA Ergosign GmbH Motivation Facts & Definition UCD Workflow Responsive Patterns Responsive Project Dos & Don’ts in responsive Design-Projects 2
  3. 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. 4. Enterprise Industrie Medizin Consumer
  5. 5. MOTIVATION 5
  6. 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. 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. 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. 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. 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. 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. 12. RESPONSIVE DESIGN 8
  13. 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. 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. 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. 16. RESPONSIVES DESIGN FLEXIBLE LAYOUTS 12 http://www.metaltoad.com/blog/simple-device-diagram-responsive-design-planning
  17. 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. 18. RESPONSIVE DESIGN FLEXIBLE IMAGES Skalierung von Bildern 14 Einfache Skalierung Skalierung auf einen Bildausschnitt
  19. 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. 20. RESPONSIVE UCD WORKFLOW 16
  21. 21. 17 www.flickr.com/photos/cannedtuna/485380320 Analyse Analyse des Nutzungkontextes, um Zielplattformen und Screengrößen zu identifizieren Zentrale Dokumentation
  22. 22. http://www.flickr.com/photos/cannedtuna/6491204853 Design Desktop oder Mobile First ? Keine fixen Layoutingtools Frühes HTML Prototyping Unmittelbares Testen
  23. 23. Validierung Tests auf möglichst allen relevanten Bildschirmgrößen Rückfluss der Ergebnisse in das Design und in den Prototypen
  24. 24. http://www.flickr.com/photos/cannedtuna/6491204853 Spezifizierung Prototypen (+ Videos?) zu Design Manual/Styleguide hinzufügen
  25. 25. RESPONSIVE UI PATTERNS 21
  26. 26. LAYOUTING PATTERNS 22
  27. 27. RESPONSIVE DESIGN LAYOUTING PATTERNS Column Drop 23 3 Spalten Sukszessives untereinander anordnen
  28. 28. RESPONSIVE DESIGN LAYOUTING PATTERNS Column Drop 24http://modernizr.com
  29. 29. RESPONSIVE DESIGN LAYOUTING PATTERNS Column Drop 24http://modernizr.com
  30. 30. RESPONSIVE DESIGN LAYOUTING PATTERNS Column Drop 24http://modernizr.com
  31. 31. RESPONSIVE DESIGN LAYOUTING PATTERNS Off Canvas 25 Inhalte werden auf verschiedene Seiten ausgelagert
  32. 32. RESPONSIVE DESIGN LAYOUTING PATTERNS Off Canvas 26http://www.kaemingk.com/de/
  33. 33. RESPONSIVE DESIGN LAYOUTING PATTERNS Off Canvas 26http://www.kaemingk.com/de/
  34. 34. RESPONSIVE DESIGN LAYOUTING PATTERNS Off Canvas 26http://www.kaemingk.com/de/
  35. 35. RESPONSIVE DESIGN PATTERNS LAYOUTING PATTERNS Tiny Tweaks 27
  36. 36. RESPONSIVE DESIGN PATTERNS LAYOUTING PATTERNS Tiny Tweaks 27 1 Spalte Adaption von Schriftgröße/Bildern
  37. 37. RESPONSIVE DESIGN PATTERNS LAYOUTING PATTERNS Tiny Tweaks 28
  38. 38. RESPONSIVE DESIGN PATTERNS LAYOUTING PATTERNS Tiny Tweaks 28
  39. 39. RESPONSIVE DESIGN PATTERNS LAYOUTING PATTERNS Tiny Tweaks 28
  40. 40. NAVIGATION PATTERNS 29
  41. 41. RESPONSIVE DESIGN NAVIGATION PATTERNS Top Navigation / Do nothing 30 Einfach umzusetzen Nicht skalierbar Wenig Abstand zwischen Einträgen - - +
  42. 42. RESPONSIVE DESIGN NAVIGATION PATTERNS Top Navigation / Do nothing 31http://yiibu.com
  43. 43. RESPONSIVE DESIGN NAVIGATION PATTERNS Top Navigation / Do nothing 31http://yiibu.com
  44. 44. RESPONSIVE DESIGN NAVIGATION PATTERNS Top Navigation / Do nothing 31http://yiibu.com
  45. 45. RESPONSIVE DESIGN NAVIGATION PATTERNS Footer Anchor 32 Einfach umzusetzen Platzsparend -> Fokus auf Content Orientierung- + +
  46. 46. RESPONSIVE DESIGN NAVIGATION PATTERNS Footer Anchor 33http://contentsmagazine.com
  47. 47. RESPONSIVE DESIGN NAVIGATION PATTERNS Footer Anchor 33http://contentsmagazine.com
  48. 48. RESPONSIVE DESIGN NAVIGATION PATTERNS Footer Anchor 33http://contentsmagazine.com
  49. 49. RESPONSIVE DESIGN NAVIGATION PATTERNS Footer Anchor 33http://contentsmagazine.com
  50. 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. 51. RESPONSIVE DESIGN NAVIGATION PATTERNS Select Menu 35http://www.fivesimplesteps.com
  52. 52. RESPONSIVE DESIGN NAVIGATION PATTERNS Select Menu 35http://www.fivesimplesteps.com
  53. 53. RESPONSIVE DESIGN NAVIGATION PATTERNS Select Menu 35http://www.fivesimplesteps.com
  54. 54. RESPONSIVE DESIGN NAVIGATION PATTERNS Toggle 36 Interaktion im Header Platzsparend -> Fokus auf Content Skalierbar JavaScript-Abhängigkeit Animationen nicht performant - + + + -
  55. 55. RESPONSIVE DESIGN NAVIGATION PATTERNS Toggle 37http://www.starbucks.com
  56. 56. RESPONSIVE DESIGN NAVIGATION PATTERNS Toggle 37http://www.starbucks.com
  57. 57. RESPONSIVE DESIGN NAVIGATION PATTERNS Toggle 37http://www.starbucks.com
  58. 58. RESPONSIVE DESIGN NAVIGATION PATTERNS Toggle 37http://www.starbucks.com
  59. 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. 60. RESPONSIVE DESIGN NAVIGATION PATTERNS Navigation Fly-Out/Drawer 39http://www.kaemingk.com/de/
  61. 61. RESPONSIVE DESIGN NAVIGATION PATTERNS Navigation Fly-Out/Drawer 39http://www.kaemingk.com/de/
  62. 62. RESPONSIVE DESIGN NAVIGATION PATTERNS Navigation Fly-Out/Drawer 39http://www.kaemingk.com/de/
  63. 63. RESPONSIVE DESIGN NAVIGATION PATTERNS Navigation Fly-Out/Drawer 39http://www.kaemingk.com/de/
  64. 64. RESPONSIVE PROJECT 40
  65. 65. iPad RESPONSIVE DESIGN RESPONSIVE PROJECTS iPad - Drawer 41 iPad
  66. 66. iPad RESPONSIVE DESIGN RESPONSIVE PROJECTS iPad - Drawer 41 iPad
  67. 67. iPad RESPONSIVE DESIGN RESPONSIVE PROJECTS iPad - Drawer 41 iPad
  68. 68. RESPONSIVE DESIGN RESPONSIVE PROJECTS 42 Unterschiedliches Layouting iPad iPhone
  69. 69. DOS & DON’TS IN RESPONSIVE DESIGN-PROJECTS 43
  70. 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. 71. IST RESPONSIVES UI DESIGN EIN WIRKUNGSVOLLES MITTEL GEGEN ZUNEHMENDE GERÄTEFRAGEMENTIERUNG? 45 JA, aber ...
  72. 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

×