RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
-
Upload
peter-rozek -
Category
Design
-
view
3.978 -
download
3
description
Transcript of RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
![Page 1: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/1.jpg)
RESPONSIVE WEBDESIGNNavigationskonzepte für Mobile Devices
...ich bin Peter Rozek, @Webinale 2012
RESPONSIVENAVIGATION
![Page 2: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/2.jpg)
...ich bin Peter Rozek, @Webinale 2012
RESPONSIVENAVIGATION
![Page 3: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/3.jpg)
...ich bin Peter Rozek, @Webinale 2012
RESPONSIVENAVIGATION
![Page 4: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/4.jpg)
Peter Rozek... bei ecx.io
![Page 5: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/5.jpg)
1. Was ist responsive Design? ... und was es nicht ist
2. Responsive Navigation Pattern Usability Konventionen
![Page 6: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/6.jpg)
Was ist
RESPONSIVE WEBDESIGN?
![Page 7: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/7.jpg)
Responsive Webdesign ist KEIN mobile Design!
![Page 8: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/8.jpg)
Responsive vs. NativeFlexible vs. Kontext-Sensitiv
![Page 9: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/9.jpg)
„A flexible grid (width flexible images) that incorporates media queries to create a responsive, adaptive layout.“Ethan Marcotte
![Page 10: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/10.jpg)
Adaptives Layout !
![Page 11: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/11.jpg)
Layout = Design ?
![Page 12: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/12.jpg)
Designer vs. Developer
![Page 13: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/13.jpg)
Responsive Design ist mehr als nur Design...
![Page 14: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/14.jpg)
Responsive ist die Gestaltung von visuellen Verhalten
![Page 15: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/15.jpg)
Mobile Endgeräte unterliegen anderen Interaktionsprinzipien
![Page 16: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/16.jpg)
Konsistentes Design
![Page 17: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/17.jpg)
Konsistentes Design
Der grundlegende Aufbau und Navigationsmechanismen sollen für den Menschen erkennbar bleiben
![Page 18: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/18.jpg)
Gute User Experience und Joy of Use von responsive Design ist abhängig vom Navigationsdesign!
![Page 19: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/19.jpg)
RESPONSIVENAVIGATION
![Page 20: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/20.jpg)
Skalierbare Navigations PatternEntwurfsmuster (englisch: design patterns) sind bewährte Lösungsschablonen
![Page 21: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/21.jpg)
Inszenierung und InteraktionNavigationsmechanismen brauchen eine Balance zwischen Erkennbarkeit und Funktion.
![Page 22: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/22.jpg)
„Joy of Use“, das ästetische-emotionale Erlebnis
![Page 23: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/23.jpg)
„An important function of aesthetics in engineering is the satisfaction of human requirements.“Lavie, T.; Tractinsky, N.
![Page 24: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/24.jpg)
Navigation und Usability
![Page 25: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/25.jpg)
Beispiele zum „mitnehmen“
![Page 26: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/26.jpg)
Dropdownhttp://css-tricks.com/convert-menu-to-dropdown/http://www.fivesimplesteps.com/
![Page 27: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/27.jpg)
![Page 28: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/28.jpg)
![Page 29: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/29.jpg)
![Page 30: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/30.jpg)
Vorteil:• Flexibilität und Effizienz• Positionierung• nutzt Device UI
![Page 31: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/31.jpg)
Nachteil:• nur eine Ebene• braucht Javascript
![Page 32: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/32.jpg)
Fly-out Menühttp://jasonweaver.name/lab/flexiblenavigation/
![Page 33: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/33.jpg)
![Page 34: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/34.jpg)
![Page 35: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/35.jpg)
![Page 36: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/36.jpg)
Vorteil:• bedienbar• Positionierung
![Page 37: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/37.jpg)
Nachteil:• braucht Javascript• Perfomance
![Page 39: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/39.jpg)
![Page 40: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/40.jpg)
![Page 41: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/41.jpg)
![Page 42: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/42.jpg)
![Page 43: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/43.jpg)
![Page 44: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/44.jpg)
Vorteil:• Übersichtlich• Ästhetisches Design• Animation folgt
hierarchischem Aufbau
![Page 45: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/45.jpg)
Nachteil:Funktioniert nicht mit einem Windows Phone.
![Page 46: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/46.jpg)
Mega-Menüund fancy jQuery Sachenhttp://www.spelsberg.de/
![Page 47: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/47.jpg)
![Page 48: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/48.jpg)
![Page 49: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/49.jpg)
![Page 50: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/50.jpg)
![Page 51: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/51.jpg)
![Page 52: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/52.jpg)
![Page 53: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/53.jpg)
![Page 54: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/54.jpg)
![Page 55: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/55.jpg)
![Page 56: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/56.jpg)
![Page 57: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/57.jpg)
![Page 58: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/58.jpg)
![Page 59: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/59.jpg)
![Page 60: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/60.jpg)
![Page 61: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/61.jpg)
![Page 62: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/62.jpg)
![Page 63: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/63.jpg)
![Page 64: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/64.jpg)
Vorteil:• Minimalistisches Design• Positionierung
![Page 65: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/65.jpg)
Nachteil:Einige Elemente sind schwer zu erkennen
![Page 67: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/67.jpg)
![Page 68: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/68.jpg)
![Page 69: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/69.jpg)
![Page 70: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/70.jpg)
![Page 71: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/71.jpg)
![Page 72: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/72.jpg)
Vorteil:• Konsistenz und Standards• Ästhetisches und
minimalistisches Design• Device übergreifend
![Page 73: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/73.jpg)
Nachteil:• braucht Javascript• Perfomance
![Page 74: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/74.jpg)
Usability-Konventionen für Navigation Iconsconventio = Übereinkunft, Zusammenkunft
![Page 75: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/75.jpg)
Konventionen helfen Nutzern
![Page 76: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/76.jpg)
Konventionen unterstützen Designer und Entwickler
![Page 77: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/77.jpg)
Drei Linien
![Page 78: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/78.jpg)
Drei Linien
![Page 79: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/79.jpg)
Drei Linien Verständlich
![Page 80: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/80.jpg)
Listensymbol
![Page 81: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/81.jpg)
Listensymbol ?
![Page 82: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/82.jpg)
Gridsymbol
![Page 83: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/83.jpg)
Gridsymbol
![Page 84: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/84.jpg)
Gridsymbol nicht eindeutig
![Page 85: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/85.jpg)
Plussymbol
![Page 86: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/86.jpg)
Plussymbol
![Page 87: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/87.jpg)
Plussymbol Symbol besetzt
![Page 88: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/88.jpg)
Wir brauchen Standards für Navigations-Icon• Sichtbarkeit• Verständlichkeit• Konventionen
![Page 89: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/89.jpg)
Konventionen ein Beispiel
![Page 90: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/90.jpg)
Facebook-App
![Page 91: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/91.jpg)
Facebook-App auf dem iPad
![Page 92: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/92.jpg)
... was hat Barack Obama mit Facebook gemeinsam?
![Page 94: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/94.jpg)
![Page 95: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/95.jpg)
![Page 96: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/96.jpg)
![Page 97: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/97.jpg)
![Page 98: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/98.jpg)
![Page 99: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/99.jpg)
Vorteil:• Übersichtlich• Ästhetisches Design• Facebook Konvention
![Page 100: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/100.jpg)
Nachteil:Navigations-Icon ist schwer verständlich
![Page 101: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/101.jpg)
Barack Obama = Yes we can
![Page 102: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices](https://reader034.fdocuments.us/reader034/viewer/2022051322/54691f4caf7959b6258b5495/html5/thumbnails/102.jpg)
Fragen ?
twitter: @webinterfaceE-Mail: [email protected]
http://www.flickr.com/photos/markushuck/3263065399/http://www.flickr.com/photos/7187533724_035e67fa7c_b