SlideShare ist ein Scribd-Unternehmen logo
Mobile First
Responsive Design

think moto
Sommercamp am Wannsee

Jordi Tost Val
Berlin, 29. August 2013
Was ist für euch
Responsive Design?
Die 3 Grundlagen:
1. Fluid Grids
2. Flexible Media
3. Media Queries
Responsive Web Design
Responsive Web Design
Responsive Design
ist viel mehr!
Responsive Web Design
KONTEXT
Was können wir über das
“Web des Users” sagen?
ALTER KONTEXT
NEUER KONTEXT
PERFORMANCE
der Benutzer erwarten, dass Mobile-Webseiten
so schnell (oder schneller) wie Desktop-Webseiten laden
Wir haben nur
of responsive sites weigh the same in both
their small screen view and large screen view
Responsive Web Design
Responsive Web Design
Mobile First is a philosophy that highlights the need to
prioritize the mobile context when creating UX.
1. Allows websites to reach more people.
1. Allows websites to reach more people.
2. Forces designers to focus on core content and
functionality (einfach bleiben!).
1. Allows websites to reach more people.
2. Forces designers to focus on core content and
functionality (einfach bleiben!).
3. Lets designers innovate and take advantage of
new technologies (geolocation, touch events, etc).
Wie machen wir ein
Mobile-First-Responsive-Design?
1. Content First
- Content Strategy
- Information Architecture

- Hierarchie / Prioritäten
- 2-3 Ebenen
2. Mit Mobile anfangen
2. Mit Mobile anfangen
DER PROZESS
Der übliche Prozess
Responsive Web Design
“It's impossible to predict all the
complications of a responsive
design up front. We need a more
fluid workflow!”
Andy Clarke (@Marlarkey)
Warum sollen wir überhaupt
unseren Prozess ändern?
- Bessere Leistung
- Bessere Webseiten gestalten
“RWD comes under criticism for not
being commercially viable. It’s because
it’s trying to be shoe-horned into an
existing, fixed-canvas, inflexible
process.”
Mark Boulton, on responsive worklflow
Der Responsive Prozess
VIELEN DANK!

Weitere ähnliche Inhalte

Ähnlich wie Responsive Web Design

design
designdesign
Web Design Trends 2011
Web Design Trends 2011Web Design Trends 2011
Web Design Trends 2011
Vitaly Friedman
 
Responsive Webdesign Process
Responsive Webdesign ProcessResponsive Webdesign Process
Responsive Webdesign Process
Sven Wolfermann
 
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
 
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
 
2011 - CMS-Inhalte für mobile Endgeräte / Responsive Design
2011 - CMS-Inhalte für mobile Endgeräte / Responsive Design2011 - CMS-Inhalte für mobile Endgeräte / Responsive Design
2011 - CMS-Inhalte für mobile Endgeräte / Responsive Design
Johannes Waibel
 
Mobile und Trends.
Mobile und Trends.Mobile und Trends.
Mobile und Trends.
Namics – A Merkle Company
 
Ergosign-Responsive-Design-2013
Ergosign-Responsive-Design-2013Ergosign-Responsive-Design-2013
Ergosign-Responsive-Design-2013
Ergosign GmbH
 
Workshop Responsive Webdesign 2015
Workshop Responsive Webdesign 2015Workshop Responsive Webdesign 2015
Workshop Responsive Webdesign 2015
ETH-Bibliothek
 
Die UX von Enterprise-Anwendungen: Ein Aschenputtel des Software-Designs?
Die UX von Enterprise-Anwendungen: Ein Aschenputtel des Software-Designs? Die UX von Enterprise-Anwendungen: Ein Aschenputtel des Software-Designs?
Die UX von Enterprise-Anwendungen: Ein Aschenputtel des Software-Designs?
kris_lohmann
 
Handliche Designkonzepte, UX und Mobile Webdesign
Handliche Designkonzepte, UX und Mobile WebdesignHandliche Designkonzepte, UX und Mobile Webdesign
Handliche Designkonzepte, UX und Mobile Webdesign
Peter Rozek
 
Responsive Design: Defintion und Kriterien zur Berücksichtigung
Responsive Design: Defintion und Kriterien zur BerücksichtigungResponsive Design: Defintion und Kriterien zur Berücksichtigung
Responsive Design: Defintion und Kriterien zur Berücksichtigung
TWT
 
WCM im Jahr 2013 und danach - der Stand der Dinge
WCM im Jahr 2013 und danach - der Stand der DingeWCM im Jahr 2013 und danach - der Stand der Dinge
WCM im Jahr 2013 und danach - der Stand der Dinge
Bernd Burkert
 
Micro UX. Wie Produkte wirklich Spaß machen (2014)
Micro UX. Wie Produkte wirklich Spaß machen (2014)Micro UX. Wie Produkte wirklich Spaß machen (2014)
Micro UX. Wie Produkte wirklich Spaß machen (2014)
denkwerk GmbH
 
Responsive Design | Fluid | Mobile
Responsive Design | Fluid | MobileResponsive Design | Fluid | Mobile
Responsive Design | Fluid | Mobile
CS2 AG
 
datenwerk Kochbuch: Webdesign- Trends 2014 (de)
datenwerk Kochbuch: Webdesign- Trends 2014  (de)datenwerk Kochbuch: Webdesign- Trends 2014  (de)
datenwerk Kochbuch: Webdesign- Trends 2014 (de)
datenwerk innovationsagentur
 
Fonda: Erfolgsfaktor Benutzeroberfläche
Fonda: Erfolgsfaktor BenutzeroberflächeFonda: Erfolgsfaktor Benutzeroberfläche
Fonda: Erfolgsfaktor Benutzeroberfläche
Fonda Wien
 
Responsive Content Experience
Responsive Content ExperienceResponsive Content Experience
Responsive Content Experience
Peter Rozek
 
M.I.T Präsentation CeBit 2011 - Mobile Learning (Andreas Kohl)
M.I.T Präsentation CeBit 2011 - Mobile Learning (Andreas Kohl)M.I.T Präsentation CeBit 2011 - Mobile Learning (Andreas Kohl)
M.I.T Präsentation CeBit 2011 - Mobile Learning (Andreas Kohl)
akmc
 
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
 

Ähnlich wie Responsive Web Design (20)

design
designdesign
design
 
Web Design Trends 2011
Web Design Trends 2011Web Design Trends 2011
Web Design Trends 2011
 
Responsive Webdesign Process
Responsive Webdesign ProcessResponsive Webdesign Process
Responsive Webdesign Process
 
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)
 
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)
 
2011 - CMS-Inhalte für mobile Endgeräte / Responsive Design
2011 - CMS-Inhalte für mobile Endgeräte / Responsive Design2011 - CMS-Inhalte für mobile Endgeräte / Responsive Design
2011 - CMS-Inhalte für mobile Endgeräte / Responsive Design
 
Mobile und Trends.
Mobile und Trends.Mobile und Trends.
Mobile und Trends.
 
Ergosign-Responsive-Design-2013
Ergosign-Responsive-Design-2013Ergosign-Responsive-Design-2013
Ergosign-Responsive-Design-2013
 
Workshop Responsive Webdesign 2015
Workshop Responsive Webdesign 2015Workshop Responsive Webdesign 2015
Workshop Responsive Webdesign 2015
 
Die UX von Enterprise-Anwendungen: Ein Aschenputtel des Software-Designs?
Die UX von Enterprise-Anwendungen: Ein Aschenputtel des Software-Designs? Die UX von Enterprise-Anwendungen: Ein Aschenputtel des Software-Designs?
Die UX von Enterprise-Anwendungen: Ein Aschenputtel des Software-Designs?
 
Handliche Designkonzepte, UX und Mobile Webdesign
Handliche Designkonzepte, UX und Mobile WebdesignHandliche Designkonzepte, UX und Mobile Webdesign
Handliche Designkonzepte, UX und Mobile Webdesign
 
Responsive Design: Defintion und Kriterien zur Berücksichtigung
Responsive Design: Defintion und Kriterien zur BerücksichtigungResponsive Design: Defintion und Kriterien zur Berücksichtigung
Responsive Design: Defintion und Kriterien zur Berücksichtigung
 
WCM im Jahr 2013 und danach - der Stand der Dinge
WCM im Jahr 2013 und danach - der Stand der DingeWCM im Jahr 2013 und danach - der Stand der Dinge
WCM im Jahr 2013 und danach - der Stand der Dinge
 
Micro UX. Wie Produkte wirklich Spaß machen (2014)
Micro UX. Wie Produkte wirklich Spaß machen (2014)Micro UX. Wie Produkte wirklich Spaß machen (2014)
Micro UX. Wie Produkte wirklich Spaß machen (2014)
 
Responsive Design | Fluid | Mobile
Responsive Design | Fluid | MobileResponsive Design | Fluid | Mobile
Responsive Design | Fluid | Mobile
 
datenwerk Kochbuch: Webdesign- Trends 2014 (de)
datenwerk Kochbuch: Webdesign- Trends 2014  (de)datenwerk Kochbuch: Webdesign- Trends 2014  (de)
datenwerk Kochbuch: Webdesign- Trends 2014 (de)
 
Fonda: Erfolgsfaktor Benutzeroberfläche
Fonda: Erfolgsfaktor BenutzeroberflächeFonda: Erfolgsfaktor Benutzeroberfläche
Fonda: Erfolgsfaktor Benutzeroberfläche
 
Responsive Content Experience
Responsive Content ExperienceResponsive Content Experience
Responsive Content Experience
 
M.I.T Präsentation CeBit 2011 - Mobile Learning (Andreas Kohl)
M.I.T Präsentation CeBit 2011 - Mobile Learning (Andreas Kohl)M.I.T Präsentation CeBit 2011 - Mobile Learning (Andreas Kohl)
M.I.T Präsentation CeBit 2011 - Mobile Learning (Andreas Kohl)
 
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)
 

Responsive Web Design