Suche senden
Hochladen
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
•
7 gefällt mir
•
3,654 views
Peter Rozek
Folgen
Design
Melden
Teilen
Melden
Teilen
1 von 102
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
Responsive Navigation Patterns, UX und Guidelines (Webdeveloper Week 2015)
Responsive Navigation Patterns, UX und Guidelines (Webdeveloper Week 2015)
Peter Rozek
Web Design - Inhalte, Interfaces und Interaktion
Web Design - Inhalte, Interfaces und Interaktion
Björn Wilmsmann
Going Mobile: Überblick über Mobile Web
Going Mobile: Überblick über Mobile Web
ch.ch
Responsive Navigation Patterns, UX und Guidelines
Responsive Navigation Patterns, UX und Guidelines
Peter Rozek
Responsive Navigation Patterns - UX und Guidelines
Responsive Navigation Patterns - UX und Guidelines
Peter Rozek
Responsive Navigation Patterns, UX und Guidelines (Webinale 2015)
Responsive Navigation Patterns, UX und Guidelines (Webinale 2015)
Peter Rozek
Mobile User Experience: Entwicklung von benutzerfreundlichen mobilen Websites...
Mobile User Experience: Entwicklung von benutzerfreundlichen mobilen Websites...
usability.de
UI Design Patterns für Navigationssysteme auf mobilen Geräten
UI Design Patterns für Navigationssysteme auf mobilen Geräten
Rainer Gibbert
Empfohlen
Responsive Navigation Patterns, UX und Guidelines (Webdeveloper Week 2015)
Responsive Navigation Patterns, UX und Guidelines (Webdeveloper Week 2015)
Peter Rozek
Web Design - Inhalte, Interfaces und Interaktion
Web Design - Inhalte, Interfaces und Interaktion
Björn Wilmsmann
Going Mobile: Überblick über Mobile Web
Going Mobile: Überblick über Mobile Web
ch.ch
Responsive Navigation Patterns, UX und Guidelines
Responsive Navigation Patterns, UX und Guidelines
Peter Rozek
Responsive Navigation Patterns - UX und Guidelines
Responsive Navigation Patterns - UX und Guidelines
Peter Rozek
Responsive Navigation Patterns, UX und Guidelines (Webinale 2015)
Responsive Navigation Patterns, UX und Guidelines (Webinale 2015)
Peter Rozek
Mobile User Experience: Entwicklung von benutzerfreundlichen mobilen Websites...
Mobile User Experience: Entwicklung von benutzerfreundlichen mobilen Websites...
usability.de
UI Design Patterns für Navigationssysteme auf mobilen Geräten
UI Design Patterns für Navigationssysteme auf mobilen Geräten
Rainer Gibbert
SEO Produktspezifikation für RWD
SEO Produktspezifikation für RWD
Conny Stier
IA Konferenz München 2011
IA Konferenz München 2011
Alexander Beck
JavaScript und trotzdem Softwerker
JavaScript und trotzdem Softwerker
Dennis Wilson
Responsive Design | Fluid | Mobile
Responsive Design | Fluid | Mobile
CS2 AG
Digitale Mobilmachung - Wege zum mobilen Internetangebot
Digitale Mobilmachung - Wege zum mobilen Internetangebot
Mann beißt Hund Agentur für Kommunikation
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
design
design
Nicolette Silva
Web Design Trends 2011
Web Design Trends 2011
Vitaly Friedman
Responsive design
Responsive design
Thomas Bähr
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 Grosskopf
Peter Grosskopf
datenwerk Kochbuch: Webdesign- Trends 2014 (de)
datenwerk Kochbuch: Webdesign- Trends 2014 (de)
datenwerk innovationsagentur
Creasoft c-Day 2009 - Webtechnologien der Zukunft
Creasoft c-Day 2009 - Webtechnologien der Zukunft
Creasoft AG
Sencha Touch und PhoneGap
Sencha Touch und PhoneGap
Indiginox
Ergosign-wpf-ui-development-best-practices-dotnet
Ergosign-wpf-ui-development-best-practices-dotnet
Ergosign GmbH
Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen
Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen
Webmontag MRN
Cross Plattform Entwicklung für Mobile Anwendungen
Cross Plattform Entwicklung für Mobile Anwendungen
Markus Eiglsperger
German Web Usability Training
German Web Usability Training
Paulina
WP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & Wordpress
KirstenSchelper
Responsive Design
Responsive Design
Mario Fink
How to win Stakeholders, Design needs Leadership
How to win Stakeholders, Design needs Leadership
Peter Rozek
Persona driven agile development
Persona driven agile development
Peter Rozek
Weitere ähnliche Inhalte
Ähnlich wie RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
SEO Produktspezifikation für RWD
SEO Produktspezifikation für RWD
Conny Stier
IA Konferenz München 2011
IA Konferenz München 2011
Alexander Beck
JavaScript und trotzdem Softwerker
JavaScript und trotzdem Softwerker
Dennis Wilson
Responsive Design | Fluid | Mobile
Responsive Design | Fluid | Mobile
CS2 AG
Digitale Mobilmachung - Wege zum mobilen Internetangebot
Digitale Mobilmachung - Wege zum mobilen Internetangebot
Mann beißt Hund Agentur für Kommunikation
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
design
design
Nicolette Silva
Web Design Trends 2011
Web Design Trends 2011
Vitaly Friedman
Responsive design
Responsive design
Thomas Bähr
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 Grosskopf
Peter Grosskopf
datenwerk Kochbuch: Webdesign- Trends 2014 (de)
datenwerk Kochbuch: Webdesign- Trends 2014 (de)
datenwerk innovationsagentur
Creasoft c-Day 2009 - Webtechnologien der Zukunft
Creasoft c-Day 2009 - Webtechnologien der Zukunft
Creasoft AG
Sencha Touch und PhoneGap
Sencha Touch und PhoneGap
Indiginox
Ergosign-wpf-ui-development-best-practices-dotnet
Ergosign-wpf-ui-development-best-practices-dotnet
Ergosign GmbH
Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen
Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen
Webmontag MRN
Cross Plattform Entwicklung für Mobile Anwendungen
Cross Plattform Entwicklung für Mobile Anwendungen
Markus Eiglsperger
German Web Usability Training
German Web Usability Training
Paulina
WP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & Wordpress
KirstenSchelper
Responsive Design
Responsive Design
Mario Fink
Ähnlich wie RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
(20)
SEO Produktspezifikation für RWD
SEO Produktspezifikation für RWD
IA Konferenz München 2011
IA Konferenz München 2011
JavaScript und trotzdem Softwerker
JavaScript und trotzdem Softwerker
Responsive Design | Fluid | Mobile
Responsive Design | Fluid | Mobile
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...
design
design
Web Design Trends 2011
Web Design Trends 2011
Responsive design
Responsive design
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 Grosskopf
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 Zukunft
Sencha Touch und PhoneGap
Sencha Touch und PhoneGap
Ergosign-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, Notizen
Cross Plattform Entwicklung für Mobile Anwendungen
Cross Plattform Entwicklung für Mobile Anwendungen
German Web Usability Training
German Web Usability Training
WP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & Wordpress
Responsive Design
Responsive Design
Mehr von Peter Rozek
How to win Stakeholders, Design needs Leadership
How to win Stakeholders, Design needs Leadership
Peter Rozek
Persona driven agile development
Persona driven agile development
Peter Rozek
Cross Device Experience with HTML Prototyping
Cross Device Experience with HTML Prototyping
Peter Rozek
Create User Centric UI-Animations
Create User Centric UI-Animations
Peter Rozek
Responsive Experience und das Continuum of Screens
Responsive Experience und das Continuum of Screens
Peter Rozek
Responsive Content Experience
Responsive Content Experience
Peter Rozek
Device Agnostic: Geräteunabhängiges Design als UX Grundlage
Device Agnostic: Geräteunabhängiges Design als UX Grundlage
Peter Rozek
Search Experience Optimization, Nutzerfokus statt Silodenken
Search Experience Optimization, Nutzerfokus statt Silodenken
Peter Rozek
THE UX OF DATA - VISUALIZATION RESPONSIVE
THE UX OF DATA - VISUALIZATION RESPONSIVE
Peter Rozek
Designing the Priority, Performance ist User Experience
Designing the Priority, Performance ist User Experience
Peter Rozek
Hassliebe Onlineformulare, Enhance your Form for better UX
Hassliebe Onlineformulare, Enhance your Form for better UX
Peter Rozek
DESIGN THE PRIORITY, PERFORMANCE AND UX
DESIGN THE PRIORITY, PERFORMANCE AND UX
Peter Rozek
The UX of DATA: Responsive Datenvisualisierung mit jQuery
The UX of DATA: Responsive Datenvisualisierung mit jQuery
Peter Rozek
jQuery: Accessibility, Mobile und Responsive
jQuery: Accessibility, Mobile und Responsive
Peter Rozek
Performance and UX
Performance and UX
Peter Rozek
Responsive Navigation Patterns, UX and Guidelines
Responsive Navigation Patterns, UX and Guidelines
Peter Rozek
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
Peter Rozek
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
Peter Rozek
Online / Offline
Online / Offline
Peter Rozek
Hightway to Hell - Responsive Webdesign Testen
Hightway to Hell - Responsive Webdesign Testen
Peter Rozek
Mehr von Peter Rozek
(20)
How to win Stakeholders, Design needs Leadership
How to win Stakeholders, Design needs Leadership
Persona driven agile development
Persona driven agile development
Cross Device Experience with HTML Prototyping
Cross Device Experience with HTML Prototyping
Create User Centric UI-Animations
Create User Centric UI-Animations
Responsive Experience und das Continuum of Screens
Responsive Experience und das Continuum of Screens
Responsive Content Experience
Responsive Content Experience
Device 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 Silodenken
THE UX OF DATA - VISUALIZATION RESPONSIVE
THE UX OF DATA - VISUALIZATION RESPONSIVE
Designing 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 UX
DESIGN 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 jQuery
jQuery: Accessibility, Mobile und Responsive
jQuery: Accessibility, Mobile und Responsive
Performance and UX
Performance and UX
Responsive 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 Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
Online / Offline
Online / Offline
Hightway to Hell - Responsive Webdesign Testen
Hightway to Hell - Responsive Webdesign Testen
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
1.
RESPONSIVE WEBDESIGN Navigationskonzepte für Mobile Devices
...ich bin Peter Rozek, @Webinale 2012
2.
RESPONSIVE NAVIGATION
...ich bin Peter Rozek, @Webinale 2012
3.
Peter Rozek Senior Developer
bei ECX.IO
4.
1. Was ist
responsive Design? ... und was es nicht ist 2. Responsive Navigation Pattern Usability Konventionen
5.
Was ist RESPONSIVE WEBDESIGN?
6.
Responsive Webdesign ist
KEIN mobile Design!
7.
Responsive vs. Native Flexible
vs. Kontext-Sensitiv
8.
„A flexible grid
(width flexible images) that incorporates media queries to create a responsive, adaptive layout.“ Ethan Marcotte
9.
Adaptives Layout !
10.
Layout = Design
?
11.
Designer vs. Developer
12.
Responsive Design ist
mehr als nur Design...
13.
Responsive ist die
Gestaltung von visuellen Verhalten
14.
Mobile Endgeräte unterliegen anderen
Interaktionsprinzipien
15.
Konsistentes Design
16.
Der grundlegende Aufbau
und Navigationsmechanismen sollen für den Menschen erkennbar bleiben Konsistentes Design
17.
Gute User Experience
und Joy of Use von responsive Design ist abhängig vom Navigationsdesign!
18.
RESPONSIVE NAVIGATION
19.
Skalierbare Navigations Pattern Entwurfsmuster
(englisch: design patterns) sind bewährte Lösungsschablonen
20.
Inszenierung und Interaktion Navigationsmechanismen
brauchen eine Balance zwischen Erkennbarkeit und Funktion.
21.
„Joy of Use“,
das ästetische- emotionale Erlebnis
22.
„An important function
of aesthetics in engineering is the satisfaction of human requirements.“ Lavie, T.; Tractinsky, N.
23.
Navigation und Usability
24.
Beispiele zum „mitnehmen“
25.
Dropdown http://css-tricks.com/convert-menu-to-dropdown/ http://www.fivesimplesteps.com/
26.
27.
28.
29.
Vorteil: • Flexibilität und
Effizienz • Positionierung • nutzt Device UI
30.
Nachteil: • nur eine
Ebene • braucht Javascript
31.
Fly-out Menü http://jasonweaver.name/lab/flexiblenavigation/
32.
33.
34.
35.
Vorteil: • bedienbar • Positionierung
36.
Nachteil: • braucht Javascript •
Perfomance
37.
Fly-out Menü http://www.sony.com
38.
39.
40.
41.
42.
43.
Vorteil: • Übersichtlich • Ästhetisches
Design • Animation folgt hierarchischem Aufbau
44.
Nachteil: Funktioniert nicht mit
einem Windows Phone.
45.
Mega-Menü und fancy jQuery
Sachen http://www.spelsberg.de/
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
Vorteil: • Minimalistisches Design •
Positionierung
64.
Nachteil: Einige Elemente sind
schwer zu erkennen
65.
Sprungmarken und ganz viel
fancy stuff http://adam.co/
66.
67.
68.
69.
70.
71.
Vorteil: • Konsistenz und
Standards • Ästhetisches und minimalistisches Design • Device übergreifend
72.
Nachteil: • braucht Javascript •
Perfomance
73.
Usability-Konventionen für Navigation Icons conventio
= Übereinkunft, Zusammenkunft
74.
Konventionen helfen Nutzern
75.
Konventionen unterstützen Designer und
Entwickler
76.
Drei Linien
77.
Drei Linien
78.
Drei Linien
Verständlich
79.
Listensymbol
80.
Listensymbol
?
81.
Gridsymbol
82.
Gridsymbol
83.
Gridsymbol
nicht eindeutig
84.
Plussymbol
85.
Plussymbol
86.
Plussymbol
Symbol besetzt
87.
Wir brauchen Standards
für Navigations-Icon • Sichtbarkeit • Verständlichkeit • Konventionen
88.
Konventionen ein Beispiel
89.
Facebook-App
90.
Facebook-App auf dem
iPad
91.
... was hat
Barack Obama mit Facebook gemeinsam?
92.
Kampangen-Website http://www.barackobama.com
93.
94.
95.
96.
97.
98.
Vorteil: • Übersichtlich • Ästhetisches
Design • Facebook Konvention
99.
Nachteil: Navigations-Icon ist schwer verständlich
100.
Barack Obama =
Yes we can
101.
Fragen ? twitter: @webinterface E-Mail:
peter.rozek@ecx.io
Jetzt herunterladen