17. Der responsive Ansatz
Eine Webseite, die sich automatisch dem
Device (Screen-Größe) anpasst
18. 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/
19.
20. Beispiel: trivago
• Sprungstufen-basiertes Layout
• innerhalb der Breakpoints fixe Darstellung
• ohne kompletten Relaunch möglich
26. 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
27. Ja guck ma hier! Dat
passt selbst auf der
Möhre da!
28.
29.
30.
31. Alter Kontext
MODERNER BROWSER
FOKUSIERT
STATIONÄR
BEQUEM
SCHNELLE
VERBINDUNG
SCHNELLE
CPU
EFFIZIENTE EINGABE
47. 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)" />
48. Media Queries
Mehrere Eigenschaften in einer Query
!
@media screen and (max-device-width: 480px) and
(resolution: 163dpi) {
.column {
float: none;
}
}
58. Der User schlägt zurück
https://www.flickr.com/photos/95284782@N06/8880500036
59. 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/
60.
61.
62.
63.
64. 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/
65. 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/
66. Den Ferrari nicht schrotten!
http://www.mobile-zeitgeist.com/2013/08/07/warum-responsive-webdesign-
schrott-ist/