20. Der responsive Ansatz
Eine Webseite, die sich automatisch dem
Device (Screen-Größe) anpasst
21. 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/
22.
23. Beispiel: trivago
• Sprungstufen-basiertes Layout
• adaptives Layout
• innerhalb der Breakpoints fixe Darstellung
• ohne kompletten Relaunch möglich
29. 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
53. 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)" />
54. Media Queries
Mehrere Eigenschaften in einer Query
!
@media screen and (max-device-width: 480px)
and (resolution: 192dpi) {
.column {
float: none;
}
}
72. 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/
73. 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/
74. Den Ferrari nicht schrotten!
http://www.mobile-zeitgeist.com/2013/08/07/warum-responsive-webdesign-
schrott-ist/