SlideShare una empresa de Scribd logo
1 de 77
Descargar para leer sin conexión
@webinterface
DEVICE AGNOSTIC
Geräteunabhängiges
Design als UX Grundlage
@webinterface
WEBINALE 2016
PETER ROZEK
@webinterface
ÜBER MICH
@webinterface
@webinterface
@webinterface
UX, USABILITY, ACCESSIBILITY,
FRONTEND
@webinterface
WORK @ ECX.IO (DIGITAL AGENCY)
@webinterface
ECX.IO AN IBM COMPANY
@webinterface
WIKIPEDIA
„Agnostizismus ist eine Weltanschauung, die
insbesondere die prinzipielle Begrenztheit
menschlichen Wissens und Verstehens bzw.
Begreifens betont.“
@webinterface
BIS 2007 DENKEN UND
DESIGNEN IN (WEB)SEITEN.
@webinterface
55,2% 39,9% 2,4 % 1,7 %
BROWSER DEZ 2007
Quelle: https://www.browser-statistik.de
@webinterface
MENSCH UND MASCHINE
INTERAKTION GEPRÄGT DURCH DAS
GRAPHICAL USER INTERFACE (GUI)
UND DEM GRUNDPRINZIP
„SEE, POINT AND CLICK“.
@webinterface
DER NUTZUNGSKONTEXT WAR
ÜBERWIEGEND STATIONÄR.
@webinterface
@webinterface
HEUTE HABEN WIR EINE
FORTSCHREITENDE
(DEVICE)
FRAGMENTIERUNG.
@webinterface Bild: http://opensignal.com/reports/2015/08/android-fragmentation/
@webinterface
24093
Quelle: http://opensignal.com/
BEISPIEL ANDRIOD DEVICES:
JAHR 2015 JAHR 2014
18796
Quelle: http://opensignal.com/@webinterface
Quelle: http://opensignal.com/@webinterface
VERGLEICH BETRIEBSSYSTEME:
IOS VS. ANDRIOD
@webinterface
WIR SIND STÄNDIG VERNETZT UND
ONLINE UND NUTZEN
UNTERSCHIEDLICHE DEVICES IN
ABHÄNGIGKEIT VOM
NUTZUNGSKONTEXT.
Bild: https://sportinfrastrukturreport.wordpress.com
@webinterface
UND DAS SIND DIE MITSPIELER.
Bild: https://sportinfrastrukturreport.wordpress.comBild: https://sportinfrastrukturreport.wordpress.com
IPAD PRO: TABLET ODER NOTEBOOK?
Bild: https://sportinfrastrukturreport.wordpress.comBild: https://sportinfrastrukturreport.wordpress.com@webinterface
Bild: https://sportinfrastrukturreport.wordpress.comBild: https://sportinfrastrukturreport.wordpress.com@webinterface
TOUCH ODER KEYBOARD?
@webinterface Grafik: http://www.lukew.com/
@webinterface
2010: ETHAN MARCOTTE
RESPONSIVE WEDDESIGN
@webinterface
@webinterface@webinterface
RESPONSIVE WEDDESIGN
ADRESSIERT (IST) DEVICE AGNOSTIC.
@webinterface
RESPONSIVE WEBDESIGN:
1. EINE URL
2. EIN CONTENT
3. EINE SEITE
@webinterface
UNTERSCHIEDLICHE LÖSUNGEN:
1. ANDERE URL
2. UNTERSCHIEDLICHE SEITEN UND
CONTENT VERSIONEN
3. UNTERSCHIEDLICHE TECHNISCHE
PLATTFORMEN
@webinterface
…WO WIR WIEDER BEI DER
FRAGEMENTIERUNG DURCH
UNTERSCHIEDLICHE LÖSUNGEN 

UND CONTENT VERSIONEN SIND.
@webinterface
RESPONSIVE WEBDESIGN
ADRESSIERT MULTISCREEN
EXPERIENCE.
@webinterface
JEDER VON UNS BESITZT UND NUTZT
UNTERSCHIEDLICHE DEVICES.
@webinterface
MORGENS AUF DEM
WEG ZUR
ARBEIT
IM

BÜRO
MEETING MITTAG

ESSEN
ABENDS 

AUF DER 

COUCH
SEQUENTIALLY NUTZUNG UND
KONTEXT RELEVANTE NUTZUNG.
@webinterface
„People use any platform to do anything“
GILES COLBORNE (COLBORNE 2012)
Bild: https://www.flickr.com/photos/katariinajarvinen/6319346422/sizes/o/
@webinterface
STEPHEN HAY, ZERO INTERFACE
„There is no Mobile Web. There is only The Web,
which we view in different ways. There is also no
Desktop Web. Or Tablet Web.“
@webinterface
DER CONTENT MUSS IM
NUTZUNGSKONTEXT
HANDLUNGSRELEVANT SEIN.
@webinterface
SARITA HARBOUR
„The site you build is not dependent on knowing
what device it is being displayed on.“
@webinterface
SCHLECHTE USER EXPERIENCE FÜHRT
IMMER ZUM GLEICHEN ERGEBNIS.
@webinterface
@webinterface
VON RESPONISVE DESIGN
ZU DEVICE AGNOSTIC
DESIGN.
@webinterface
MULTI-DEVICE EXPERIENCE:
CONTENT CHOREOGRAPHIE
ANGEPASST AM NUTZUNGSKONTEXT.
@webinterface Bild: https://flic.kr/p/2cDDwn
@webinterface
WIR HABEN KEINEN EINFLUSS
WELCHES DEVICE NUTZER
VERWENDEN.
WIR KÖNNEN ABER DEN CONTENT
STEUERN.
@webinterface
OPTIMIERUNG DES CONTENT AUF
PRÄSENTATION UND INTERAKTION.
@webinterface Bild: https://www.flickr.com/photos/hernanpc/11390495316/
@webinterface Quelle/Bild: http://www.lukew.com/ff/entry.asp?1721
ORIENTATION MODE
@webinterface Quelle/Bild: http://www.lukew.com/ff/entry.asp?1721
@webinterface Quelle/Bild: http://www.lukew.com/ff/entry.asp?1721
HYBRID: TOUCH/MOUSE/KEYBOARD
@webinterface Quelle/Bild: http://www.lukew.com/ff/entry.asp?1721
HYBRID: TOUCH/MOUSE/KEYBOARD
@webinterface
BRAD FROST
„Get your content to go anywhere, because it’s
going to go everywhere.“
@webinterface
KAREN MCGRANE
„ It is your mission to get your content out, on
whichever platform, in whichever format your
audience wants to consume it.“
@webinterface
DESIGN

DEVICE AGNOSTIC
IN DER PRAXIS
@webinterface
CONTEXT FIRST
@webinterface
1. CONTENT VS. BILDSCHIRMGRÖßE
2. DESIGN ALS MODULARES SYSTEM
3. DESIGNING FOR TOUCH
4. BROWSER KOMPATIBILITÄT
5. PERFORMANCE
CONTEXT FIRST
@webinterface
MIT DER INHALTSANALYSE STARTEN:
1. CONTENT INVENTORY
2. INTERFACE INVENTORY
3. CONTENT AUDITS
@webinterface
CONTENT INVENTORY: QUANTITATIVE
DOKUMANTION ÜBER DEN INHALT.
BILD/Image: http://bradfrost.com/blog/post/interface-inventory/
@webinterface
INTERFACE INVENTORY (VORHER)
BILD/Image: http://bradfrost.com/blog/post/interface-inventory/
@webinterface
INTERFACE INVENTORY (NACHHER)
BILD/Image: http://bradfrost.com/blog/post/interface-inventory/
@webinterface
ZIEL DES CONTENT AUDIT:
WELCHE INHALTE SIND FÜR DEN
NUTZUNGSKONTEXT
HANDLUNGSRELEVANT?
@webinterface
VIER STUFEN FÜR DIE

HANDLUNGSRELEVANT:
1. Ersteindruck
2. Gesamteindruck
3. Wiederbesuchsbereitschaft
4. Weiterempfehlungsbereitschaft
Source/Image: https://de.wikipedia.org/wiki/Geschichte_des_Buchdrucks
KILL BAD IDEAS WITH RAPID
PROTOTYPING.
@webinterface
@webinterface
1. IDENTIFIZIEREN SIE DAS PROBLEM.
2. TESTEN SIE IDEEN UM DAS
PROBLEM ZU LÖSEN.
3. OPTIMIEREN SIE DIE USER
EXPERIENCE IN BEZUG AUF DEN
NUTZUNGSKONTEXT.
@webinterface
CONTENT BASED BREAKPOINTS:
BREAKPOINTS IN ABHÄNGIGKEIT VOM
CONTENT SETZEN UND NICHT NACH
DEM DEVICE.
@webinterface
MAJOR- UND MINOR-BREAKPOINTS
MAJOR BREAKPOINT 1
320
MAJOR BREAKPOINT 2
720
MAJOR BREAKPOINT 3
1100
MAJOR BREAKPOINT

MAJOR LAYOUT CHANGES
645
MINOR BREAKPOINT
780
MINOR BREAKPOINT
MINOR BREAKPOINT

CONTENT RELATED TWEAKS
@webinterface Quelle/Bild: http://www.lukew.com/ff/entry.asp?1721
JOSH CLARK
„New rule: every desktop design has to go finger
friendly.“
@webinterface
KEINE SEITEN DESIGNEN SONDERN EIN
MODULARES DESIGN SYSTEMS.
@webinterface
VORTEILE EINES MODALEREN DESIGN
SYSTEM:
1. KONSISTENTE UX UND DESIGN
2. GERÄTEUNABHÄNGIG
3. BESSERE WERTBARKEIT
4. SCHNELLES TIME TO MARKET
@webinterface
TEMPLATES DEFINIEREN
FOOTER
HEADER & NAV
FEATURES
FEATURES

CATEGORIES
FEATURES

PRODUCTS
FOOTER
CATEGORIES
HEADER & NAV
FOOTER
FILTER

&SEARCH
PRODUCTS
HEADER & NAV
FOOTER
RELATED

PRODUCTS
ADDITIONAL INFO
GALLERY
HEADER & NAV
STARTSEITE KATEGORIEN PRODUKTE PRODUKT DETAIL
@webinterface
FOOTER
FILTER

&SEARCH
PRODUCTS
HEADER & NAV
PROD PROD PROD PROD
PROD PROD PROD PROD
PROD PROD PROD PROD
FOOTER
RELATED

PRODUCTS
ADDITIONAL INFO
GALLERY
HEADER & NAV
PROD PROD PROD PROD
FOOTER
CATEGORIES
HEADER & NAV
CATEG CATEG CATEG CATEG
CATEG CATEG
PRODCATEGORY
CATEGORY
CATEGORY
FOOTER
HEADER & NAV
FEATURES
FEATURES

CATEGORIES
FEATURES

PRODUCTS
PROD PROD PROD PROD
CATEG CATEG
CATEGORY
CATEGORY
STARTSEITE KATEGORIEN PRODUKTE PRODUKT DETAIL
RASTER
@webinterface
FOOTER
HEADER & NAV
FEATURES
FEATURES

CATEGORIES
FEATURES

PRODUCTS
FOOTER
HEADER &
NAV
FEATURES
FEATURES

CATEGORIES
FEATURES

PRODUCTS
PROD PROD
PROD PROD
CATEGORY
CATEG CATEG
HEADER &
NAV
FEATURES
FOOTER
FOOTER
HEADER & NAV
FEATURES
FEATURES

CATEGORIES
FEATURES

PRODUCTS
PROD PROD PROD PROD
CATEG CATEG
CATEGORY
CATEGORY
CROSS DEVICE DARSTELLUNG
STARTSEITE DESKTOP STARTSEITE MOBILE
@webinterface
PROD PROD
PROD PROD
CATEGORY
CATEG CATEG
HEADER &
NAV
FEATURES
FOOTER
FOOTER
HEADER & NAV
FEATURES
FEATURES

CATEGORIES
FEATURES

PRODUCTS
PROD PROD PROD PROD
CATEG CATEG
CATEGORY
CATEGORY
HEADER & NAV
FOOTER
HEADER &
NAV
FOOTER
CROSS DEVICE DARSTELLUNG
@webinterface
HEADER & NAV
FOOTER
HEADER &
NAV
FOOTER
PATTERN IDENTIFZIEREN
@webinterface
FEATURES
FEATURES
PRODUCTS
SINGLE
PRODUCTS
DESKTOP MOBILE
PATTERN LIBRARY ERSTELLEN
@webinterface Quelle/Image: http://mediatemple.net
Frontend Styleguide
@webinterface
RESUMÉ
@webinterface
DEVICE AGNOSTIC DESIGN
BEDEUTET EINE CONTEXT
FIRST STRATEGIE ZU
HABEN.
@webinterface
FOKUS AUF DEN CONTENT
UND NUTZUNGSKONTEXT
RICHTEN.
@webinterface
CONTENT BASED
BREAKPOINTS DEFINIEREN.
@webinterface
EIN DESIGN SYSTEM
ENTWICKLEN UND KEINE
MODUL SAMMLUNG.
@webinterface
KOMPLEXITÄT MINIMIEREN
@webinterface
KILL BAD IDEAS WITH RAPID
PROTOTYPING.
@webinterface
INTERDISZIPLINÄRE
TEAMS BILDEN, UND
T-SHAPE SKILLS FÖRDERN.
VIELEN DANK
…FÜR Ellen
@webinterface
@webinterface
peter.rozek@ecx.io
@webinterface
FRAGEN ?

Más contenido relacionado

Destacado

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
 
THE UX OF DATA - VISUALIZATION RESPONSIVE
THE UX OF DATA - VISUALIZATION RESPONSIVETHE UX OF DATA - VISUALIZATION RESPONSIVE
THE UX OF DATA - VISUALIZATION RESPONSIVEPeter 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
 
Search Experience Optimization, Nutzerfokus statt Silodenken
Search Experience Optimization, Nutzerfokus statt SilodenkenSearch Experience Optimization, Nutzerfokus statt Silodenken
Search Experience Optimization, Nutzerfokus statt SilodenkenPeter 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
 
Responsive Navigation Patterns, UX und Guidelines (Webdeveloper Week 2015)
Responsive Navigation Patterns, UX und Guidelines (Webdeveloper Week 2015)Responsive Navigation Patterns, UX und Guidelines (Webdeveloper Week 2015)
Responsive Navigation Patterns, UX und Guidelines (Webdeveloper Week 2015)Peter Rozek
 
Paul wu zbrush_workshop_cht
Paul wu zbrush_workshop_chtPaul wu zbrush_workshop_cht
Paul wu zbrush_workshop_chtChris Chen
 
jQuery: Accessibility, Mobile und Responsive
jQuery: Accessibility, Mobile und ResponsivejQuery: Accessibility, Mobile und Responsive
jQuery: Accessibility, Mobile und ResponsivePeter Rozek
 
Ani chat 02_louis_visualcreation
Ani chat 02_louis_visualcreationAni chat 02_louis_visualcreation
Ani chat 02_louis_visualcreationChris Chen
 
Animation in UI UX
Animation in UI UXAnimation in UI UX
Animation in UI UXChris Chen
 
Putting Your UIs In Motion On The Web (Animation & UX)
Putting Your UIs In Motion On The Web (Animation & UX)Putting Your UIs In Motion On The Web (Animation & UX)
Putting Your UIs In Motion On The Web (Animation & UX)Val Head
 
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
 
Performance and UX
Performance and UXPerformance and UX
Performance and UXPeter Rozek
 
[UX Series] 6 - Animation principles
[UX Series] 6 - Animation principles[UX Series] 6 - Animation principles
[UX Series] 6 - Animation principlesPhuong Hoang Vu
 
Animating the UI - Angie Terrell
Animating the UI - Angie TerrellAnimating the UI - Angie Terrell
Animating the UI - Angie TerrellAngie Terrell
 
Measuring What Matters: A UX Approach to Metrics :: UX Days Tokyo [April 2015]
Measuring What Matters: A UX Approach to Metrics :: UX Days Tokyo [April 2015]Measuring What Matters: A UX Approach to Metrics :: UX Days Tokyo [April 2015]
Measuring What Matters: A UX Approach to Metrics :: UX Days Tokyo [April 2015]Kate Rutter
 

Destacado (20)

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
 
THE UX OF DATA - VISUALIZATION RESPONSIVE
THE UX OF DATA - VISUALIZATION RESPONSIVETHE UX OF DATA - VISUALIZATION RESPONSIVE
THE UX OF DATA - VISUALIZATION RESPONSIVE
 
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
 
Search Experience Optimization, Nutzerfokus statt Silodenken
Search Experience Optimization, Nutzerfokus statt SilodenkenSearch Experience Optimization, Nutzerfokus statt Silodenken
Search Experience Optimization, Nutzerfokus statt Silodenken
 
Cross Device Experience with HTML Prototyping
Cross Device Experience with HTML PrototypingCross Device Experience with HTML Prototyping
Cross Device Experience with HTML Prototyping
 
Responsive Navigation Patterns, UX und Guidelines (Webdeveloper Week 2015)
Responsive Navigation Patterns, UX und Guidelines (Webdeveloper Week 2015)Responsive Navigation Patterns, UX und Guidelines (Webdeveloper Week 2015)
Responsive Navigation Patterns, UX und Guidelines (Webdeveloper Week 2015)
 
Paul wu zbrush_workshop_cht
Paul wu zbrush_workshop_chtPaul wu zbrush_workshop_cht
Paul wu zbrush_workshop_cht
 
jQuery: Accessibility, Mobile und Responsive
jQuery: Accessibility, Mobile und ResponsivejQuery: Accessibility, Mobile und Responsive
jQuery: Accessibility, Mobile und Responsive
 
Responsive Design
Responsive DesignResponsive Design
Responsive Design
 
Ani chat 02_louis_visualcreation
Ani chat 02_louis_visualcreationAni chat 02_louis_visualcreation
Ani chat 02_louis_visualcreation
 
Content Amid Chaos
Content Amid ChaosContent Amid Chaos
Content Amid Chaos
 
Animation in UI UX
Animation in UI UXAnimation in UI UX
Animation in UI UX
 
Animation in UX
Animation in UXAnimation in UX
Animation in UX
 
Putting Your UIs In Motion On The Web (Animation & UX)
Putting Your UIs In Motion On The Web (Animation & UX)Putting Your UIs In Motion On The Web (Animation & UX)
Putting Your UIs In Motion On The Web (Animation & 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
 
Performance and UX
Performance and UXPerformance and UX
Performance and UX
 
[UX Series] 6 - Animation principles
[UX Series] 6 - Animation principles[UX Series] 6 - Animation principles
[UX Series] 6 - Animation principles
 
Animating the UI - Angie Terrell
Animating the UI - Angie TerrellAnimating the UI - Angie Terrell
Animating the UI - Angie Terrell
 
Measuring What Matters: A UX Approach to Metrics :: UX Days Tokyo [April 2015]
Measuring What Matters: A UX Approach to Metrics :: UX Days Tokyo [April 2015]Measuring What Matters: A UX Approach to Metrics :: UX Days Tokyo [April 2015]
Measuring What Matters: A UX Approach to Metrics :: UX Days Tokyo [April 2015]
 

Similar a Device Agnostic: Geräteunabhängiges Design als UX Grundlage

Online / Offline
Online / OfflineOnline / Offline
Online / OfflinePeter Rozek
 
What about Accessibility of Next Generation User Interfaces for People with D...
What about Accessibility of Next Generation User Interfaces for People with D...What about Accessibility of Next Generation User Interfaces for People with D...
What about Accessibility of Next Generation User Interfaces for People with D...Sven Jenzer
 
Offline-first Architekturen: Wer bitte braucht schon Internet
Offline-first Architekturen: Wer bitte braucht schon InternetOffline-first Architekturen: Wer bitte braucht schon Internet
Offline-first Architekturen: Wer bitte braucht schon InternetOPEN KNOWLEDGE GmbH
 
Webseiten für mobile Geräte - M-Days - Frankfurt 27.01.2011
Webseiten für mobile Geräte - M-Days - Frankfurt 27.01.2011Webseiten für mobile Geräte - M-Days - Frankfurt 27.01.2011
Webseiten für mobile Geräte - M-Days - Frankfurt 27.01.2011Patrick Lauke
 
Responsive Webdesign Process
Responsive Webdesign ProcessResponsive Webdesign Process
Responsive Webdesign ProcessSven Wolfermann
 
Mobile- & Offline-First: Mehr als nur Buzzword-Bingo
Mobile- & Offline-First: Mehr als nur Buzzword-BingoMobile- & Offline-First: Mehr als nur Buzzword-Bingo
Mobile- & Offline-First: Mehr als nur Buzzword-BingoOPEN KNOWLEDGE GmbH
 
Responsive Webdesign - Unter der Haube
Responsive Webdesign - Unter der HaubeResponsive Webdesign - Unter der Haube
Responsive Webdesign - Unter der Haubefalconwhite
 
Responsive Design | Fluid | Mobile
Responsive Design | Fluid | MobileResponsive Design | Fluid | Mobile
Responsive Design | Fluid | MobileCS2 AG
 
Webstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen BereichWebstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen BereichPeter Rozek
 
Einführung Barrierefreiheit Berufsschule
Einführung Barrierefreiheit BerufsschuleEinführung Barrierefreiheit Berufsschule
Einführung Barrierefreiheit Berufsschulehalfman.halfpixel
 
LESSONS LEARNED FROM THE DESIGN OF AN USER INTERFACE
LESSONS LEARNED FROM THE DESIGN OF AN USER INTERFACELESSONS LEARNED FROM THE DESIGN OF AN USER INTERFACE
LESSONS LEARNED FROM THE DESIGN OF AN USER INTERFACEdjesse
 
Smart Clients Interaktionsparadigmen Im Nutzungskontext Webbrowser (Paper)
Smart Clients   Interaktionsparadigmen Im Nutzungskontext Webbrowser (Paper)Smart Clients   Interaktionsparadigmen Im Nutzungskontext Webbrowser (Paper)
Smart Clients Interaktionsparadigmen Im Nutzungskontext Webbrowser (Paper)JanGroenefeld
 
iOS Apps mit Webtechnologien erstellen
iOS Apps mit Webtechnologien erstelleniOS Apps mit Webtechnologien erstellen
iOS Apps mit Webtechnologien erstellenMichael Kühnel
 
Digital Storytelling Slides - Mediencamp Wien November 2014
Digital Storytelling Slides - Mediencamp Wien November 2014Digital Storytelling Slides - Mediencamp Wien November 2014
Digital Storytelling Slides - Mediencamp Wien November 2014Rolf Mistelbacher
 
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
 
Webinar: Responsive Design
Webinar: Responsive DesignWebinar: Responsive Design
Webinar: Responsive Designkuehlhaus AG
 
Top 10 Internet Trends 2006
Top 10 Internet Trends 2006Top 10 Internet Trends 2006
Top 10 Internet Trends 2006Jürg Stuker
 

Similar a Device Agnostic: Geräteunabhängiges Design als UX Grundlage (20)

Online / Offline
Online / OfflineOnline / Offline
Online / Offline
 
What about Accessibility of Next Generation User Interfaces for People with D...
What about Accessibility of Next Generation User Interfaces for People with D...What about Accessibility of Next Generation User Interfaces for People with D...
What about Accessibility of Next Generation User Interfaces for People with D...
 
Offline-first Architekturen: Wer bitte braucht schon Internet
Offline-first Architekturen: Wer bitte braucht schon InternetOffline-first Architekturen: Wer bitte braucht schon Internet
Offline-first Architekturen: Wer bitte braucht schon Internet
 
Webseiten für mobile Geräte - M-Days - Frankfurt 27.01.2011
Webseiten für mobile Geräte - M-Days - Frankfurt 27.01.2011Webseiten für mobile Geräte - M-Days - Frankfurt 27.01.2011
Webseiten für mobile Geräte - M-Days - Frankfurt 27.01.2011
 
Responsive Webdesign Process
Responsive Webdesign ProcessResponsive Webdesign Process
Responsive Webdesign Process
 
Mobile- & Offline-First: Mehr als nur Buzzword-Bingo
Mobile- & Offline-First: Mehr als nur Buzzword-BingoMobile- & Offline-First: Mehr als nur Buzzword-Bingo
Mobile- & Offline-First: Mehr als nur Buzzword-Bingo
 
Responsive Webdesign - Unter der Haube
Responsive Webdesign - Unter der HaubeResponsive Webdesign - Unter der Haube
Responsive Webdesign - Unter der Haube
 
Responsive Design | Fluid | Mobile
Responsive Design | Fluid | MobileResponsive Design | Fluid | Mobile
Responsive Design | Fluid | Mobile
 
Webstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen BereichWebstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen Bereich
 
Einführung Barrierefreiheit Berufsschule
Einführung Barrierefreiheit BerufsschuleEinführung Barrierefreiheit Berufsschule
Einführung Barrierefreiheit Berufsschule
 
design
designdesign
design
 
Web Design Trends 2011
Web Design Trends 2011Web Design Trends 2011
Web Design Trends 2011
 
LESSONS LEARNED FROM THE DESIGN OF AN USER INTERFACE
LESSONS LEARNED FROM THE DESIGN OF AN USER INTERFACELESSONS LEARNED FROM THE DESIGN OF AN USER INTERFACE
LESSONS LEARNED FROM THE DESIGN OF AN USER INTERFACE
 
Smart Clients Interaktionsparadigmen Im Nutzungskontext Webbrowser (Paper)
Smart Clients   Interaktionsparadigmen Im Nutzungskontext Webbrowser (Paper)Smart Clients   Interaktionsparadigmen Im Nutzungskontext Webbrowser (Paper)
Smart Clients Interaktionsparadigmen Im Nutzungskontext Webbrowser (Paper)
 
iOS Apps mit Webtechnologien erstellen
iOS Apps mit Webtechnologien erstelleniOS Apps mit Webtechnologien erstellen
iOS Apps mit Webtechnologien erstellen
 
Digital Storytelling Slides - Mediencamp Wien November 2014
Digital Storytelling Slides - Mediencamp Wien November 2014Digital Storytelling Slides - Mediencamp Wien November 2014
Digital Storytelling Slides - Mediencamp Wien November 2014
 
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
 
Webinar: Responsive Design
Webinar: Responsive DesignWebinar: Responsive Design
Webinar: Responsive Design
 
Top 10 Internet Trends 2006
Top 10 Internet Trends 2006Top 10 Internet Trends 2006
Top 10 Internet Trends 2006
 
Java EE meets Microservices
Java EE meets MicroservicesJava EE meets Microservices
Java EE meets Microservices
 

Más 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
 
DESIGN THE PRIORITY, PERFORMANCE 
AND UX
DESIGN THE PRIORITY, PERFORMANCE 
AND UXDESIGN THE PRIORITY, PERFORMANCE 
AND UX
DESIGN THE PRIORITY, 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
 
Responsive Navigation Patterns, UX und Guidelines (Webinale 2015)
Responsive Navigation Patterns, UX und Guidelines (Webinale 2015)Responsive Navigation Patterns, UX und Guidelines (Webinale 2015)
Responsive Navigation Patterns, UX und Guidelines (Webinale 2015)Peter Rozek
 
Responsive Navigation Patterns, UX und Guidelines
Responsive Navigation Patterns, UX und GuidelinesResponsive Navigation Patterns, UX und Guidelines
Responsive Navigation Patterns, UX und GuidelinesPeter 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
 
Responsive Navigation Patterns - UX und Guidelines
Responsive Navigation Patterns - UX und GuidelinesResponsive Navigation Patterns - UX und Guidelines
Responsive Navigation Patterns - UX und GuidelinesPeter Rozek
 
Responsive Webdesign: Neue Möglichkeiten und Freiheiten mit dem CSS3-Flexbox-...
Responsive Webdesign: Neue Möglichkeiten und Freiheiten mit dem CSS3-Flexbox-...Responsive Webdesign: Neue Möglichkeiten und Freiheiten mit dem CSS3-Flexbox-...
Responsive Webdesign: Neue Möglichkeiten und Freiheiten mit dem CSS3-Flexbox-...Peter Rozek
 
Responsive Webdesign: Prozess, Dialog, Qualität
Responsive Webdesign: Prozess, Dialog, QualitätResponsive Webdesign: Prozess, Dialog, Qualität
Responsive Webdesign: Prozess, Dialog, QualitätPeter Rozek
 
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 Peter Rozek
 
Handliche Designkonzepte, UX und Mobile Webdesign
Handliche Designkonzepte, UX und Mobile WebdesignHandliche Designkonzepte, UX und Mobile Webdesign
Handliche Designkonzepte, UX und Mobile WebdesignPeter Rozek
 
Barrierefreiheit sichern Voodoo Werkzeuge für Frontend Entwickler
Barrierefreiheit sichern Voodoo Werkzeuge für Frontend EntwicklerBarrierefreiheit sichern Voodoo Werkzeuge für Frontend Entwickler
Barrierefreiheit sichern Voodoo Werkzeuge für Frontend EntwicklerPeter Rozek
 

Más de Peter Rozek (14)

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
 
DESIGN THE PRIORITY, PERFORMANCE 
AND UX
DESIGN THE PRIORITY, PERFORMANCE 
AND UXDESIGN THE PRIORITY, PERFORMANCE 
AND UX
DESIGN THE PRIORITY, 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
 
Responsive Navigation Patterns, UX und Guidelines (Webinale 2015)
Responsive Navigation Patterns, UX und Guidelines (Webinale 2015)Responsive Navigation Patterns, UX und Guidelines (Webinale 2015)
Responsive Navigation Patterns, UX und Guidelines (Webinale 2015)
 
Responsive Navigation Patterns, UX und Guidelines
Responsive Navigation Patterns, UX und GuidelinesResponsive Navigation Patterns, UX und Guidelines
Responsive Navigation Patterns, UX und Guidelines
 
Hightway to Hell - Responsive Webdesign Testen
Hightway to Hell - Responsive Webdesign TestenHightway to Hell - Responsive Webdesign Testen
Hightway to Hell - Responsive Webdesign Testen
 
Responsive Navigation Patterns - UX und Guidelines
Responsive Navigation Patterns - UX und GuidelinesResponsive Navigation Patterns - UX und Guidelines
Responsive Navigation Patterns - UX und Guidelines
 
Responsive Webdesign: Neue Möglichkeiten und Freiheiten mit dem CSS3-Flexbox-...
Responsive Webdesign: Neue Möglichkeiten und Freiheiten mit dem CSS3-Flexbox-...Responsive Webdesign: Neue Möglichkeiten und Freiheiten mit dem CSS3-Flexbox-...
Responsive Webdesign: Neue Möglichkeiten und Freiheiten mit dem CSS3-Flexbox-...
 
Responsive Webdesign: Prozess, Dialog, Qualität
Responsive Webdesign: Prozess, Dialog, QualitätResponsive Webdesign: Prozess, Dialog, Qualität
Responsive Webdesign: Prozess, Dialog, Qualität
 
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
 
Handliche Designkonzepte, UX und Mobile Webdesign
Handliche Designkonzepte, UX und Mobile WebdesignHandliche Designkonzepte, UX und Mobile Webdesign
Handliche Designkonzepte, UX und Mobile Webdesign
 
Barrierefreiheit sichern Voodoo Werkzeuge für Frontend Entwickler
Barrierefreiheit sichern Voodoo Werkzeuge für Frontend EntwicklerBarrierefreiheit sichern Voodoo Werkzeuge für Frontend Entwickler
Barrierefreiheit sichern Voodoo Werkzeuge für Frontend Entwickler
 

Device Agnostic: Geräteunabhängiges Design als UX Grundlage