SlideShare ist ein Scribd-Unternehmen logo
EXTENDED VERSION 
Christoph Reinartz
/* About me */ 
.me { 
name: “Christoph Reinartz“; 
link: “http://creinartz.de“; 
twitter: “@pistenprinz“; 
location: “Mönchengladbach“; 
} 
.job--trv { 
company: “trivago GmbH“; 
title: “Front-end Developer“; 
from: “November 2012“; 
responsibilities: “Coordination UI-Development“, 
“Front-end/CSS architecture“; 
}
Die Ausgangslage
https://www.flickr.com/photos/glenscott/509720363
https://www.flickr.com/photos/lukew/10430507184/
Auf jedes 
Device Dein 
Design passen 
muss! 
May the force be with you 
Alles klar!? 
Auf all den Geräten 
soll dat laufen?
Abweichung von Ideal Parametern
Mobiler traffic
https://www.flickr.com/photos/janitors/10081142374
https://www.flickr.com/photos/scaar/8473324580
Der klassische Ansatz 
• 2 Webseiten 
• Desktop-Seite 
• speziell auf mobile Geräte angepasste 
mobile Seite 
• Redirect auf m. * je nach User-Agent
Die mobile Site...
Bullshit
Bullshit 
Bullshit 
Bullshit 
Bullshit 
Bullshit
Der responsive Ansatz 
Eine Webseite, die sich automatisch dem 
Device (Screen-Größe) anpasst
Beispiel: The Boston Globe 
• Full „fluid“ responsive 
• fluid innerhalb der Breakpoints 
• funktioniert gut bei textlastigen Seiten 
http://upstatement.com/blog/2012/01/how-to-approach-a-responsive-design/
Beispiel: trivago 
• Sprungstufen-basiertes Layout 
• innerhalb der Breakpoints fixe Darstellung 
• ohne kompletten Relaunch möglich
Desktop, iMac, Laptop
Landscape Tablet, Netbook
IPad, Tablets
Filterleiste einblendbar
Smartphone
Eine Definition 
Responsive web design isn’t 
your site working on phones and tablets. 
It’s about your site working 
everywhere. 
https://twitter.com/ScottKellum
Ja guck ma hier! Dat 
passt selbst auf der 
Möhre da!
Alter Kontext 
MODERNER BROWSER 
FOKUSIERT 
STATIONÄR 
BEQUEM 
SCHNELLE 
VERBINDUNG 
SCHNELLE 
CPU 
EFFIZIENTE EINGABE
960 
https://www.flickr.com/photos/tomwachtel/14015354802
2007 
https://www.flickr.com/photos/dahlstroms/6750733205
http://maddesigns.de/responsive-workflow/#11
Android Fragmentation 
http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/
https://www.flickr.com/photos/adactio/5818096043
Zutaten nach dem Rezept 
von Ethan Marcotte 
! 
• Relative Maße 
• Ein flexibles gridbasiertes Layout 
• Flexible Images und Medien 
• Media Queries
Sieh das mal relativ! 
! 
! 
target / context = result 
Erstellung relativer Maße: Fonts / Grids
EMs nutzen 
• skalierbare Einheit 
• 1em = aktuelle Fontgröße 
• 2em = doppelte Fontgröße
Flexible Grids / Maße 
#page { 
max-width: 61.75em; /* 988px / 16px = 61.75em */ 
} 
h1 { 
margin-left: 14.575%; /* 144px / 988px = 0.14575 */ 
width: 70.85%; /* 700px / 988px = 0.7085 */ 
} 
!
Flexible / fluid media 
Fluid Images: max-width 
img, 
embed, 
object, 
video { 
max-width: 100%; 
} 
Background-Images: CSS3, MediaQueries 
http://clagnut.com/sandbox/imagetest/
Media Types 
CSS 2.1 Media Types 
! 
<link rel="stylesheet" type="text/css" 
href="core.css" media="screen" /> 
! 
<link rel="stylesheet" type="text/css" 
href="print.css" media="print" />
Media Queries 
CSS3 
Nicht nur Device Typen sondern 
Devicegerätetypische Eigenschaften abfragen 
! 
<link rel="stylesheet" type="text/css" 
href="style.css" media="screen and (device-width: 
480px)" />
Media Queries 
Mehrere Eigenschaften in einer Query 
! 
@media screen and (max-device-width: 480px) and 
(resolution: 163dpi) { 
.column { 
float: none; 
} 
}
Viewport 
https://www.flickr.com/photos/mendhak/2252824493
Viewport-Metatag 
<meta content="width=device-width, initial-scale= 
1.0" name="viewport" /> 
Mit Viewport-Metatag 
viewport-width = device-width 
! 
Ohne Viewport-Metatag 
Default-Canvas ~980px 
http://bkaprt.com/rwd/29
Klassischer Workflow 
http://blog.meltmedia.com/2013/04/a-clients-prep-guide-for-a-responsive- 
project/
Responsive Workflow 
http://blog.meltmedia.com/2013/04/a-clients-prep-guide-for-a-responsive- 
project/
53 
Prototype 
https://www.flickr.com/photos/the-magic-tuba-pixie/5806342006
Prototype 
A Prototype is worth 
a thousand meetings
Aus der Praxis
A/B Testing 
https://www.flickr.com/photos/esparta/4482887906
Der User schlägt zurück
Der User schlägt zurück 
https://www.flickr.com/photos/95284782@N06/8880500036
The Truth… 
Your visitors don’t give 
a shit if your site 
is responsive. 
http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/
Mobile Strategie 
You May Be Losing Users 
If Responsive Web Design Is Your Only 
Mobile Strategy 
http://www.smashingmagazine.com/2014/07/22/responsive-web-design-should-not-be-your-only-mobile-strategy/
Page Sizes 
72% of responsive websites deliver the 
same number of bytes regardless of 
screen size, even on slow mobile network 
connections. 
http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/
Den Ferrari nicht schrotten! 
http://www.mobile-zeitgeist.com/2013/08/07/warum-responsive-webdesign- 
schrott-ist/
Verbesserungen 
https://www.flickr.com/photos/91173606@N00/3448611327
Gleiche URL, aber andere Struktur 
https://www.flickr.com/photos/chrisdlugosz/3402955869
Mobile First Ansatz wählen 
https://www.flickr.com/photos/pixel_boogie/3451813645
Content First 
https://www.flickr.com/photos/klara/4236116910
Performance messen / verbessern 
https://www.flickr.com/photos/aussiegall/286709039
Auf echten Devices testen 
https://www.flickr.com/photos/hysysk/4042285394
Conditional loading 
https://www.flickr.com/photos/webethere/8708630443
Responsive Images
Responsible RWD
Responsible RWD Der User 
http://bradfrostweb.com/ 
blog/post/beyond-squishy-the- 
principles-of-adaptive-design/
Ich habe fertig! 
! http://www.levien.com/type/myfonts/inconsolata.html
Danke! Prosit!
Vielen Dank an Senator Film Verleih

Weitere ähnliche Inhalte

Andere mochten auch

Managing Responsive Design Projects
Managing Responsive Design ProjectsManaging Responsive Design Projects
Managing Responsive Design Projects
Andrew Smyk
 
Designing for Time Travel: When Responsive Design Is Not Enough
Designing for Time Travel: When Responsive Design Is Not EnoughDesigning for Time Travel: When Responsive Design Is Not Enough
Designing for Time Travel: When Responsive Design Is Not Enough
Burin Asavesna
 
Project Ironman - Large Scale CSS Refactoring @trivago
Project Ironman - Large Scale CSS Refactoring @trivagoProject Ironman - Large Scale CSS Refactoring @trivago
Project Ironman - Large Scale CSS Refactoring @trivago
Christoph Reinartz
 
about:consistency - lesson learned: the hard way
about:consistency - lesson learned: the hard wayabout:consistency - lesson learned: the hard way
about:consistency - lesson learned: the hard way
Christoph Reinartz
 
Plots in Neemrana-Behror,8459137252
Plots in Neemrana-Behror,8459137252Plots in Neemrana-Behror,8459137252
Plots in Neemrana-Behror,8459137252
sahilkharkara5
 
pixantrone professional chemist information
pixantrone professional chemist informationpixantrone professional chemist information
pixantrone professional chemist information
Ali El-Shafay
 
L2G Facebook para Pymes - Introducción
L2G Facebook para Pymes - IntroducciónL2G Facebook para Pymes - Introducción
L2G Facebook para Pymes - Introducción
icontreras79
 
Bintang open source
Bintang open sourceBintang open source
Bintang open source
Khabhebheesh Khabhebheesh
 

Andere mochten auch (8)

Managing Responsive Design Projects
Managing Responsive Design ProjectsManaging Responsive Design Projects
Managing Responsive Design Projects
 
Designing for Time Travel: When Responsive Design Is Not Enough
Designing for Time Travel: When Responsive Design Is Not EnoughDesigning for Time Travel: When Responsive Design Is Not Enough
Designing for Time Travel: When Responsive Design Is Not Enough
 
Project Ironman - Large Scale CSS Refactoring @trivago
Project Ironman - Large Scale CSS Refactoring @trivagoProject Ironman - Large Scale CSS Refactoring @trivago
Project Ironman - Large Scale CSS Refactoring @trivago
 
about:consistency - lesson learned: the hard way
about:consistency - lesson learned: the hard wayabout:consistency - lesson learned: the hard way
about:consistency - lesson learned: the hard way
 
Plots in Neemrana-Behror,8459137252
Plots in Neemrana-Behror,8459137252Plots in Neemrana-Behror,8459137252
Plots in Neemrana-Behror,8459137252
 
pixantrone professional chemist information
pixantrone professional chemist informationpixantrone professional chemist information
pixantrone professional chemist information
 
L2G Facebook para Pymes - Introducción
L2G Facebook para Pymes - IntroducciónL2G Facebook para Pymes - Introducción
L2G Facebook para Pymes - Introducción
 
Bintang open source
Bintang open sourceBintang open source
Bintang open source
 

Ähnlich wie Was nicht passt wird responsive gemacht - Extended Edition

Echte Lösungen, keine Tricks
Echte Lösungen, keine TricksEchte Lösungen, keine Tricks
Echte Lösungen, keine Tricks
Jens Grochtdreis
 
Sencha Touch & PhoneGap
Sencha Touch & PhoneGapSencha Touch & PhoneGap
Sencha Touch & PhoneGap
Stefan Kolb
 
Web Performance Optimization - Web Tech Conference 2011 Talk
Web Performance Optimization - Web Tech Conference 2011 TalkWeb Performance Optimization - Web Tech Conference 2011 Talk
Web Performance Optimization - Web Tech Conference 2011 TalkFabian Lange
 
Von Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und WespenVon Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und Wespen
Jens Grochtdreis
 
Von Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und WespenVon Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und Wespen
Tomas Caspers
 
CSS3 Media Queries
CSS3 Media QueriesCSS3 Media Queries
CSS3 Media Queries
Francesco Schwarz
 
Kleiner Blick auf CSS3
Kleiner Blick auf CSS3Kleiner Blick auf CSS3
Kleiner Blick auf CSS3
Jens Grochtdreis
 
Responsive Webdesign - Unter der Haube
Responsive Webdesign - Unter der HaubeResponsive Webdesign - Unter der Haube
Responsive Webdesign - Unter der Haube
falconwhite
 
Knockin' on heaven's door - Die Praxis zu Besuch beim W3C
Knockin' on heaven's door - Die Praxis zu Besuch beim W3CKnockin' on heaven's door - Die Praxis zu Besuch beim W3C
Knockin' on heaven's door - Die Praxis zu Besuch beim W3C
Jens Grochtdreis
 
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)
André Krämer
 
Sencha Touch und PhoneGap
Sencha Touch und PhoneGapSencha Touch und PhoneGap
Sencha Touch und PhoneGap
Indiginox
 
Responsive Images
Responsive ImagesResponsive Images
Responsive Images
Sven Wolfermann
 
Wir brauchen einen neuen Workflow
Wir brauchen einen neuen WorkflowWir brauchen einen neuen Workflow
Wir brauchen einen neuen Workflow
Jens Grochtdreis
 
Am Ende ist doch alles HTML - 2012 - Webmontag Edition
Am Ende ist doch alles HTML - 2012 - Webmontag EditionAm Ende ist doch alles HTML - 2012 - Webmontag Edition
Am Ende ist doch alles HTML - 2012 - Webmontag Edition
Jens Grochtdreis
 
BizSpark goes Cloud
BizSpark goes CloudBizSpark goes Cloud
BizSpark goes Cloud
Patric Boscolo
 
Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Patrick Lauke
 
Responsive Webdesign Process
Responsive Webdesign ProcessResponsive Webdesign Process
Responsive Webdesign Process
Sven Wolfermann
 
Web Performance Optimization - JAX 2011 Talk
Web Performance Optimization - JAX 2011 TalkWeb Performance Optimization - JAX 2011 Talk
Web Performance Optimization - JAX 2011 Talk
Fabian Lange
 
HTML5-Legacy-Anwendungen
HTML5-Legacy-AnwendungenHTML5-Legacy-Anwendungen
HTML5-Legacy-Anwendungen
Jonathan Weiß
 
Focus on Quality - Bessere Webfrontends durch Web Components
Focus on Quality - Bessere Webfrontends durch Web ComponentsFocus on Quality - Bessere Webfrontends durch Web Components
Focus on Quality - Bessere Webfrontends durch Web Components
PatrickHillert
 

Ähnlich wie Was nicht passt wird responsive gemacht - Extended Edition (20)

Echte Lösungen, keine Tricks
Echte Lösungen, keine TricksEchte Lösungen, keine Tricks
Echte Lösungen, keine Tricks
 
Sencha Touch & PhoneGap
Sencha Touch & PhoneGapSencha Touch & PhoneGap
Sencha Touch & PhoneGap
 
Web Performance Optimization - Web Tech Conference 2011 Talk
Web Performance Optimization - Web Tech Conference 2011 TalkWeb Performance Optimization - Web Tech Conference 2011 Talk
Web Performance Optimization - Web Tech Conference 2011 Talk
 
Von Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und WespenVon Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und Wespen
 
Von Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und WespenVon Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und Wespen
 
CSS3 Media Queries
CSS3 Media QueriesCSS3 Media Queries
CSS3 Media Queries
 
Kleiner Blick auf CSS3
Kleiner Blick auf CSS3Kleiner Blick auf CSS3
Kleiner Blick auf CSS3
 
Responsive Webdesign - Unter der Haube
Responsive Webdesign - Unter der HaubeResponsive Webdesign - Unter der Haube
Responsive Webdesign - Unter der Haube
 
Knockin' on heaven's door - Die Praxis zu Besuch beim W3C
Knockin' on heaven's door - Die Praxis zu Besuch beim W3CKnockin' on heaven's door - Die Praxis zu Besuch beim W3C
Knockin' on heaven's door - Die Praxis zu Besuch beim W3C
 
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)
 
Sencha Touch und PhoneGap
Sencha Touch und PhoneGapSencha Touch und PhoneGap
Sencha Touch und PhoneGap
 
Responsive Images
Responsive ImagesResponsive Images
Responsive Images
 
Wir brauchen einen neuen Workflow
Wir brauchen einen neuen WorkflowWir brauchen einen neuen Workflow
Wir brauchen einen neuen Workflow
 
Am Ende ist doch alles HTML - 2012 - Webmontag Edition
Am Ende ist doch alles HTML - 2012 - Webmontag EditionAm Ende ist doch alles HTML - 2012 - Webmontag Edition
Am Ende ist doch alles HTML - 2012 - Webmontag Edition
 
BizSpark goes Cloud
BizSpark goes CloudBizSpark goes Cloud
BizSpark goes Cloud
 
Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010
 
Responsive Webdesign Process
Responsive Webdesign ProcessResponsive Webdesign Process
Responsive Webdesign Process
 
Web Performance Optimization - JAX 2011 Talk
Web Performance Optimization - JAX 2011 TalkWeb Performance Optimization - JAX 2011 Talk
Web Performance Optimization - JAX 2011 Talk
 
HTML5-Legacy-Anwendungen
HTML5-Legacy-AnwendungenHTML5-Legacy-Anwendungen
HTML5-Legacy-Anwendungen
 
Focus on Quality - Bessere Webfrontends durch Web Components
Focus on Quality - Bessere Webfrontends durch Web ComponentsFocus on Quality - Bessere Webfrontends durch Web Components
Focus on Quality - Bessere Webfrontends durch Web Components
 

Was nicht passt wird responsive gemacht - Extended Edition