SlideShare une entreprise Scribd logo
1  sur  102
Télécharger pour lire hors ligne
RESPONSIVE
WEBDESIGN
Navigationskonzepte
für Mobile Devices
      ...ich bin Peter Rozek, @Webinale 2012
RESPONSIVE
NAVIGATION
   ...ich bin Peter Rozek, @Webinale 2012
Peter Rozek
Senior Developer bei ECX.IO
1. Was ist responsive Design?
   ... und was es nicht ist


2. Responsive Navigation
  Pattern
  Usability Konventionen
Was ist

RESPONSIVE
WEBDESIGN?
Responsive Webdesign ist KEIN
mobile Design!
Responsive vs. Native
Flexible vs. Kontext-Sensitiv
„A flexible grid (width flexible images)
that incorporates media queries to
create a responsive, adaptive layout.“
Ethan Marcotte
Adaptives Layout !
Layout = Design ?
Designer vs. Developer
Responsive Design ist mehr als
nur Design...
Responsive ist die Gestaltung
von visuellen Verhalten
Mobile Endgeräte unterliegen
anderen Interaktionsprinzipien
Konsistentes Design
Der grundlegende Aufbau und
Navigationsmechanismen sollen für
den Menschen erkennbar bleiben


Konsistentes Design
Gute User Experience und Joy of Use von
responsive Design ist abhängig vom
Navigationsdesign!
RESPONSIVE
NAVIGATION
Skalierbare Navigations Pattern
Entwurfsmuster (englisch: design patterns)
sind bewährte Lösungsschablonen
Inszenierung und Interaktion
Navigationsmechanismen brauchen eine
Balance zwischen Erkennbarkeit und
Funktion.
„Joy of Use“, das ästetische-
emotionale Erlebnis
„An important function of aesthetics in
engineering is the satisfaction of human
requirements.“
Lavie, T.; Tractinsky, N.
Navigation und Usability
Beispiele zum „mitnehmen“
Dropdown
http://css-tricks.com/convert-menu-to-dropdown/
http://www.fivesimplesteps.com/
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
Vorteil:
• Flexibilität und Effizienz
• Positionierung
• nutzt Device UI
Nachteil:
• nur eine Ebene
• braucht Javascript
Fly-out Menü
http://jasonweaver.name/lab/flexiblenavigation/
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
Vorteil:
• bedienbar
• Positionierung
Nachteil:
• braucht Javascript
• Perfomance
Fly-out Menü
http://www.sony.com
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
Vorteil:
• Übersichtlich
• Ästhetisches Design
• Animation folgt
  hierarchischem Aufbau
Nachteil:
Funktioniert nicht mit einem
Windows Phone.
Mega-Menü
und fancy jQuery Sachen
http://www.spelsberg.de/
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
Vorteil:
• Minimalistisches Design
• Positionierung
Nachteil:
Einige Elemente sind schwer zu
erkennen
Sprungmarken
und ganz viel fancy stuff
http://adam.co/
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
Vorteil:
• Konsistenz und Standards
• Ästhetisches und
  minimalistisches Design
• Device übergreifend
Nachteil:
• braucht Javascript
• Perfomance
Usability-Konventionen für
Navigation Icons
conventio = Übereinkunft, Zusammenkunft
Konventionen helfen Nutzern
Konventionen unterstützen
Designer 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ür
Navigations-Icon
• Sichtbarkeit
• Verständlichkeit
• Konventionen
Konventionen
ein Beispiel
Facebook-App
Facebook-App auf dem iPad
... was hat Barack Obama mit
Facebook gemeinsam?
Kampangen-Website
 http://www.barackobama.com
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
Vorteil:
• Übersichtlich
• Ästhetisches Design
• Facebook Konvention
Nachteil:
Navigations-Icon ist schwer
verständlich
Barack Obama = Yes we can
Fragen ?
twitter: @webinterface
E-Mail: peter.rozek@ecx.io
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices

Contenu connexe

Similaire à RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices

SEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDSEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDConny Stier
 
IA Konferenz München 2011
IA Konferenz München 2011IA Konferenz München 2011
IA Konferenz München 2011Alexander Beck
 
JavaScript und trotzdem Softwerker
JavaScript und trotzdem SoftwerkerJavaScript und trotzdem Softwerker
JavaScript und trotzdem SoftwerkerDennis Wilson
 
Responsive Design | Fluid | Mobile
Responsive Design | Fluid | MobileResponsive Design | Fluid | Mobile
Responsive Design | Fluid | MobileCS2 AG
 
WCAG 2.0 mehr als nur ein Standard, Synergien zwischen Usability und Accessib...
WCAG 2.0 mehr als nur ein Standard, Synergien zwischen Usability und Accessib...WCAG 2.0 mehr als nur ein Standard, Synergien zwischen Usability und Accessib...
WCAG 2.0 mehr als nur ein Standard, Synergien zwischen Usability und Accessib...Peter Rozek
 
Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...
Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...
Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...Christoph Mühlbauer
 
Responsive Design by Peter Grosskopf
Responsive Design by Peter GrosskopfResponsive Design by Peter Grosskopf
Responsive Design by Peter GrosskopfPeter Grosskopf
 
Creasoft c-Day 2009 - Webtechnologien der Zukunft
Creasoft c-Day 2009 - Webtechnologien der ZukunftCreasoft c-Day 2009 - Webtechnologien der Zukunft
Creasoft c-Day 2009 - Webtechnologien der ZukunftCreasoft AG
 
Sencha Touch und PhoneGap
Sencha Touch und PhoneGapSencha Touch und PhoneGap
Sencha Touch und PhoneGapIndiginox
 
Ergosign-wpf-ui-development-best-practices-dotnet
Ergosign-wpf-ui-development-best-practices-dotnetErgosign-wpf-ui-development-best-practices-dotnet
Ergosign-wpf-ui-development-best-practices-dotnetErgosign GmbH
 
Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen
Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, NotizenWireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen
Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, NotizenWebmontag MRN
 
Cross Plattform Entwicklung für Mobile Anwendungen
Cross Plattform Entwicklung für Mobile AnwendungenCross Plattform Entwicklung für Mobile Anwendungen
Cross Plattform Entwicklung für Mobile AnwendungenMarkus Eiglsperger
 
German Web Usability Training
German Web Usability TrainingGerman Web Usability Training
German Web Usability TrainingPaulina
 
WP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & WordpressWP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & WordpressKirstenSchelper
 
Responsive Design
Responsive DesignResponsive Design
Responsive DesignMario Fink
 

Similaire à RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices (20)

SEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDSEO Produktspezifikation für RWD
SEO Produktspezifikation für RWD
 
IA Konferenz München 2011
IA Konferenz München 2011IA Konferenz München 2011
IA Konferenz München 2011
 
JavaScript und trotzdem Softwerker
JavaScript und trotzdem SoftwerkerJavaScript und trotzdem Softwerker
JavaScript und trotzdem Softwerker
 
Responsive Design | Fluid | Mobile
Responsive Design | Fluid | MobileResponsive Design | Fluid | Mobile
Responsive Design | Fluid | Mobile
 
Digitale Mobilmachung - Wege zum mobilen Internetangebot
Digitale Mobilmachung - Wege zum mobilen Internetangebot Digitale Mobilmachung - Wege zum mobilen Internetangebot
Digitale Mobilmachung - Wege zum mobilen Internetangebot
 
WCAG 2.0 mehr als nur ein Standard, Synergien zwischen Usability und Accessib...
WCAG 2.0 mehr als nur ein Standard, Synergien zwischen Usability und Accessib...WCAG 2.0 mehr als nur ein Standard, Synergien zwischen Usability und Accessib...
WCAG 2.0 mehr als nur ein Standard, Synergien zwischen Usability und Accessib...
 
design
designdesign
design
 
Web Design Trends 2011
Web Design Trends 2011Web Design Trends 2011
Web Design Trends 2011
 
Responsive design
Responsive designResponsive design
Responsive design
 
Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...
Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...
Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...
 
Responsive Design by Peter Grosskopf
Responsive Design by Peter GrosskopfResponsive Design by Peter Grosskopf
Responsive Design by Peter Grosskopf
 
datenwerk Kochbuch: Webdesign- Trends 2014 (de)
datenwerk Kochbuch: Webdesign- Trends 2014  (de)datenwerk Kochbuch: Webdesign- Trends 2014  (de)
datenwerk Kochbuch: Webdesign- Trends 2014 (de)
 
Creasoft c-Day 2009 - Webtechnologien der Zukunft
Creasoft c-Day 2009 - Webtechnologien der ZukunftCreasoft c-Day 2009 - Webtechnologien der Zukunft
Creasoft c-Day 2009 - Webtechnologien der Zukunft
 
Sencha Touch und PhoneGap
Sencha Touch und PhoneGapSencha Touch und PhoneGap
Sencha Touch und PhoneGap
 
Ergosign-wpf-ui-development-best-practices-dotnet
Ergosign-wpf-ui-development-best-practices-dotnetErgosign-wpf-ui-development-best-practices-dotnet
Ergosign-wpf-ui-development-best-practices-dotnet
 
Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen
Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, NotizenWireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen
Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen
 
Cross Plattform Entwicklung für Mobile Anwendungen
Cross Plattform Entwicklung für Mobile AnwendungenCross Plattform Entwicklung für Mobile Anwendungen
Cross Plattform Entwicklung für Mobile Anwendungen
 
German Web Usability Training
German Web Usability TrainingGerman Web Usability Training
German Web Usability Training
 
WP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & WordpressWP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & Wordpress
 
Responsive Design
Responsive DesignResponsive Design
Responsive Design
 

Plus de Peter Rozek

How to win Stakeholders, Design needs Leadership
How to win Stakeholders, Design needs Leadership How to win Stakeholders, Design needs Leadership
How to win Stakeholders, Design needs Leadership Peter Rozek
 
Persona driven agile development
Persona driven agile developmentPersona driven agile development
Persona driven agile developmentPeter Rozek
 
Cross Device Experience with HTML Prototyping
Cross Device Experience with HTML PrototypingCross Device Experience with HTML Prototyping
Cross Device Experience with HTML PrototypingPeter Rozek
 
Create User Centric UI-Animations
Create User Centric UI-AnimationsCreate User Centric UI-Animations
Create User Centric UI-AnimationsPeter Rozek
 
Responsive Experience und das Continuum of Screens
Responsive Experience und das Continuum of ScreensResponsive Experience und das Continuum of Screens
Responsive Experience und das Continuum of ScreensPeter Rozek
 
Responsive Content Experience
Responsive Content ExperienceResponsive Content Experience
Responsive Content ExperiencePeter Rozek
 
Device Agnostic: Geräteunabhängiges Design als UX Grundlage
Device Agnostic: Geräteunabhängiges Design als UX GrundlageDevice Agnostic: Geräteunabhängiges Design als UX Grundlage
Device Agnostic: Geräteunabhängiges Design als UX GrundlagePeter Rozek
 
Search Experience Optimization, Nutzerfokus statt Silodenken
Search Experience Optimization, Nutzerfokus statt SilodenkenSearch Experience Optimization, Nutzerfokus statt Silodenken
Search Experience Optimization, Nutzerfokus statt SilodenkenPeter Rozek
 
THE UX OF DATA - VISUALIZATION RESPONSIVE
THE UX OF DATA - VISUALIZATION RESPONSIVETHE UX OF DATA - VISUALIZATION RESPONSIVE
THE UX OF DATA - VISUALIZATION RESPONSIVEPeter Rozek
 
Designing the Priority, Performance ist User Experience
Designing the Priority, Performance ist User ExperienceDesigning the Priority, Performance ist User Experience
Designing the Priority, Performance ist User ExperiencePeter Rozek
 
Hassliebe Onlineformulare, Enhance your Form for better UX
Hassliebe Onlineformulare, Enhance your Form for better UXHassliebe Onlineformulare, Enhance your Form for better UX
Hassliebe Onlineformulare, Enhance your Form for better UXPeter Rozek
 
DESIGN THE PRIORITY, PERFORMANCE 
AND UX
DESIGN THE PRIORITY, PERFORMANCE 
AND UXDESIGN THE PRIORITY, PERFORMANCE 
AND UX
DESIGN THE PRIORITY, PERFORMANCE 
AND UXPeter Rozek
 
The UX of DATA: Responsive Datenvisualisierung mit jQuery
The UX of DATA: Responsive Datenvisualisierung mit jQueryThe UX of DATA: Responsive Datenvisualisierung mit jQuery
The UX of DATA: Responsive Datenvisualisierung mit jQueryPeter Rozek
 
jQuery: Accessibility, Mobile und Responsive
jQuery: Accessibility, Mobile und ResponsivejQuery: Accessibility, Mobile und Responsive
jQuery: Accessibility, Mobile und ResponsivePeter Rozek
 
Performance and UX
Performance and UXPerformance and UX
Performance and UXPeter Rozek
 
Responsive Navigation Patterns, UX and Guidelines
Responsive Navigation Patterns, UX and GuidelinesResponsive Navigation Patterns, UX and Guidelines
Responsive Navigation Patterns, UX and GuidelinesPeter Rozek
 
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive WebdesignThe Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive WebdesignPeter Rozek
 
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive WebdesignThe Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive WebdesignPeter Rozek
 
Online / Offline
Online / OfflineOnline / Offline
Online / OfflinePeter Rozek
 
Hightway to Hell - Responsive Webdesign Testen
Hightway to Hell - Responsive Webdesign TestenHightway to Hell - Responsive Webdesign Testen
Hightway to Hell - Responsive Webdesign TestenPeter Rozek
 

Plus de Peter Rozek (20)

How to win Stakeholders, Design needs Leadership
How to win Stakeholders, Design needs Leadership How to win Stakeholders, Design needs Leadership
How to win Stakeholders, Design needs Leadership
 
Persona driven agile development
Persona driven agile developmentPersona driven agile development
Persona driven agile development
 
Cross Device Experience with HTML Prototyping
Cross Device Experience with HTML PrototypingCross Device Experience with HTML Prototyping
Cross Device Experience with HTML Prototyping
 
Create User Centric UI-Animations
Create User Centric UI-AnimationsCreate User Centric UI-Animations
Create User Centric UI-Animations
 
Responsive Experience und das Continuum of Screens
Responsive Experience und das Continuum of ScreensResponsive Experience und das Continuum of Screens
Responsive Experience und das Continuum of Screens
 
Responsive Content Experience
Responsive Content ExperienceResponsive Content Experience
Responsive Content Experience
 
Device Agnostic: Geräteunabhängiges Design als UX Grundlage
Device Agnostic: Geräteunabhängiges Design als UX GrundlageDevice Agnostic: Geräteunabhängiges Design als UX Grundlage
Device Agnostic: Geräteunabhängiges Design als UX Grundlage
 
Search Experience Optimization, Nutzerfokus statt Silodenken
Search Experience Optimization, Nutzerfokus statt SilodenkenSearch Experience Optimization, Nutzerfokus statt Silodenken
Search Experience Optimization, Nutzerfokus statt Silodenken
 
THE UX OF DATA - VISUALIZATION RESPONSIVE
THE UX OF DATA - VISUALIZATION RESPONSIVETHE UX OF DATA - VISUALIZATION RESPONSIVE
THE UX OF DATA - VISUALIZATION RESPONSIVE
 
Designing the Priority, Performance ist User Experience
Designing the Priority, Performance ist User ExperienceDesigning the Priority, Performance ist User Experience
Designing the Priority, Performance ist User Experience
 
Hassliebe Onlineformulare, Enhance your Form for better UX
Hassliebe Onlineformulare, Enhance your Form for better UXHassliebe Onlineformulare, Enhance your Form for better UX
Hassliebe Onlineformulare, Enhance your Form for better UX
 
DESIGN THE PRIORITY, PERFORMANCE 
AND UX
DESIGN THE PRIORITY, PERFORMANCE 
AND UXDESIGN THE PRIORITY, PERFORMANCE 
AND UX
DESIGN THE PRIORITY, PERFORMANCE 
AND UX
 
The UX of DATA: Responsive Datenvisualisierung mit jQuery
The UX of DATA: Responsive Datenvisualisierung mit jQueryThe UX of DATA: Responsive Datenvisualisierung mit jQuery
The UX of DATA: Responsive Datenvisualisierung mit jQuery
 
jQuery: Accessibility, Mobile und Responsive
jQuery: Accessibility, Mobile und ResponsivejQuery: Accessibility, Mobile und Responsive
jQuery: Accessibility, Mobile und Responsive
 
Performance and UX
Performance and UXPerformance and UX
Performance and UX
 
Responsive Navigation Patterns, UX and Guidelines
Responsive Navigation Patterns, UX and GuidelinesResponsive Navigation Patterns, UX and Guidelines
Responsive Navigation Patterns, UX and Guidelines
 
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive WebdesignThe Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
 
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive WebdesignThe Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
 
Online / Offline
Online / OfflineOnline / Offline
Online / Offline
 
Hightway to Hell - Responsive Webdesign Testen
Hightway to Hell - Responsive Webdesign TestenHightway to Hell - Responsive Webdesign Testen
Hightway to Hell - Responsive Webdesign Testen
 

RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices