SlideShare ist ein Scribd-Unternehmen logo
1 von 72
Downloaden Sie, um offline zu lesen
RESPONSIVES DESIGN
Wirkungsvolles Mittel gegen zunehmende Gerätefragmentierung ?
Nicolas Leyking
UX Designer
AGENDA
Ergosign GmbH
Motivation
Facts & Definition
UCD Workflow
Responsive Patterns
Responsive Project
Dos & Don’ts in responsive Design-Projects
2
UNTERNEHMEN IN ZAHLEN
3
Gründungsjahr: 2000
Gründer: Dr. Marcus Plach, Prof. Dr. Dieter Wallach
Feste Mitarbeiter: 65 (Stand: 01.01.2013)
Standorte in Saarbrücken, Hamburg, München und Zürich
Kunden:
70 % Deutschland
15 % Schweiz
15 % EU/US
Enterprise
Industrie
Medizin
Consumer
MOTIVATION
5
“It is not the strongest of the species that
survives, nor the most intelligent, but the
one most responsive to change.”
- Charles Darwin
RESPONSIVE DESIGN MOTIVATION
Steigende Gerätefragmentierung
7
2011 wurden mehr mobile Geräte verkauft als Desktop PCs
(Heise Online)
Immer mehr verschiedene Bildschirmauflösungen im Web vertreten
(Global Stats)
Trend zu starker mobilen Internetnutzung, auch zuhause
(Tommorrow Focus Media)
2013 soll es mehr mobile Webzugriffe als Zugriffe vom Desktop PC geben
(Gartner Research)
RESPONSIVE DESIGN MOTIVATION
Steigende Gerätefragmentierung
7
2011 wurden mehr mobile Geräte verkauft als Desktop PCs
(Heise Online)
Immer mehr verschiedene Bildschirmauflösungen im Web vertreten
(Global Stats)
Trend zu starker mobilen Internetnutzung, auch zuhause
(Tommorrow Focus Media)
2013 soll es mehr mobile Webzugriffe als Zugriffe vom Desktop PC geben
(Gartner Research)
RESPONSIVE DESIGN MOTIVATION
Steigende Gerätefragmentierung
7
2011 wurden mehr mobile Geräte verkauft als Desktop PCs
(Heise Online)
Immer mehr verschiedene Bildschirmauflösungen im Web vertreten
(Global Stats)
Trend zu starker mobilen Internetnutzung, auch zuhause
(Tommorrow Focus Media)
2013 soll es mehr mobile Webzugriffe als Zugriffe vom Desktop PC geben
(Gartner Research)
RESPONSIVE DESIGN MOTIVATION
Steigende Gerätefragmentierung
7
2011 wurden mehr mobile Geräte verkauft als Desktop PCs
(Heise Online)
Immer mehr verschiedene Bildschirmauflösungen im Web vertreten
(Global Stats)
Trend zu starker mobilen Internetnutzung, auch zuhause
(Tommorrow Focus Media)
2013 soll es mehr mobile Webzugriffe als Zugriffe vom Desktop PC geben
(Gartner Research)
RESPONSIVE DESIGN MOTIVATION
Steigende Gerätefragmentierung
7
2011 wurden mehr mobile Geräte verkauft als Desktop PCs
(Heise Online)
Immer mehr verschiedene Bildschirmauflösungen im Web vertreten
(Global Stats)
Trend zu starker mobilen Internetnutzung, auch zuhause
(Tommorrow Focus Media)
2013 soll es mehr mobile Webzugriffe als Zugriffe vom Desktop PC geben
(Gartner Research)
Steigender Bedarf an Cross Platform Applikationen
RESPONSIVE DESIGN
8
RESPONSIVE DESIGN FACTS
9
Responsive Design
Ethan Marcotte, Initiator von responsivem Design
Cross Platform Ansatz auf einer Codebasis
Flexibles, programmtechnisches, konzeptuelles Regelwerk
Gerätespezifische UX durch moderne Web-Frameworks
RESPONSIVE DESIGN DEFINITION
10
Flexible Grid Layout Media Queries Flexible Images
+ Media
@media (min width:400px)
{...}
% , em
+ +
Aus was setzt sich ein responsives Design zusammen ?
RESPONSIVES DESIGN FLEXIBLE LAYOUTS
11
1 2 3 4 5 6 7 8 9 10 11 12
Header in 12 columns
Content Area in 8 columns Sidebar in 3 columns
Element
Element
Element
Element
RESPONSIVES DESIGN FLEXIBLE LAYOUTS
12
http://www.metaltoad.com/blog/simple-device-diagram-responsive-design-planning
RESPONSIVE DESIGN MEDIA QUERIES
Media Queries - Features
13
width / height
device-width / device-height
orientation
aspect-ratio
device aspect ratio
color / color-index
monochrome
resolution
grid
scan
http://www.w3.org/TR/css3-mediaqueries/
RESPONSIVE DESIGN FLEXIBLE IMAGES
Skalierung von Bildern
14
Einfache
Skalierung
Skalierung
auf einen
Bildausschnitt
Desktop PhoneNotebooks Tablets
RESPONSIVE DESIGN VS ADAPTIVES DESIGN
15
Responsives Design
Adaptives Design
6 fixe Layoutgrößen
Desktop PhoneNotebooks Tablets
1 flexibles Layout Grid
?? ?
RESPONSIVE UCD WORKFLOW
16
17
www.flickr.com/photos/cannedtuna/485380320
Analyse
Analyse des Nutzungkontextes, um
Zielplattformen und Screengrößen zu
identifizieren
Zentrale Dokumentation
http://www.flickr.com/photos/cannedtuna/6491204853
Design
Desktop oder Mobile First ?
Keine fixen Layoutingtools
Frühes HTML Prototyping
Unmittelbares Testen
Validierung
Tests auf möglichst allen relevanten
Bildschirmgrößen
Rückfluss der Ergebnisse in das
Design und in den Prototypen
http://www.flickr.com/photos/cannedtuna/6491204853
Spezifizierung
Prototypen (+ Videos?) zu
Design Manual/Styleguide hinzufügen
RESPONSIVE UI PATTERNS
21
LAYOUTING PATTERNS
22
RESPONSIVE DESIGN LAYOUTING PATTERNS
Column Drop
23
3 Spalten
Sukszessives untereinander anordnen
RESPONSIVE DESIGN LAYOUTING PATTERNS
Column Drop
24http://modernizr.com
RESPONSIVE DESIGN LAYOUTING PATTERNS
Column Drop
24http://modernizr.com
RESPONSIVE DESIGN LAYOUTING PATTERNS
Column Drop
24http://modernizr.com
RESPONSIVE DESIGN LAYOUTING PATTERNS
Off Canvas
25
Inhalte werden auf verschiedene
Seiten ausgelagert
RESPONSIVE DESIGN LAYOUTING PATTERNS
Off Canvas
26http://www.kaemingk.com/de/
RESPONSIVE DESIGN LAYOUTING PATTERNS
Off Canvas
26http://www.kaemingk.com/de/
RESPONSIVE DESIGN LAYOUTING PATTERNS
Off Canvas
26http://www.kaemingk.com/de/
RESPONSIVE DESIGN PATTERNS LAYOUTING PATTERNS
Tiny Tweaks
27
RESPONSIVE DESIGN PATTERNS LAYOUTING PATTERNS
Tiny Tweaks
27
1 Spalte
Adaption von Schriftgröße/Bildern
RESPONSIVE DESIGN PATTERNS LAYOUTING PATTERNS
Tiny Tweaks
28
RESPONSIVE DESIGN PATTERNS LAYOUTING PATTERNS
Tiny Tweaks
28
RESPONSIVE DESIGN PATTERNS LAYOUTING PATTERNS
Tiny Tweaks
28
NAVIGATION PATTERNS
29
RESPONSIVE DESIGN NAVIGATION PATTERNS
Top Navigation / Do nothing
30
Einfach umzusetzen
Nicht skalierbar
Wenig Abstand zwischen Einträgen
-
-
+
RESPONSIVE DESIGN NAVIGATION PATTERNS
Top Navigation / Do nothing
31http://yiibu.com
RESPONSIVE DESIGN NAVIGATION PATTERNS
Top Navigation / Do nothing
31http://yiibu.com
RESPONSIVE DESIGN NAVIGATION PATTERNS
Top Navigation / Do nothing
31http://yiibu.com
RESPONSIVE DESIGN NAVIGATION PATTERNS
Footer Anchor
32
Einfach umzusetzen
Platzsparend -> Fokus auf Content
Orientierung-
+
+
RESPONSIVE DESIGN NAVIGATION PATTERNS
Footer Anchor
33http://contentsmagazine.com
RESPONSIVE DESIGN NAVIGATION PATTERNS
Footer Anchor
33http://contentsmagazine.com
RESPONSIVE DESIGN NAVIGATION PATTERNS
Footer Anchor
33http://contentsmagazine.com
RESPONSIVE DESIGN NAVIGATION PATTERNS
Footer Anchor
33http://contentsmagazine.com
RESPONSIVE DESIGN NAVIGATION PATTERNS
Select Menu
34
Interaktion im Header
Platzsparend -> Fokus auf Content
Triggert natives/touch-freundliches
Control
Eingeschränkte Styling-Möglichkeiten
Skalierbareit: Sublevel-Einträge?
Select-Control unüblich zur
Navigation
-
+
+
+
-
-
RESPONSIVE DESIGN NAVIGATION PATTERNS
Select Menu
35http://www.fivesimplesteps.com
RESPONSIVE DESIGN NAVIGATION PATTERNS
Select Menu
35http://www.fivesimplesteps.com
RESPONSIVE DESIGN NAVIGATION PATTERNS
Select Menu
35http://www.fivesimplesteps.com
RESPONSIVE DESIGN NAVIGATION PATTERNS
Toggle
36
Interaktion im Header
Platzsparend -> Fokus auf Content
Skalierbar
JavaScript-Abhängigkeit
Animationen nicht performant
-
+
+
+
-
RESPONSIVE DESIGN NAVIGATION PATTERNS
Toggle
37http://www.starbucks.com
RESPONSIVE DESIGN NAVIGATION PATTERNS
Toggle
37http://www.starbucks.com
RESPONSIVE DESIGN NAVIGATION PATTERNS
Toggle
37http://www.starbucks.com
RESPONSIVE DESIGN NAVIGATION PATTERNS
Toggle
37http://www.starbucks.com
RESPONSIVE DESIGN NAVIGATION PATTERNS
Navigation Fly-Out/Drawer
38
Erweiterbar
Platzsparend -> Fokus auf Content
Bekannt, s. Facebook, Spotify
Nicht trivial umsetzbar
Layout wirkt „kaputt“
-
+
+
+
-
RESPONSIVE DESIGN NAVIGATION PATTERNS
Navigation Fly-Out/Drawer
39http://www.kaemingk.com/de/
RESPONSIVE DESIGN NAVIGATION PATTERNS
Navigation Fly-Out/Drawer
39http://www.kaemingk.com/de/
RESPONSIVE DESIGN NAVIGATION PATTERNS
Navigation Fly-Out/Drawer
39http://www.kaemingk.com/de/
RESPONSIVE DESIGN NAVIGATION PATTERNS
Navigation Fly-Out/Drawer
39http://www.kaemingk.com/de/
RESPONSIVE PROJECT
40
iPad
RESPONSIVE DESIGN RESPONSIVE PROJECTS
iPad - Drawer
41
iPad
iPad
RESPONSIVE DESIGN RESPONSIVE PROJECTS
iPad - Drawer
41
iPad
iPad
RESPONSIVE DESIGN RESPONSIVE PROJECTS
iPad - Drawer
41
iPad
RESPONSIVE DESIGN RESPONSIVE PROJECTS
42
Unterschiedliches Layouting
iPad iPhone
DOS & DON’TS
IN RESPONSIVE DESIGN-PROJECTS
43
RESPONSIVE DESIGN PRO & CONTRA
+
44
Sorge für ein einheitliches, teamweites
Verständnis über Responsivität
Teste dein responsives Design so früh wie möglich
mit leichtgewichtigen Prototypen
Sammel soviel Informationen wie möglich
über deine Zielplattformen
Entwicklungsbeginn vor Abschluss und
Abnahme des Designs
1:1 Übertragung des Designs von Desktop auf
Mobile
-Dos Don’ts
Sammel Feedback von langjährigen Benutzern
der Plattformen
Dokumentiere das Layoutverhalten durch
anschauliche Mittel
Einsatz von fixen layouting Tools
(Photoshop)
+
+
+
+
+
-
-
-
Stelle die Dokumentation und die Prototypen den
Entwicklern zur Verfügung
+
Verzicht auf relevante Inhalte aufgrund von
Platzmangel.
-
IST RESPONSIVES UI DESIGN EIN WIRKUNGSVOLLES MITTEL GEGEN
ZUNEHMENDE GERÄTEFRAGEMENTIERUNG?
45
JA, aber ...
www.ergosign.de
contact@ergosign.de
Ergosign GmbH
Adams-Lehmann-Straße 44
80797 München
Germany
T +49 89 6890607-0
F +49 89 6890607-10
T +49 681 988412-0
F +49 681 988412-10
Ergosign GmbH
Europaallee 12
66113 Saarbrücken
Germany
Ergosign GmbH
Bernhard-Nocht-Straße 109
20359 Hamburg
Germany
T +49 40 3179868-0
F +49 40 3179868-10
Ergosign Switzerland AG
Badenerstrasse 808
8048 Zürich
Switzerland
T +41 44 54293-04
F +41 44 54293-07
T +49 681 988 412-0
leyking@ergosign.de
UX Designer
Nicolas Leyking
Ihr Ansprechpartner

Weitere ähnliche Inhalte

Was ist angesagt?

WPF Custom Controls: UX-Design and -Development @ dotnet Cologne Conference
WPF Custom Controls: UX-Design and -Development @ dotnet Cologne ConferenceWPF Custom Controls: UX-Design and -Development @ dotnet Cologne Conference
WPF Custom Controls: UX-Design and -Development @ dotnet Cologne ConferenceErgosign GmbH
 
XAML UI DEVELOPMENT BEST PRACTICES 2.0
XAML UI DEVELOPMENT BEST PRACTICES 2.0XAML UI DEVELOPMENT BEST PRACTICES 2.0
XAML UI DEVELOPMENT BEST PRACTICES 2.0thoemmes
 
WPF Custom Control Development Unchained
WPF Custom Control Development UnchainedWPF Custom Control Development Unchained
WPF Custom Control Development Unchainedthoemmes
 
Small usability in a box
Small usability in a boxSmall usability in a box
Small usability in a boxUCDplus GmbH
 
Digitale Transformation - HMI Styleguides im Unternehmen etablieren
Digitale Transformation - HMI Styleguides im Unternehmen etablierenDigitale Transformation - HMI Styleguides im Unternehmen etablieren
Digitale Transformation - HMI Styleguides im Unternehmen etablierenCompetence Books
 
IA/ UX in Scrum Entwicklungs-Prozessen - 2009
IA/ UX in Scrum Entwicklungs-Prozessen - 2009IA/ UX in Scrum Entwicklungs-Prozessen - 2009
IA/ UX in Scrum Entwicklungs-Prozessen - 2009Wolf Noeding
 
Scrum und User Centered Design – wie geht das?, Usability Coffee, Zug, 11.02....
Scrum und User Centered Design – wie geht das?, Usability Coffee, Zug, 11.02....Scrum und User Centered Design – wie geht das?, Usability Coffee, Zug, 11.02....
Scrum und User Centered Design – wie geht das?, Usability Coffee, Zug, 11.02....soultank AG
 
Executive Summary - App-Entwicklung für Entscheider, Webinale Edition
Executive Summary - App-Entwicklung für Entscheider, Webinale EditionExecutive Summary - App-Entwicklung für Entscheider, Webinale Edition
Executive Summary - App-Entwicklung für Entscheider, Webinale EditionBokowsky + Laymann GmbH
 
Executive Summary – App Entwicklung für Entscheider
Executive Summary – App Entwicklung für EntscheiderExecutive Summary – App Entwicklung für Entscheider
Executive Summary – App Entwicklung für EntscheiderBokowsky + Laymann GmbH
 
8. TANNER-Hochschulwettbewerb | Beitrag Team Schneider (HS Karlsruhe)
8. TANNER-Hochschulwettbewerb | Beitrag Team Schneider (HS Karlsruhe)8. TANNER-Hochschulwettbewerb | Beitrag Team Schneider (HS Karlsruhe)
8. TANNER-Hochschulwettbewerb | Beitrag Team Schneider (HS Karlsruhe)TANNER AG
 
Der Kunde ist König! So schaffen Sie ein einmaliges Nutzungserlebnis für Ihre...
Der Kunde ist König! So schaffen Sie ein einmaliges Nutzungserlebnis für Ihre...Der Kunde ist König! So schaffen Sie ein einmaliges Nutzungserlebnis für Ihre...
Der Kunde ist König! So schaffen Sie ein einmaliges Nutzungserlebnis für Ihre...eBusiness-Lotse Potsdam
 
Einführung in die Mobile Produktentwicklung: Konzeption, Design, Entwicklung,...
Einführung in die Mobile Produktentwicklung: Konzeption, Design, Entwicklung,...Einführung in die Mobile Produktentwicklung: Konzeption, Design, Entwicklung,...
Einführung in die Mobile Produktentwicklung: Konzeption, Design, Entwicklung,...Bokowsky + Laymann GmbH
 
Agile UX - oder We have not failed. We've just found 10.000 ways that didn't ...
Agile UX - oder We have not failed. We've just found 10.000 ways that didn't ...Agile UX - oder We have not failed. We've just found 10.000 ways that didn't ...
Agile UX - oder We have not failed. We've just found 10.000 ways that didn't ...Daniel Dubbel
 
DevDay 2016 Keynote - Die Evolution agiler Software Entwicklung
DevDay 2016 Keynote - Die Evolution agiler Software EntwicklungDevDay 2016 Keynote - Die Evolution agiler Software Entwicklung
DevDay 2016 Keynote - Die Evolution agiler Software EntwicklungMarc Müller
 
Crowdsourced Mobile Testing – Alternative oder Ergänzung?
Crowdsourced Mobile Testing – Alternative oder Ergänzung?Crowdsourced Mobile Testing – Alternative oder Ergänzung?
Crowdsourced Mobile Testing – Alternative oder Ergänzung?Connected-Blog
 

Was ist angesagt? (17)

WPF Custom Controls: UX-Design and -Development @ dotnet Cologne Conference
WPF Custom Controls: UX-Design and -Development @ dotnet Cologne ConferenceWPF Custom Controls: UX-Design and -Development @ dotnet Cologne Conference
WPF Custom Controls: UX-Design and -Development @ dotnet Cologne Conference
 
XAML UI DEVELOPMENT BEST PRACTICES 2.0
XAML UI DEVELOPMENT BEST PRACTICES 2.0XAML UI DEVELOPMENT BEST PRACTICES 2.0
XAML UI DEVELOPMENT BEST PRACTICES 2.0
 
WPF Custom Control Development Unchained
WPF Custom Control Development UnchainedWPF Custom Control Development Unchained
WPF Custom Control Development Unchained
 
Small usability in a box
Small usability in a boxSmall usability in a box
Small usability in a box
 
Digitale Transformation - HMI Styleguides im Unternehmen etablieren
Digitale Transformation - HMI Styleguides im Unternehmen etablierenDigitale Transformation - HMI Styleguides im Unternehmen etablieren
Digitale Transformation - HMI Styleguides im Unternehmen etablieren
 
IA/ UX in Scrum Entwicklungs-Prozessen - 2009
IA/ UX in Scrum Entwicklungs-Prozessen - 2009IA/ UX in Scrum Entwicklungs-Prozessen - 2009
IA/ UX in Scrum Entwicklungs-Prozessen - 2009
 
Scrum und User Centered Design – wie geht das?, Usability Coffee, Zug, 11.02....
Scrum und User Centered Design – wie geht das?, Usability Coffee, Zug, 11.02....Scrum und User Centered Design – wie geht das?, Usability Coffee, Zug, 11.02....
Scrum und User Centered Design – wie geht das?, Usability Coffee, Zug, 11.02....
 
Executive Summary - App-Entwicklung für Entscheider, Webinale Edition
Executive Summary - App-Entwicklung für Entscheider, Webinale EditionExecutive Summary - App-Entwicklung für Entscheider, Webinale Edition
Executive Summary - App-Entwicklung für Entscheider, Webinale Edition
 
Executive Summary – App Entwicklung für Entscheider
Executive Summary – App Entwicklung für EntscheiderExecutive Summary – App Entwicklung für Entscheider
Executive Summary – App Entwicklung für Entscheider
 
Responsive design
Responsive designResponsive design
Responsive design
 
8. TANNER-Hochschulwettbewerb | Beitrag Team Schneider (HS Karlsruhe)
8. TANNER-Hochschulwettbewerb | Beitrag Team Schneider (HS Karlsruhe)8. TANNER-Hochschulwettbewerb | Beitrag Team Schneider (HS Karlsruhe)
8. TANNER-Hochschulwettbewerb | Beitrag Team Schneider (HS Karlsruhe)
 
Mobile Applikationen: Idee, Konzeption, Architektur - Erfolgreicher Start für...
Mobile Applikationen: Idee, Konzeption, Architektur - Erfolgreicher Start für...Mobile Applikationen: Idee, Konzeption, Architektur - Erfolgreicher Start für...
Mobile Applikationen: Idee, Konzeption, Architektur - Erfolgreicher Start für...
 
Der Kunde ist König! So schaffen Sie ein einmaliges Nutzungserlebnis für Ihre...
Der Kunde ist König! So schaffen Sie ein einmaliges Nutzungserlebnis für Ihre...Der Kunde ist König! So schaffen Sie ein einmaliges Nutzungserlebnis für Ihre...
Der Kunde ist König! So schaffen Sie ein einmaliges Nutzungserlebnis für Ihre...
 
Einführung in die Mobile Produktentwicklung: Konzeption, Design, Entwicklung,...
Einführung in die Mobile Produktentwicklung: Konzeption, Design, Entwicklung,...Einführung in die Mobile Produktentwicklung: Konzeption, Design, Entwicklung,...
Einführung in die Mobile Produktentwicklung: Konzeption, Design, Entwicklung,...
 
Agile UX - oder We have not failed. We've just found 10.000 ways that didn't ...
Agile UX - oder We have not failed. We've just found 10.000 ways that didn't ...Agile UX - oder We have not failed. We've just found 10.000 ways that didn't ...
Agile UX - oder We have not failed. We've just found 10.000 ways that didn't ...
 
DevDay 2016 Keynote - Die Evolution agiler Software Entwicklung
DevDay 2016 Keynote - Die Evolution agiler Software EntwicklungDevDay 2016 Keynote - Die Evolution agiler Software Entwicklung
DevDay 2016 Keynote - Die Evolution agiler Software Entwicklung
 
Crowdsourced Mobile Testing – Alternative oder Ergänzung?
Crowdsourced Mobile Testing – Alternative oder Ergänzung?Crowdsourced Mobile Testing – Alternative oder Ergänzung?
Crowdsourced Mobile Testing – Alternative oder Ergänzung?
 

Andere mochten auch

USER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONS
USER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONSUSER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONS
USER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONSErgosign GmbH
 
Emotional Design für HMIs
Emotional Design für HMIsEmotional Design für HMIs
Emotional Design für HMIsUID GmbH
 
User Experience of Ello
User Experience of ElloUser Experience of Ello
User Experience of ElloUID GmbH
 
UI Design for Social Commerce (ERGOSIGN)
UI Design for Social Commerce (ERGOSIGN)UI Design for Social Commerce (ERGOSIGN)
UI Design for Social Commerce (ERGOSIGN)Ergosign GmbH
 
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN ConferenceWPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN ConferenceErgosign GmbH
 
USER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONS
USER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONSUSER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONS
USER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONSErgosign GmbH
 
CRUX (CRUD meets UX) Case Study: Building a Modern Applications User Experien...
CRUX (CRUD meets UX) Case Study: Building a Modern Applications User Experien...CRUX (CRUD meets UX) Case Study: Building a Modern Applications User Experien...
CRUX (CRUD meets UX) Case Study: Building a Modern Applications User Experien...Chris Muir
 
Establishing Cross-cultural Collaboration in the Field of User Centered Desig...
Establishing Cross-cultural Collaboration in the Field of User Centered Desig...Establishing Cross-cultural Collaboration in the Field of User Centered Desig...
Establishing Cross-cultural Collaboration in the Field of User Centered Desig...Ergosign GmbH
 
K2 China agency credentials
K2 China agency credentialsK2 China agency credentials
K2 China agency credentialsxavier cagnion
 
UX & RIAs: UI Design Challenges (ERGOSIGN)
UX & RIAs: UI Design Challenges (ERGOSIGN)UX & RIAs: UI Design Challenges (ERGOSIGN)
UX & RIAs: UI Design Challenges (ERGOSIGN)Ergosign GmbH
 
Perfect Minute Advertising für Olympia 2014.
Perfect Minute Advertising für Olympia 2014. Perfect Minute Advertising für Olympia 2014.
Perfect Minute Advertising für Olympia 2014. Jung von Matt/sports
 
Design Process in the Responsive Age
Design Process in the Responsive AgeDesign Process in the Responsive Age
Design Process in the Responsive AgePon Kattera
 
2016 pre-Thanksgiving retail pulse survey: What will retailers be thankful fo...
2016 pre-Thanksgiving retail pulse survey: What will retailers be thankful fo...2016 pre-Thanksgiving retail pulse survey: What will retailers be thankful fo...
2016 pre-Thanksgiving retail pulse survey: What will retailers be thankful fo...Deloitte United States
 

Andere mochten auch (15)

USER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONS
USER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONSUSER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONS
USER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONS
 
Emotional Design für HMIs
Emotional Design für HMIsEmotional Design für HMIs
Emotional Design für HMIs
 
User Experience of Ello
User Experience of ElloUser Experience of Ello
User Experience of Ello
 
UI Design for Social Commerce (ERGOSIGN)
UI Design for Social Commerce (ERGOSIGN)UI Design for Social Commerce (ERGOSIGN)
UI Design for Social Commerce (ERGOSIGN)
 
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN ConferenceWPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
 
USER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONS
USER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONSUSER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONS
USER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONS
 
CRUX (CRUD meets UX) Case Study: Building a Modern Applications User Experien...
CRUX (CRUD meets UX) Case Study: Building a Modern Applications User Experien...CRUX (CRUD meets UX) Case Study: Building a Modern Applications User Experien...
CRUX (CRUD meets UX) Case Study: Building a Modern Applications User Experien...
 
Establishing Cross-cultural Collaboration in the Field of User Centered Desig...
Establishing Cross-cultural Collaboration in the Field of User Centered Desig...Establishing Cross-cultural Collaboration in the Field of User Centered Desig...
Establishing Cross-cultural Collaboration in the Field of User Centered Desig...
 
K2 China agency credentials
K2 China agency credentialsK2 China agency credentials
K2 China agency credentials
 
UX & RIAs: UI Design Challenges (ERGOSIGN)
UX & RIAs: UI Design Challenges (ERGOSIGN)UX & RIAs: UI Design Challenges (ERGOSIGN)
UX & RIAs: UI Design Challenges (ERGOSIGN)
 
Perfect Minute Advertising für Olympia 2014.
Perfect Minute Advertising für Olympia 2014. Perfect Minute Advertising für Olympia 2014.
Perfect Minute Advertising für Olympia 2014.
 
Jung von Matt Planner Test
Jung von Matt Planner TestJung von Matt Planner Test
Jung von Matt Planner Test
 
Design Process in the Responsive Age
Design Process in the Responsive AgeDesign Process in the Responsive Age
Design Process in the Responsive Age
 
Get green.
Get green.Get green.
Get green.
 
2016 pre-Thanksgiving retail pulse survey: What will retailers be thankful fo...
2016 pre-Thanksgiving retail pulse survey: What will retailers be thankful fo...2016 pre-Thanksgiving retail pulse survey: What will retailers be thankful fo...
2016 pre-Thanksgiving retail pulse survey: What will retailers be thankful fo...
 

Ähnlich wie Ergosign-Responsive-Design-2013

Fonda: Erfolgsfaktor Benutzeroberfläche
Fonda: Erfolgsfaktor BenutzeroberflächeFonda: Erfolgsfaktor Benutzeroberfläche
Fonda: Erfolgsfaktor BenutzeroberflächeFonda Wien
 
Responsive Design | Fluid | Mobile
Responsive Design | Fluid | MobileResponsive Design | Fluid | Mobile
Responsive Design | Fluid | MobileCS2 AG
 
pitchfreunde Vol. 4 - Pitch-Deck: silva projekt
pitchfreunde Vol. 4 - Pitch-Deck: silva projektpitchfreunde Vol. 4 - Pitch-Deck: silva projekt
pitchfreunde Vol. 4 - Pitch-Deck: silva projektpitchfreunde
 
Responsive Content Experience
Responsive Content ExperienceResponsive Content Experience
Responsive Content ExperiencePeter Rozek
 
UI Design Patterns für Navigationssysteme auf mobilen Geräten
UI Design Patterns für Navigationssysteme auf mobilen GerätenUI Design Patterns für Navigationssysteme auf mobilen Geräten
UI Design Patterns für Navigationssysteme auf mobilen GerätenRainer Gibbert
 
2010 - Basta!: IPhone Apps mit C#
2010 - Basta!: IPhone Apps mit C#2010 - Basta!: IPhone Apps mit C#
2010 - Basta!: IPhone Apps mit C#Daniel Fisher
 
Cogneon Presentation - Enterprise 2.0 GfWM Stammtisch 2010-03-11
Cogneon Presentation - Enterprise 2.0 GfWM Stammtisch 2010-03-11Cogneon Presentation - Enterprise 2.0 GfWM Stammtisch 2010-03-11
Cogneon Presentation - Enterprise 2.0 GfWM Stammtisch 2010-03-11Simon Dueckert
 
SEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDSEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDConny Stier
 
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
 
Responsive Webdesign Process
Responsive Webdesign ProcessResponsive Webdesign Process
Responsive Webdesign ProcessSven Wolfermann
 
Workshop Responsive Webdesign 2015
Workshop Responsive Webdesign 2015Workshop Responsive Webdesign 2015
Workshop Responsive Webdesign 2015ETH-Bibliothek
 
Multiscreen Experience Design (September 2012, MuC UP12)
Multiscreen Experience Design (September 2012, MuC UP12)Multiscreen Experience Design (September 2012, MuC UP12)
Multiscreen Experience Design (September 2012, MuC UP12)Wolfram Nagel
 
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)denkwerk GmbH
 
DNUG 38: "Einen Rahmen schaffen: Vorteile durch Frameworks in der Domino-Webe...
DNUG 38: "Einen Rahmen schaffen: Vorteile durch Frameworks in der Domino-Webe...DNUG 38: "Einen Rahmen schaffen: Vorteile durch Frameworks in der Domino-Webe...
DNUG 38: "Einen Rahmen schaffen: Vorteile durch Frameworks in der Domino-Webe...Oliver Busse
 
Modernisierung in Zeiten wie diesen
Modernisierung in Zeiten wie diesenModernisierung in Zeiten wie diesen
Modernisierung in Zeiten wie diesenenpit GmbH & Co. KG
 
Multiscreen Experience (Mai 2012, IA Konferenz, Essen)
Multiscreen Experience (Mai 2012, IA Konferenz, Essen)Multiscreen Experience (Mai 2012, IA Konferenz, Essen)
Multiscreen Experience (Mai 2012, IA Konferenz, Essen)Wolfram Nagel
 
Moderne Kundenansprache mit Mobile Experience!
Moderne Kundenansprache mit Mobile Experience!Moderne Kundenansprache mit Mobile Experience!
Moderne Kundenansprache mit Mobile Experience!solution10 GmbH
 

Ähnlich wie Ergosign-Responsive-Design-2013 (20)

Fonda: Erfolgsfaktor Benutzeroberfläche
Fonda: Erfolgsfaktor BenutzeroberflächeFonda: Erfolgsfaktor Benutzeroberfläche
Fonda: Erfolgsfaktor Benutzeroberfläche
 
Responsive Design | Fluid | Mobile
Responsive Design | Fluid | MobileResponsive Design | Fluid | Mobile
Responsive Design | Fluid | Mobile
 
pitchfreunde Vol. 4 - Pitch-Deck: silva projekt
pitchfreunde Vol. 4 - Pitch-Deck: silva projektpitchfreunde Vol. 4 - Pitch-Deck: silva projekt
pitchfreunde Vol. 4 - Pitch-Deck: silva projekt
 
Responsive Content Experience
Responsive Content ExperienceResponsive Content Experience
Responsive Content Experience
 
UI Design Patterns für Navigationssysteme auf mobilen Geräten
UI Design Patterns für Navigationssysteme auf mobilen GerätenUI Design Patterns für Navigationssysteme auf mobilen Geräten
UI Design Patterns für Navigationssysteme auf mobilen Geräten
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
2010 - Basta!: IPhone Apps mit C#
2010 - Basta!: IPhone Apps mit C#2010 - Basta!: IPhone Apps mit C#
2010 - Basta!: IPhone Apps mit C#
 
Responsive Web Design am Beispiel von Virato (Social News Aggregator)
Responsive Web Design am Beispiel von Virato (Social News Aggregator)Responsive Web Design am Beispiel von Virato (Social News Aggregator)
Responsive Web Design am Beispiel von Virato (Social News Aggregator)
 
Cogneon Presentation - Enterprise 2.0 GfWM Stammtisch 2010-03-11
Cogneon Presentation - Enterprise 2.0 GfWM Stammtisch 2010-03-11Cogneon Presentation - Enterprise 2.0 GfWM Stammtisch 2010-03-11
Cogneon Presentation - Enterprise 2.0 GfWM Stammtisch 2010-03-11
 
SEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDSEO Produktspezifikation für RWD
SEO Produktspezifikation für RWD
 
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
 
Responsive Webdesign Process
Responsive Webdesign ProcessResponsive Webdesign Process
Responsive Webdesign Process
 
Workshop Responsive Webdesign 2015
Workshop Responsive Webdesign 2015Workshop Responsive Webdesign 2015
Workshop Responsive Webdesign 2015
 
Multiscreen Experience Design (September 2012, MuC UP12)
Multiscreen Experience Design (September 2012, MuC UP12)Multiscreen Experience Design (September 2012, MuC UP12)
Multiscreen Experience Design (September 2012, MuC UP12)
 
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
 
DNUG 38: "Einen Rahmen schaffen: Vorteile durch Frameworks in der Domino-Webe...
DNUG 38: "Einen Rahmen schaffen: Vorteile durch Frameworks in der Domino-Webe...DNUG 38: "Einen Rahmen schaffen: Vorteile durch Frameworks in der Domino-Webe...
DNUG 38: "Einen Rahmen schaffen: Vorteile durch Frameworks in der Domino-Webe...
 
Modernisierung in Zeiten wie diesen
Modernisierung in Zeiten wie diesenModernisierung in Zeiten wie diesen
Modernisierung in Zeiten wie diesen
 
datenwerk Kochbuch: Webdesign- Trends 2014 (de)
datenwerk Kochbuch: Webdesign- Trends 2014  (de)datenwerk Kochbuch: Webdesign- Trends 2014  (de)
datenwerk Kochbuch: Webdesign- Trends 2014 (de)
 
Multiscreen Experience (Mai 2012, IA Konferenz, Essen)
Multiscreen Experience (Mai 2012, IA Konferenz, Essen)Multiscreen Experience (Mai 2012, IA Konferenz, Essen)
Multiscreen Experience (Mai 2012, IA Konferenz, Essen)
 
Moderne Kundenansprache mit Mobile Experience!
Moderne Kundenansprache mit Mobile Experience!Moderne Kundenansprache mit Mobile Experience!
Moderne Kundenansprache mit Mobile Experience!
 

Mehr von Ergosign GmbH

"Wir arbeiten genauso wie davor - nur anders", bitkom-Vortrag
"Wir arbeiten genauso wie davor - nur anders", bitkom-Vortrag"Wir arbeiten genauso wie davor - nur anders", bitkom-Vortrag
"Wir arbeiten genauso wie davor - nur anders", bitkom-VortragErgosign GmbH
 
"Build Great Services" - Ergosign @ MCBW 2021
"Build Great Services" - Ergosign @ MCBW 2021"Build Great Services" - Ergosign @ MCBW 2021
"Build Great Services" - Ergosign @ MCBW 2021Ergosign GmbH
 
Talk "3 Gründe -
 Warum menschzentriertes Design die Apokalypse verhindert", ...
Talk "3 Gründe -
 Warum menschzentriertes Design die Apokalypse verhindert", ...Talk "3 Gründe -
 Warum menschzentriertes Design die Apokalypse verhindert", ...
Talk "3 Gründe -
 Warum menschzentriertes Design die Apokalypse verhindert", ...Ergosign GmbH
 
Talk "Multimodal, collaborative & autonomous", IoT Meetup, 10/2020
Talk "Multimodal, collaborative & autonomous", IoT Meetup, 10/2020Talk "Multimodal, collaborative & autonomous", IoT Meetup, 10/2020
Talk "Multimodal, collaborative & autonomous", IoT Meetup, 10/2020Ergosign GmbH
 
Talk "Multimodal Systems", VDMA ERFA Meeting, 05/2020
Talk "Multimodal Systems", VDMA ERFA Meeting, 05/2020Talk "Multimodal Systems", VDMA ERFA Meeting, 05/2020
Talk "Multimodal Systems", VDMA ERFA Meeting, 05/2020Ergosign GmbH
 
Quo vadis, Student? Berufsorientierung für angehende UX Designer (World Usabi...
Quo vadis, Student? Berufsorientierung für angehende UX Designer (World Usabi...Quo vadis, Student? Berufsorientierung für angehende UX Designer (World Usabi...
Quo vadis, Student? Berufsorientierung für angehende UX Designer (World Usabi...Ergosign GmbH
 
Kommunikation 2.0 als Designtool im UCD Prozess (ERGOSIGN)
Kommunikation 2.0 als Designtool im UCD Prozess (ERGOSIGN)Kommunikation 2.0 als Designtool im UCD Prozess (ERGOSIGN)
Kommunikation 2.0 als Designtool im UCD Prozess (ERGOSIGN)Ergosign GmbH
 
UX Management: Effiziente Implementierung von UCD-Methoden in Unternehmen (ER...
UX Management: Effiziente Implementierung von UCD-Methoden in Unternehmen (ER...UX Management: Effiziente Implementierung von UCD-Methoden in Unternehmen (ER...
UX Management: Effiziente Implementierung von UCD-Methoden in Unternehmen (ER...Ergosign GmbH
 
A Best Practice Approach to the Design of Natural User Interfaces (ERGOSIGN)
A Best Practice Approach to the Design of Natural User Interfaces (ERGOSIGN)A Best Practice Approach to the Design of Natural User Interfaces (ERGOSIGN)
A Best Practice Approach to the Design of Natural User Interfaces (ERGOSIGN)Ergosign GmbH
 

Mehr von Ergosign GmbH (9)

"Wir arbeiten genauso wie davor - nur anders", bitkom-Vortrag
"Wir arbeiten genauso wie davor - nur anders", bitkom-Vortrag"Wir arbeiten genauso wie davor - nur anders", bitkom-Vortrag
"Wir arbeiten genauso wie davor - nur anders", bitkom-Vortrag
 
"Build Great Services" - Ergosign @ MCBW 2021
"Build Great Services" - Ergosign @ MCBW 2021"Build Great Services" - Ergosign @ MCBW 2021
"Build Great Services" - Ergosign @ MCBW 2021
 
Talk "3 Gründe -
 Warum menschzentriertes Design die Apokalypse verhindert", ...
Talk "3 Gründe -
 Warum menschzentriertes Design die Apokalypse verhindert", ...Talk "3 Gründe -
 Warum menschzentriertes Design die Apokalypse verhindert", ...
Talk "3 Gründe -
 Warum menschzentriertes Design die Apokalypse verhindert", ...
 
Talk "Multimodal, collaborative & autonomous", IoT Meetup, 10/2020
Talk "Multimodal, collaborative & autonomous", IoT Meetup, 10/2020Talk "Multimodal, collaborative & autonomous", IoT Meetup, 10/2020
Talk "Multimodal, collaborative & autonomous", IoT Meetup, 10/2020
 
Talk "Multimodal Systems", VDMA ERFA Meeting, 05/2020
Talk "Multimodal Systems", VDMA ERFA Meeting, 05/2020Talk "Multimodal Systems", VDMA ERFA Meeting, 05/2020
Talk "Multimodal Systems", VDMA ERFA Meeting, 05/2020
 
Quo vadis, Student? Berufsorientierung für angehende UX Designer (World Usabi...
Quo vadis, Student? Berufsorientierung für angehende UX Designer (World Usabi...Quo vadis, Student? Berufsorientierung für angehende UX Designer (World Usabi...
Quo vadis, Student? Berufsorientierung für angehende UX Designer (World Usabi...
 
Kommunikation 2.0 als Designtool im UCD Prozess (ERGOSIGN)
Kommunikation 2.0 als Designtool im UCD Prozess (ERGOSIGN)Kommunikation 2.0 als Designtool im UCD Prozess (ERGOSIGN)
Kommunikation 2.0 als Designtool im UCD Prozess (ERGOSIGN)
 
UX Management: Effiziente Implementierung von UCD-Methoden in Unternehmen (ER...
UX Management: Effiziente Implementierung von UCD-Methoden in Unternehmen (ER...UX Management: Effiziente Implementierung von UCD-Methoden in Unternehmen (ER...
UX Management: Effiziente Implementierung von UCD-Methoden in Unternehmen (ER...
 
A Best Practice Approach to the Design of Natural User Interfaces (ERGOSIGN)
A Best Practice Approach to the Design of Natural User Interfaces (ERGOSIGN)A Best Practice Approach to the Design of Natural User Interfaces (ERGOSIGN)
A Best Practice Approach to the Design of Natural User Interfaces (ERGOSIGN)
 

Ergosign-Responsive-Design-2013