RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices

Download RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices

Post on 17-Nov-2014

3.970 views

Category:

Design

3 download

Embed Size (px)

DESCRIPTION

 

TRANSCRIPT

  • 1. RESPONSIVEWEBDESIGNNavigationskonzeptefr Mobile Devices...ich bin Peter Rozek, @Webinale 2012

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