Responsive Web Design is a buzzword. Everyone has heard about it but most do not exactly know what it is in detail. In the first section this talk covers an introduction in responsive webdesign and what are the main technical aspects and workflow changes. the second part handles a success story of the real world project how to transform a non responsive site into a fluid one.
This talk was held on the PHP Usergroup Düsseldorf in April 2014.
2. Der Hauptdarsteller
• “Hello Website“ seit 2001
• Entwicklungslizenz seit 2010
• Frontend-Dev bei trivago seit 2012
!
@pistenprinz
#goveggie #miasanmia
14. 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
25. Live Demo - Teil 1
Pixel Angaben vs. relative Angaben in em
!
https://github.com/creinartz/wnpwrg
26. Flexible Grids
• Designs / Layouts werden in Grids erstellt
• Statische Grids verlangen eine minimale /
festgelegte Bildschirmauflösung
!
Ein flexibles Grid?
Alles eine Frage des Context!
27. Flexible / fluid media
Fluid Images: max-width
http://clagnut.com/sandbox/imagetest/
img,
embed,
object,
video {
max-width: 100%;
}
Background-Images: CSS3, MediaQueries
29. 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)" />
30. Media Queries
Mehrere Eigenschaften in einer Query
!
@media screen and (max-device-width: 480px) and
(resolution: 163dpi) {
.column {
float: none;
}
}
45. Responsive Workflow
• Flexible Layouts entstehen im Browser
• HTML & CSS statt Photoshop
• Es gibt keine statischen Entwürfe mehr
• Content First: Die Layouts zeigen echte Inhalte
• Keine Bilder von Webseiten erstellen
48. Responsive oder mobile Site
• Parallel-Entwicklung
• Performance?
• Code-Redundanz
• Erhöhter Wartungsaufwand
49. Den Ferrari nicht schrotten!
http://www.mobile-zeitgeist.com/2013/08/07/warum-responsive-
webdesign-schrott-ist/
50. Die alternative Route
Sprünge statt fluid
• Aufwände reduzieren
• Breakpoints definieren
• Möglichst wenig Layout-Switches
51. „Full“ fluid – „Full“ responsive?
• Wie sollen sich die Elemente verhalten?
• Bei komplexen Designs führt dies oft zu
Aufwands- und Spezifikationsexplosionen
• Geschäftskritische Bereiche beachten
• Wie ist das Userverhalten?