was nicht passt wird responsive gemacht - extended edition
TRANSCRIPT
Christoph Reinartz
EXTENDED VERSION
/* 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
May the force be with you
Auf jedes Device Dein Design passen muss!
Alles klar!? Auf all den Geräten soll dat laufen?
Abweichung von Ideal Parametern
Mobiler traffic
https://www.flickr.com/photos/janitors/10081142374
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 BullshitBullshit
Bullshit
Bullshit
Der responsive AnsatzEine 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
Android Fragmentation
http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/
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 mediaFluid Images: max-width
http://clagnut.com/sandbox/imagetest/
img, embed, object, video { max-width: 100%; }
Background-Images: CSS3, MediaQueries
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; } }
Viewporthttps://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/
53https://www.flickr.com/photos/the-magic-tuba-pixie/5806342006
Prototype
Prototype
A Prototype is wortha 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/
Verbesserungenhttps://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
http://bradfrostweb.com/blog/post/beyond-squishy-the-principles-of-adaptive-design/
Responsible RWD Der User
Ich habe fertig!
!http://www.levien.com/type/myfonts/inconsolata.html
Danke! Prosit!
Vielen Dank an Senator Film Verleih