SlideShare ist ein Scribd-Unternehmen logo
Mayflower GmbH I 1
© http://www.naturalgrocers.com/products/drinking-water
© Mayflower GmbH 2012
Responsive Webdesign
Fiese Fallstricke und sexy Strategien
Johannes Weber I 12. Sept. 2013
Mayflower GmbH I 3
Johannes Weber
I Jahrgang 1986
I Developer bei Mayflower
I Seit 2003: Onlinemedien
I M.Sc – Digitale Medientechnologien
I @jowe
Mayflower GmbH I 4
Responsive Webdesign
I Beispiel: Text
I Beispiel: Formatierter Text
I Beispiel: Eltern - Kind
I Beispiel: Responsive
Mayflower GmbH I 5
Mobile vs. Desktopbrowser
Mayflower GmbH I 6
Geschichte
I 2010: Ethan Marcotte, Responsive Architektur
I CSS Level 3
I „Wichtigste Entwicklungen des Jahres 2012“
I Heterogene Browserlandschaft
I Herausforderung für Konzeptionisten, Webdesigner und
Webentwickler
Mayflower GmbH I 7
Top 8
Fallstrickennetmagazine.com
Mayflower GmbH I 8
#1: Dem Kunden erklären
Mayflower GmbH I 9
#1: Dem Kunden erklären
Lösung: demonstrieren
Mayflower GmbH I 10
#2: Linearer Designprozess
Mayflower GmbH I 11
#2: Linearer Designprozess
Lösung: Design von Elements & weniger Layouts
Mayflower GmbH I 12
#3: Navigation
Mayflower GmbH I 13
#3: Navigation
Lösung: gutes, einheitliches Design, Patterns
Mayflower GmbH I 14
#4: Bilder
Mayflower GmbH I 15
#4: Bilder
Lösung: Scripts, SVG, Icon Fonts, <picture />, srcSet,
progressive JPEG
Mayflower GmbH I 16
#5: Tabellen
Mayflower GmbH I 17
#5: Tabellen
Lösung: bestehende Design Patterns
Mayflower GmbH I 18
#6: Konvertieren alter Seiten
Mayflower GmbH I 19
#6: Konvertieren alter Seiten
Lösung: Reverse Engineering, Rewrite
Mayflower GmbH I 20
#7: IE
Mayflower GmbH I 21
#7: IE
Lösung: Polyfill oder darauf verzichten
Mayflower GmbH I 22
#8: Testing
Mayflower GmbH I 23
#8: Testing
Lösung: Testsites, Tools, Geräte teilen
graziös
Mayflower GmbH I 24
#8: Testing
Mayflower GmbH I 25
Beispie
l
Mayflower GmbH I 26
Workflow
Mayflower GmbH I 27
Beispie
l
Workflow
Mayflower GmbH I 28
Beispie
l
Workflow
Mayflower GmbH I 29
Beispie
l
Workflow
Mayflower GmbH I 30
Beispie
l
Workflow
Mayflower GmbH I 31
Beispie
l
Workflow
Mayflower GmbH I 32
Beispie
l
Mayflower GmbH I 33
Frameworks
Mayflower GmbH I 34
Mayflower GmbH I 35
Responsive Newsletter
I Optimiert auf Outlook 2003
I Media Query Support
I Webclients
I CSS: !important
I Mobile First
Mayflower GmbH I 36
Responsive Newsletter
I Testing Tools
emailonacid.com
mailchimp.com
campaignmonitor.com
Mayflower GmbH I 37
Einbettung in iFrame
I Fit to Content
I Mobile oder Desktop?
I Polyfill
I W3C: <seamless />
I Navigation: <base />
I Videos
I #Beispiel
Mayflower GmbH I 38
Maps
I Mobile oder Desktop
I Resizing
I Static Maps
I Adaptive Maps #href
Mayflower GmbH I 39
Formulare nach Device
I Mobile: Rückrufservice
I Desktop: Detaillierte Angaben
I JS Validierung
I Logik über CSS Klassen?
I 2 verschiedene Formulare
I 2 verschiedene Links
Mayflower GmbH I 40
Responsive Webdesign
“Empty your mind! Be formless, shapeless, like
water. If you put water into a cup, it becomes
the cup. Put it into a bottle, it becomes the
bottle, you put into a teapot, it becomes the
teapot. Now water can flow, or it can crash: Be
water, my friend!”
(Bruce Lee: Fernsehinterview)
Mayflower GmbH I 41
Feedback
26.09.13 Mayflower GmbH 42
Vielen Dank für Ihre
Aufmerksamkeit!
Johannes Weber
johannes.weber@mayflower.de
Tel: +49 89 2420 54 1118
Mayflower GmbH
Mannhardtstraße 6
80538 München
Q & A

Weitere ähnliche Inhalte

Ähnlich wie Responsive Webdesign: Fiese Fallstricke und sexy Strategien

Immobilien 2.0
Immobilien 2.0Immobilien 2.0
Immobilien 2.0
Thomas Gawlitta
 
Print, Web, App – Multi-Channel-Marketing im täglichen Leben eines Handelsunt...
Print, Web, App – Multi-Channel-Marketing im täglichen Leben eines Handelsunt...Print, Web, App – Multi-Channel-Marketing im täglichen Leben eines Handelsunt...
Print, Web, App – Multi-Channel-Marketing im täglichen Leben eines Handelsunt...
TANNER AG
 
Piwik anpassen und skalieren
Piwik anpassen und skalierenPiwik anpassen und skalieren
Piwik anpassen und skalieren
Mayflower GmbH
 
Web 2.0 Kompakt - Einführung
Web 2.0 Kompakt - EinführungWeb 2.0 Kompakt - Einführung
Web 2.0 Kompakt - Einführung
Prof. Dr. Manfred Leisenberg
 
Verteiltes Verarbeiten von riesigen Datenmengen mittels Hadoop
Verteiltes Verarbeiten von riesigen Datenmengen mittels HadoopVerteiltes Verarbeiten von riesigen Datenmengen mittels Hadoop
Verteiltes Verarbeiten von riesigen Datenmengen mittels HadoopMayflower GmbH
 
Mobile SEO: IWWB Herbstworkshop 2015
Mobile SEO: IWWB Herbstworkshop 2015Mobile SEO: IWWB Herbstworkshop 2015
Mobile SEO: IWWB Herbstworkshop 2015
takevalue Consulting GmbH
 
Javascript debugging logging
Javascript debugging loggingJavascript debugging logging
Javascript debugging logging
Mayflower GmbH
 
Social Media Starter Workshop vom 15. Juni 2017
Social Media Starter Workshop vom 15. Juni 2017Social Media Starter Workshop vom 15. Juni 2017
Social Media Starter Workshop vom 15. Juni 2017
Jürg Kobel
 
Social Media für KMU Pia Lauck
Social Media für KMU Pia LauckSocial Media für KMU Pia Lauck
Social Media für KMU Pia Lauck
Pia Lauck
 
WooCommerce
WooCommerceWooCommerce
WooCommerce
pixolin
 
Patterns of domain driven design
Patterns of domain driven designPatterns of domain driven design
Patterns of domain driven design
Adrian Föder
 
Agilitaet im E-Commerce - E-Commerce Breakfast
Agilitaet im E-Commerce - E-Commerce BreakfastAgilitaet im E-Commerce - E-Commerce Breakfast
Agilitaet im E-Commerce - E-Commerce Breakfast
Mayflower GmbH
 
Präsentation SEO an der HWZ - 27. Januar 2010
Präsentation SEO an der HWZ - 27. Januar 2010Präsentation SEO an der HWZ - 27. Januar 2010
Präsentation SEO an der HWZ - 27. Januar 2010INM AG
 
Vortrag zu Apps AppPlusMobile, Kreativamt Gladbeck
Vortrag zu Apps AppPlusMobile, Kreativamt GladbeckVortrag zu Apps AppPlusMobile, Kreativamt Gladbeck
Vortrag zu Apps AppPlusMobile, Kreativamt Gladbeck
AppPlusMobile.info
 
Phundament - IPC 2007 se
Phundament - IPC 2007 sePhundament - IPC 2007 se
Phundament - IPC 2007 se
schmunk
 
Artikel im Swiss IT Magazine: Marktuebersicht Web-Agenturen
Artikel im Swiss IT Magazine: Marktuebersicht Web-AgenturenArtikel im Swiss IT Magazine: Marktuebersicht Web-Agenturen
Artikel im Swiss IT Magazine: Marktuebersicht Web-Agenturen
xeit AG
 
eStrategy-Magazin #31 - Shopsysteme Marktüberblick
eStrategy-Magazin #31 - Shopsysteme MarktüberblickeStrategy-Magazin #31 - Shopsysteme Marktüberblick
eStrategy-Magazin #31 - Shopsysteme Marktüberblick
TechDivision GmbH
 
Native Cross-Platform-Apps mit Titanium Mobile und Alloy
Native Cross-Platform-Apps mit Titanium Mobile und AlloyNative Cross-Platform-Apps mit Titanium Mobile und Alloy
Native Cross-Platform-Apps mit Titanium Mobile und Alloy
Mayflower GmbH
 
"Failure is not an options" Slides from our IBM Connections Webinar Series. F...
"Failure is not an options" Slides from our IBM Connections Webinar Series. F..."Failure is not an options" Slides from our IBM Connections Webinar Series. F...
"Failure is not an options" Slides from our IBM Connections Webinar Series. F...
Beck et al. GmbH
 
Interaction & Information Design: User first: Mit klarem Fokus eine ambitiöse...
Interaction & Information Design: User first: Mit klarem Fokus eine ambitiöse...Interaction & Information Design: User first: Mit klarem Fokus eine ambitiöse...
Interaction & Information Design: User first: Mit klarem Fokus eine ambitiöse...
ONE Schweiz
 

Ähnlich wie Responsive Webdesign: Fiese Fallstricke und sexy Strategien (20)

Immobilien 2.0
Immobilien 2.0Immobilien 2.0
Immobilien 2.0
 
Print, Web, App – Multi-Channel-Marketing im täglichen Leben eines Handelsunt...
Print, Web, App – Multi-Channel-Marketing im täglichen Leben eines Handelsunt...Print, Web, App – Multi-Channel-Marketing im täglichen Leben eines Handelsunt...
Print, Web, App – Multi-Channel-Marketing im täglichen Leben eines Handelsunt...
 
Piwik anpassen und skalieren
Piwik anpassen und skalierenPiwik anpassen und skalieren
Piwik anpassen und skalieren
 
Web 2.0 Kompakt - Einführung
Web 2.0 Kompakt - EinführungWeb 2.0 Kompakt - Einführung
Web 2.0 Kompakt - Einführung
 
Verteiltes Verarbeiten von riesigen Datenmengen mittels Hadoop
Verteiltes Verarbeiten von riesigen Datenmengen mittels HadoopVerteiltes Verarbeiten von riesigen Datenmengen mittels Hadoop
Verteiltes Verarbeiten von riesigen Datenmengen mittels Hadoop
 
Mobile SEO: IWWB Herbstworkshop 2015
Mobile SEO: IWWB Herbstworkshop 2015Mobile SEO: IWWB Herbstworkshop 2015
Mobile SEO: IWWB Herbstworkshop 2015
 
Javascript debugging logging
Javascript debugging loggingJavascript debugging logging
Javascript debugging logging
 
Social Media Starter Workshop vom 15. Juni 2017
Social Media Starter Workshop vom 15. Juni 2017Social Media Starter Workshop vom 15. Juni 2017
Social Media Starter Workshop vom 15. Juni 2017
 
Social Media für KMU Pia Lauck
Social Media für KMU Pia LauckSocial Media für KMU Pia Lauck
Social Media für KMU Pia Lauck
 
WooCommerce
WooCommerceWooCommerce
WooCommerce
 
Patterns of domain driven design
Patterns of domain driven designPatterns of domain driven design
Patterns of domain driven design
 
Agilitaet im E-Commerce - E-Commerce Breakfast
Agilitaet im E-Commerce - E-Commerce BreakfastAgilitaet im E-Commerce - E-Commerce Breakfast
Agilitaet im E-Commerce - E-Commerce Breakfast
 
Präsentation SEO an der HWZ - 27. Januar 2010
Präsentation SEO an der HWZ - 27. Januar 2010Präsentation SEO an der HWZ - 27. Januar 2010
Präsentation SEO an der HWZ - 27. Januar 2010
 
Vortrag zu Apps AppPlusMobile, Kreativamt Gladbeck
Vortrag zu Apps AppPlusMobile, Kreativamt GladbeckVortrag zu Apps AppPlusMobile, Kreativamt Gladbeck
Vortrag zu Apps AppPlusMobile, Kreativamt Gladbeck
 
Phundament - IPC 2007 se
Phundament - IPC 2007 sePhundament - IPC 2007 se
Phundament - IPC 2007 se
 
Artikel im Swiss IT Magazine: Marktuebersicht Web-Agenturen
Artikel im Swiss IT Magazine: Marktuebersicht Web-AgenturenArtikel im Swiss IT Magazine: Marktuebersicht Web-Agenturen
Artikel im Swiss IT Magazine: Marktuebersicht Web-Agenturen
 
eStrategy-Magazin #31 - Shopsysteme Marktüberblick
eStrategy-Magazin #31 - Shopsysteme MarktüberblickeStrategy-Magazin #31 - Shopsysteme Marktüberblick
eStrategy-Magazin #31 - Shopsysteme Marktüberblick
 
Native Cross-Platform-Apps mit Titanium Mobile und Alloy
Native Cross-Platform-Apps mit Titanium Mobile und AlloyNative Cross-Platform-Apps mit Titanium Mobile und Alloy
Native Cross-Platform-Apps mit Titanium Mobile und Alloy
 
"Failure is not an options" Slides from our IBM Connections Webinar Series. F...
"Failure is not an options" Slides from our IBM Connections Webinar Series. F..."Failure is not an options" Slides from our IBM Connections Webinar Series. F...
"Failure is not an options" Slides from our IBM Connections Webinar Series. F...
 
Interaction & Information Design: User first: Mit klarem Fokus eine ambitiöse...
Interaction & Information Design: User first: Mit klarem Fokus eine ambitiöse...Interaction & Information Design: User first: Mit klarem Fokus eine ambitiöse...
Interaction & Information Design: User first: Mit klarem Fokus eine ambitiöse...
 

Mehr von Johannes Weber

Progressive Web Apps - Intro & Learnings
Progressive Web Apps - Intro & LearningsProgressive Web Apps - Intro & Learnings
Progressive Web Apps - Intro & Learnings
Johannes Weber
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
Johannes Weber
 
Formular handling in AngularJS
Formular handling in AngularJSFormular handling in AngularJS
Formular handling in AngularJS
Johannes Weber
 
AngularJS Munich Meetup #7 - Intro
AngularJS Munich Meetup #7 - IntroAngularJS Munich Meetup #7 - Intro
AngularJS Munich Meetup #7 - Intro
Johannes Weber
 
#perfmatters - Optimizing the Critical Rendering Path
#perfmatters - Optimizing the Critical Rendering Path#perfmatters - Optimizing the Critical Rendering Path
#perfmatters - Optimizing the Critical Rendering Path
Johannes Weber
 
LeanJS - Lean startup with JavaScript
LeanJS - Lean startup with JavaScriptLeanJS - Lean startup with JavaScript
LeanJS - Lean startup with JavaScript
Johannes Weber
 
The evolution of Angular 2 @ AngularJS Munich Meetup #5
The evolution of Angular 2 @ AngularJS Munich Meetup #5The evolution of Angular 2 @ AngularJS Munich Meetup #5
The evolution of Angular 2 @ AngularJS Munich Meetup #5
Johannes Weber
 
A Story about AngularJS modularization development
A Story about AngularJS modularization developmentA Story about AngularJS modularization development
A Story about AngularJS modularization development
Johannes Weber
 
Debugging War Stories & Strategies to Survive on RejectJS 2014
Debugging War Stories & Strategies to Survive on RejectJS 2014Debugging War Stories & Strategies to Survive on RejectJS 2014
Debugging War Stories & Strategies to Survive on RejectJS 2014
Johannes Weber
 
Updated: Fiese Fallstricke, sexy Strategien
Updated: Fiese Fallstricke, sexy StrategienUpdated: Fiese Fallstricke, sexy Strategien
Updated: Fiese Fallstricke, sexy Strategien
Johannes Weber
 
AngularJS with RequireJS
AngularJS with RequireJSAngularJS with RequireJS
AngularJS with RequireJS
Johannes Weber
 
Facebook, Google, Youtube & co
Facebook, Google, Youtube & coFacebook, Google, Youtube & co
Facebook, Google, Youtube & coJohannes Weber
 
User centered design - Personas
User centered design - PersonasUser centered design - Personas
User centered design - PersonasJohannes Weber
 
Usability Test Inlandsüberweisung
Usability Test InlandsüberweisungUsability Test Inlandsüberweisung
Usability Test InlandsüberweisungJohannes Weber
 
Paper: Steuerung öffentlicher Screens
Paper: Steuerung öffentlicher ScreensPaper: Steuerung öffentlicher Screens
Paper: Steuerung öffentlicher ScreensJohannes Weber
 
Steuerung öffentlicher Screens
Steuerung öffentlicher ScreensSteuerung öffentlicher Screens
Steuerung öffentlicher ScreensJohannes Weber
 
Customer Centered Design
Customer Centered DesignCustomer Centered Design
Customer Centered DesignJohannes Weber
 
Hardware Usability Testing
Hardware Usability TestingHardware Usability Testing
Hardware Usability TestingJohannes Weber
 
Projektmanagement & Innovation
Projektmanagement & InnovationProjektmanagement & Innovation
Projektmanagement & InnovationJohannes Weber
 

Mehr von Johannes Weber (20)

Progressive Web Apps - Intro & Learnings
Progressive Web Apps - Intro & LearningsProgressive Web Apps - Intro & Learnings
Progressive Web Apps - Intro & Learnings
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
 
Formular handling in AngularJS
Formular handling in AngularJSFormular handling in AngularJS
Formular handling in AngularJS
 
AngularJS Munich Meetup #7 - Intro
AngularJS Munich Meetup #7 - IntroAngularJS Munich Meetup #7 - Intro
AngularJS Munich Meetup #7 - Intro
 
#perfmatters - Optimizing the Critical Rendering Path
#perfmatters - Optimizing the Critical Rendering Path#perfmatters - Optimizing the Critical Rendering Path
#perfmatters - Optimizing the Critical Rendering Path
 
LeanJS - Lean startup with JavaScript
LeanJS - Lean startup with JavaScriptLeanJS - Lean startup with JavaScript
LeanJS - Lean startup with JavaScript
 
The evolution of Angular 2 @ AngularJS Munich Meetup #5
The evolution of Angular 2 @ AngularJS Munich Meetup #5The evolution of Angular 2 @ AngularJS Munich Meetup #5
The evolution of Angular 2 @ AngularJS Munich Meetup #5
 
A Story about AngularJS modularization development
A Story about AngularJS modularization developmentA Story about AngularJS modularization development
A Story about AngularJS modularization development
 
Debugging War Stories & Strategies to Survive on RejectJS 2014
Debugging War Stories & Strategies to Survive on RejectJS 2014Debugging War Stories & Strategies to Survive on RejectJS 2014
Debugging War Stories & Strategies to Survive on RejectJS 2014
 
Updated: Fiese Fallstricke, sexy Strategien
Updated: Fiese Fallstricke, sexy StrategienUpdated: Fiese Fallstricke, sexy Strategien
Updated: Fiese Fallstricke, sexy Strategien
 
AngularJS with RequireJS
AngularJS with RequireJSAngularJS with RequireJS
AngularJS with RequireJS
 
Facebook, Google, Youtube & co
Facebook, Google, Youtube & coFacebook, Google, Youtube & co
Facebook, Google, Youtube & co
 
User centered design - Personas
User centered design - PersonasUser centered design - Personas
User centered design - Personas
 
jQuery Performance
jQuery PerformancejQuery Performance
jQuery Performance
 
Usability Test Inlandsüberweisung
Usability Test InlandsüberweisungUsability Test Inlandsüberweisung
Usability Test Inlandsüberweisung
 
Paper: Steuerung öffentlicher Screens
Paper: Steuerung öffentlicher ScreensPaper: Steuerung öffentlicher Screens
Paper: Steuerung öffentlicher Screens
 
Steuerung öffentlicher Screens
Steuerung öffentlicher ScreensSteuerung öffentlicher Screens
Steuerung öffentlicher Screens
 
Customer Centered Design
Customer Centered DesignCustomer Centered Design
Customer Centered Design
 
Hardware Usability Testing
Hardware Usability TestingHardware Usability Testing
Hardware Usability Testing
 
Projektmanagement & Innovation
Projektmanagement & InnovationProjektmanagement & Innovation
Projektmanagement & Innovation
 

Responsive Webdesign: Fiese Fallstricke und sexy Strategien