RESPONSIVEWEBDESIGNNavigationskonzeptefür Mobile Devices      ...ich bin Peter Rozek, @Webinale 2012
RESPONSIVENAVIGATION   ...ich bin Peter Rozek, @Webinale 2012
Peter RozekSenior Developer bei ECX.IO
1. Was ist responsive Design?   ... und was es nicht ist2. Responsive Navigation  Pattern  Usability Konventionen
Was istRESPONSIVEWEBDESIGN?
Responsive Webdesign ist KEINmobile Design!
Responsive vs. NativeFlexible vs. Kontext-Sensitiv
„A flexible grid (width flexible images)that incorporates media queries tocreate a responsive, adaptive layout.“Ethan Marc...
Adaptives Layout !
Layout = Design ?
Designer vs. Developer
Responsive Design ist mehr alsnur Design...
Responsive ist die Gestaltungvon visuellen Verhalten
Mobile Endgeräte unterliegenanderen Interaktionsprinzipien
Konsistentes Design
Der grundlegende Aufbau undNavigationsmechanismen sollen fürden Menschen erkennbar bleibenKonsistentes Design
Gute User Experience und Joy of Use vonresponsive Design ist abhängig vomNavigationsdesign!
RESPONSIVENAVIGATION
Skalierbare Navigations PatternEntwurfsmuster (englisch: design patterns)sind bewährte Lösungsschablonen
Inszenierung und InteraktionNavigationsmechanismen brauchen eineBalance zwischen Erkennbarkeit undFunktion.
„Joy of Use“, das ästetische-emotionale Erlebnis
„An important function of aesthetics inengineering is the satisfaction of humanrequirements.“Lavie, T.; Tractinsky, N.
Navigation und Usability
Beispiele zum „mitnehmen“
Dropdownhttp://css-tricks.com/convert-menu-to-dropdown/http://www.fivesimplesteps.com/
Vorteil:• Flexibilität und Effizienz• Positionierung• nutzt Device UI
Nachteil:• nur eine Ebene• braucht Javascript
Fly-out Menühttp://jasonweaver.name/lab/flexiblenavigation/
Vorteil:• bedienbar• Positionierung
Nachteil:• braucht Javascript• Perfomance
Fly-out Menühttp://www.sony.com
Vorteil:• Übersichtlich• Ästhetisches Design• Animation folgt  hierarchischem Aufbau
Nachteil:Funktioniert nicht mit einemWindows Phone.
Mega-Menüund fancy jQuery Sachenhttp://www.spelsberg.de/
Vorteil:• Minimalistisches Design• Positionierung
Nachteil:Einige Elemente sind schwer zuerkennen
Sprungmarkenund ganz viel fancy stuffhttp://adam.co/
Vorteil:• Konsistenz und Standards• Ästhetisches und  minimalistisches Design• Device übergreifend
Nachteil:• braucht Javascript• Perfomance
Usability-Konventionen fürNavigation Iconsconventio = Übereinkunft, Zusammenkunft
Konventionen helfen Nutzern
Konventionen unterstützenDesigner und Entwickler
Drei Linien
Drei Linien
Drei Linien   Verständlich
Listensymbol
Listensymbol   ?
Gridsymbol
Gridsymbol
Gridsymbol   nicht eindeutig
Plussymbol
Plussymbol
Plussymbol   Symbol besetzt
Wir brauchen Standards fürNavigations-Icon• Sichtbarkeit• Verständlichkeit• Konventionen
Konventionenein Beispiel
Facebook-App
Facebook-App auf dem iPad
... was hat Barack Obama mitFacebook gemeinsam?
Kampangen-Website http://www.barackobama.com
Vorteil:• Übersichtlich• Ästhetisches Design• Facebook Konvention
Nachteil:Navigations-Icon ist schwerverständlich
Barack Obama = Yes we can
Fragen ?twitter: @webinterfaceE-Mail: peter.rozek@ecx.io
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
Upcoming SlideShare
Loading in …5
×

RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices

3,987 views

Published on

Published in: Design
1 Comment
6 Likes
Statistics
Notes
  • Hi Peter, leider war ich nicht auf der Webinale und habe Deinen Beitrag verpasst. Die Präse sieht aber cool aus. Bin momentan auf der Suche nach ein wenig Inspiration für Responsive Designs. Ein paar Beispiele habe ich hier gefunden: http://www.responsive-design-test.de/responsive-design-beispiele So wirklich viele sind das aber nicht. Hast Du vielleicht noch ein paar Tipps für gut umgesetzte Seiten auf dem deutschen Markt? Vielleicht Deine TOP 3 ggf? Vielen Dank im Voraus, Gruß Stefan
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
3,987
On SlideShare
0
From Embeds
0
Number of Embeds
120
Actions
Shares
0
Downloads
56
Comments
1
Likes
6
Embeds 0
No embeds

No notes for slide

RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices

  1. 1. RESPONSIVEWEBDESIGNNavigationskonzeptefür Mobile Devices ...ich bin Peter Rozek, @Webinale 2012
  2. 2. RESPONSIVENAVIGATION ...ich bin Peter Rozek, @Webinale 2012
  3. 3. Peter RozekSenior Developer bei ECX.IO
  4. 4. 1. Was ist responsive Design? ... und was es nicht ist2. Responsive Navigation Pattern Usability Konventionen
  5. 5. Was istRESPONSIVEWEBDESIGN?
  6. 6. Responsive Webdesign ist KEINmobile Design!
  7. 7. Responsive vs. NativeFlexible vs. Kontext-Sensitiv
  8. 8. „A flexible grid (width flexible images)that incorporates media queries tocreate a responsive, adaptive layout.“Ethan Marcotte
  9. 9. Adaptives Layout !
  10. 10. Layout = Design ?
  11. 11. Designer vs. Developer
  12. 12. Responsive Design ist mehr alsnur Design...
  13. 13. Responsive ist die Gestaltungvon visuellen Verhalten
  14. 14. Mobile Endgeräte unterliegenanderen Interaktionsprinzipien
  15. 15. Konsistentes Design
  16. 16. Der grundlegende Aufbau undNavigationsmechanismen sollen fürden Menschen erkennbar bleibenKonsistentes Design
  17. 17. Gute User Experience und Joy of Use vonresponsive Design ist abhängig vomNavigationsdesign!
  18. 18. RESPONSIVENAVIGATION
  19. 19. Skalierbare Navigations PatternEntwurfsmuster (englisch: design patterns)sind bewährte Lösungsschablonen
  20. 20. Inszenierung und InteraktionNavigationsmechanismen brauchen eineBalance zwischen Erkennbarkeit undFunktion.
  21. 21. „Joy of Use“, das ästetische-emotionale Erlebnis
  22. 22. „An important function of aesthetics inengineering is the satisfaction of humanrequirements.“Lavie, T.; Tractinsky, N.
  23. 23. Navigation und Usability
  24. 24. Beispiele zum „mitnehmen“
  25. 25. Dropdownhttp://css-tricks.com/convert-menu-to-dropdown/http://www.fivesimplesteps.com/
  26. 26. Vorteil:• Flexibilität und Effizienz• Positionierung• nutzt Device UI
  27. 27. Nachteil:• nur eine Ebene• braucht Javascript
  28. 28. Fly-out Menühttp://jasonweaver.name/lab/flexiblenavigation/
  29. 29. Vorteil:• bedienbar• Positionierung
  30. 30. Nachteil:• braucht Javascript• Perfomance
  31. 31. Fly-out Menühttp://www.sony.com
  32. 32. Vorteil:• Übersichtlich• Ästhetisches Design• Animation folgt hierarchischem Aufbau
  33. 33. Nachteil:Funktioniert nicht mit einemWindows Phone.
  34. 34. Mega-Menüund fancy jQuery Sachenhttp://www.spelsberg.de/
  35. 35. Vorteil:• Minimalistisches Design• Positionierung
  36. 36. Nachteil:Einige Elemente sind schwer zuerkennen
  37. 37. Sprungmarkenund ganz viel fancy stuffhttp://adam.co/
  38. 38. Vorteil:• Konsistenz und Standards• Ästhetisches und minimalistisches Design• Device übergreifend
  39. 39. Nachteil:• braucht Javascript• Perfomance
  40. 40. Usability-Konventionen fürNavigation Iconsconventio = Übereinkunft, Zusammenkunft
  41. 41. Konventionen helfen Nutzern
  42. 42. Konventionen unterstützenDesigner und Entwickler
  43. 43. Drei Linien
  44. 44. Drei Linien
  45. 45. Drei Linien Verständlich
  46. 46. Listensymbol
  47. 47. Listensymbol ?
  48. 48. Gridsymbol
  49. 49. Gridsymbol
  50. 50. Gridsymbol nicht eindeutig
  51. 51. Plussymbol
  52. 52. Plussymbol
  53. 53. Plussymbol Symbol besetzt
  54. 54. Wir brauchen Standards fürNavigations-Icon• Sichtbarkeit• Verständlichkeit• Konventionen
  55. 55. Konventionenein Beispiel
  56. 56. Facebook-App
  57. 57. Facebook-App auf dem iPad
  58. 58. ... was hat Barack Obama mitFacebook gemeinsam?
  59. 59. Kampangen-Website http://www.barackobama.com
  60. 60. Vorteil:• Übersichtlich• Ästhetisches Design• Facebook Konvention
  61. 61. Nachteil:Navigations-Icon ist schwerverständlich
  62. 62. Barack Obama = Yes we can
  63. 63. Fragen ?twitter: @webinterfaceE-Mail: peter.rozek@ecx.io

×