was nicht passt wird responsive gemacht - extended edition
TRANSCRIPT
![Page 1: Was nicht passt wird responsive gemacht - Extended Edition](https://reader030.vdocuments.net/reader030/viewer/2022020314/587723831a28ab2b2c8b4621/html5/thumbnails/1.jpg)
Christoph Reinartz
EXTENDED VERSION
![Page 2: Was nicht passt wird responsive gemacht - Extended Edition](https://reader030.vdocuments.net/reader030/viewer/2022020314/587723831a28ab2b2c8b4621/html5/thumbnails/2.jpg)
/* 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“;
}
![Page 3: Was nicht passt wird responsive gemacht - Extended Edition](https://reader030.vdocuments.net/reader030/viewer/2022020314/587723831a28ab2b2c8b4621/html5/thumbnails/3.jpg)
Die Ausgangslage
![Page 6: Was nicht passt wird responsive gemacht - Extended Edition](https://reader030.vdocuments.net/reader030/viewer/2022020314/587723831a28ab2b2c8b4621/html5/thumbnails/6.jpg)
May the force be with you
Auf jedes Device Dein Design passen muss!
Alles klar!? Auf all den Geräten soll dat laufen?
![Page 7: Was nicht passt wird responsive gemacht - Extended Edition](https://reader030.vdocuments.net/reader030/viewer/2022020314/587723831a28ab2b2c8b4621/html5/thumbnails/7.jpg)
Abweichung von Ideal Parametern
![Page 8: Was nicht passt wird responsive gemacht - Extended Edition](https://reader030.vdocuments.net/reader030/viewer/2022020314/587723831a28ab2b2c8b4621/html5/thumbnails/8.jpg)
![Page 9: Was nicht passt wird responsive gemacht - Extended Edition](https://reader030.vdocuments.net/reader030/viewer/2022020314/587723831a28ab2b2c8b4621/html5/thumbnails/9.jpg)
Mobiler traffic
![Page 10: Was nicht passt wird responsive gemacht - Extended Edition](https://reader030.vdocuments.net/reader030/viewer/2022020314/587723831a28ab2b2c8b4621/html5/thumbnails/10.jpg)
https://www.flickr.com/photos/janitors/10081142374
![Page 12: Was nicht passt wird responsive gemacht - Extended Edition](https://reader030.vdocuments.net/reader030/viewer/2022020314/587723831a28ab2b2c8b4621/html5/thumbnails/12.jpg)
Der klassische Ansatz
• 2 Webseiten •Desktop-Seite • speziell auf mobile Geräte angepasste
mobile Seite • Redirect auf m. * je nach User-Agent
![Page 13: Was nicht passt wird responsive gemacht - Extended Edition](https://reader030.vdocuments.net/reader030/viewer/2022020314/587723831a28ab2b2c8b4621/html5/thumbnails/13.jpg)
Die mobile Site...
![Page 14: Was nicht passt wird responsive gemacht - Extended Edition](https://reader030.vdocuments.net/reader030/viewer/2022020314/587723831a28ab2b2c8b4621/html5/thumbnails/14.jpg)
![Page 15: Was nicht passt wird responsive gemacht - Extended Edition](https://reader030.vdocuments.net/reader030/viewer/2022020314/587723831a28ab2b2c8b4621/html5/thumbnails/15.jpg)
Bullshit
![Page 16: Was nicht passt wird responsive gemacht - Extended Edition](https://reader030.vdocuments.net/reader030/viewer/2022020314/587723831a28ab2b2c8b4621/html5/thumbnails/16.jpg)
Bullshit BullshitBullshit
Bullshit
Bullshit
![Page 17: Was nicht passt wird responsive gemacht - Extended Edition](https://reader030.vdocuments.net/reader030/viewer/2022020314/587723831a28ab2b2c8b4621/html5/thumbnails/17.jpg)
Der responsive AnsatzEine Webseite, die sich automatisch dem Device (Screen-Größe) anpasst
![Page 18: Was nicht passt wird responsive gemacht - Extended Edition](https://reader030.vdocuments.net/reader030/viewer/2022020314/587723831a28ab2b2c8b4621/html5/thumbnails/18.jpg)
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/
![Page 19: Was nicht passt wird responsive gemacht - Extended Edition](https://reader030.vdocuments.net/reader030/viewer/2022020314/587723831a28ab2b2c8b4621/html5/thumbnails/19.jpg)
![Page 20: Was nicht passt wird responsive gemacht - Extended Edition](https://reader030.vdocuments.net/reader030/viewer/2022020314/587723831a28ab2b2c8b4621/html5/thumbnails/20.jpg)
Beispiel: trivago
• Sprungstufen-basiertes Layout • innerhalb der Breakpoints fixe Darstellung • ohne kompletten Relaunch möglich
![Page 21: Was nicht passt wird responsive gemacht - Extended Edition](https://reader030.vdocuments.net/reader030/viewer/2022020314/587723831a28ab2b2c8b4621/html5/thumbnails/21.jpg)
Desktop, iMac, Laptop
![Page 22: Was nicht passt wird responsive gemacht - Extended Edition](https://reader030.vdocuments.net/reader030/viewer/2022020314/587723831a28ab2b2c8b4621/html5/thumbnails/22.jpg)
Landscape Tablet, Netbook
![Page 23: Was nicht passt wird responsive gemacht - Extended Edition](https://reader030.vdocuments.net/reader030/viewer/2022020314/587723831a28ab2b2c8b4621/html5/thumbnails/23.jpg)
IPad, Tablets
![Page 24: Was nicht passt wird responsive gemacht - Extended Edition](https://reader030.vdocuments.net/reader030/viewer/2022020314/587723831a28ab2b2c8b4621/html5/thumbnails/24.jpg)
Filterleiste einblendbar
![Page 25: Was nicht passt wird responsive gemacht - Extended Edition](https://reader030.vdocuments.net/reader030/viewer/2022020314/587723831a28ab2b2c8b4621/html5/thumbnails/25.jpg)
Smartphone
![Page 26: Was nicht passt wird responsive gemacht - Extended Edition](https://reader030.vdocuments.net/reader030/viewer/2022020314/587723831a28ab2b2c8b4621/html5/thumbnails/26.jpg)
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
![Page 27: Was nicht passt wird responsive gemacht - Extended Edition](https://reader030.vdocuments.net/reader030/viewer/2022020314/587723831a28ab2b2c8b4621/html5/thumbnails/27.jpg)
Ja guck ma hier! Dat passt selbst auf der Möhre da!
![Page 28: Was nicht passt wird responsive gemacht - Extended Edition](https://reader030.vdocuments.net/reader030/viewer/2022020314/587723831a28ab2b2c8b4621/html5/thumbnails/28.jpg)
![Page 29: Was nicht passt wird responsive gemacht - Extended Edition](https://reader030.vdocuments.net/reader030/viewer/2022020314/587723831a28ab2b2c8b4621/html5/thumbnails/29.jpg)
![Page 30: Was nicht passt wird responsive gemacht - Extended Edition](https://reader030.vdocuments.net/reader030/viewer/2022020314/587723831a28ab2b2c8b4621/html5/thumbnails/30.jpg)
![Page 31: Was nicht passt wird responsive gemacht - Extended Edition](https://reader030.vdocuments.net/reader030/viewer/2022020314/587723831a28ab2b2c8b4621/html5/thumbnails/31.jpg)
Alter Kontext
MODERNER BROWSER
FOKUSIERT
STATIONÄR
BEQUEM
SCHNELLE VERBINDUNG
SCHNELLE CPU
EFFIZIENTE EINGABE
![Page 32: Was nicht passt wird responsive gemacht - Extended Edition](https://reader030.vdocuments.net/reader030/viewer/2022020314/587723831a28ab2b2c8b4621/html5/thumbnails/32.jpg)
960
https://www.flickr.com/photos/tomwachtel/14015354802
![Page 33: Was nicht passt wird responsive gemacht - Extended Edition](https://reader030.vdocuments.net/reader030/viewer/2022020314/587723831a28ab2b2c8b4621/html5/thumbnails/33.jpg)
2007
https://www.flickr.com/photos/dahlstroms/6750733205
![Page 35: Was nicht passt wird responsive gemacht - Extended Edition](https://reader030.vdocuments.net/reader030/viewer/2022020314/587723831a28ab2b2c8b4621/html5/thumbnails/35.jpg)
Android Fragmentation
http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/
![Page 36: Was nicht passt wird responsive gemacht - Extended Edition](https://reader030.vdocuments.net/reader030/viewer/2022020314/587723831a28ab2b2c8b4621/html5/thumbnails/36.jpg)
![Page 37: Was nicht passt wird responsive gemacht - Extended Edition](https://reader030.vdocuments.net/reader030/viewer/2022020314/587723831a28ab2b2c8b4621/html5/thumbnails/37.jpg)
![Page 39: Was nicht passt wird responsive gemacht - Extended Edition](https://reader030.vdocuments.net/reader030/viewer/2022020314/587723831a28ab2b2c8b4621/html5/thumbnails/39.jpg)
![Page 40: Was nicht passt wird responsive gemacht - Extended Edition](https://reader030.vdocuments.net/reader030/viewer/2022020314/587723831a28ab2b2c8b4621/html5/thumbnails/40.jpg)
Zutaten nach dem Rezept von Ethan Marcotte
!
• Relative Maße • Ein flexibles gridbasiertes Layout • Flexible Images und Medien •Media Queries
![Page 41: Was nicht passt wird responsive gemacht - Extended Edition](https://reader030.vdocuments.net/reader030/viewer/2022020314/587723831a28ab2b2c8b4621/html5/thumbnails/41.jpg)
Sieh das mal relativ!
!!
target / context = result
Erstellung relativer Maße: Fonts / Grids
![Page 42: Was nicht passt wird responsive gemacht - Extended Edition](https://reader030.vdocuments.net/reader030/viewer/2022020314/587723831a28ab2b2c8b4621/html5/thumbnails/42.jpg)
EMs nutzen
• skalierbare Einheit • 1em = aktuelle Fontgröße • 2em = doppelte Fontgröße
![Page 43: Was nicht passt wird responsive gemacht - Extended Edition](https://reader030.vdocuments.net/reader030/viewer/2022020314/587723831a28ab2b2c8b4621/html5/thumbnails/43.jpg)
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 */ } !
![Page 44: Was nicht passt wird responsive gemacht - Extended Edition](https://reader030.vdocuments.net/reader030/viewer/2022020314/587723831a28ab2b2c8b4621/html5/thumbnails/44.jpg)
![Page 45: Was nicht passt wird responsive gemacht - Extended Edition](https://reader030.vdocuments.net/reader030/viewer/2022020314/587723831a28ab2b2c8b4621/html5/thumbnails/45.jpg)
Flexible / fluid mediaFluid Images: max-width
http://clagnut.com/sandbox/imagetest/
img, embed, object, video { max-width: 100%; }
Background-Images: CSS3, MediaQueries
![Page 46: Was nicht passt wird responsive gemacht - Extended Edition](https://reader030.vdocuments.net/reader030/viewer/2022020314/587723831a28ab2b2c8b4621/html5/thumbnails/46.jpg)
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" />
![Page 47: Was nicht passt wird responsive gemacht - Extended Edition](https://reader030.vdocuments.net/reader030/viewer/2022020314/587723831a28ab2b2c8b4621/html5/thumbnails/47.jpg)
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)" />
![Page 48: Was nicht passt wird responsive gemacht - Extended Edition](https://reader030.vdocuments.net/reader030/viewer/2022020314/587723831a28ab2b2c8b4621/html5/thumbnails/48.jpg)
Media Queries
Mehrere Eigenschaften in einer Query !@media screen and (max-device-width: 480px) and
(resolution: 163dpi) { .column {
float: none; } }
![Page 49: Was nicht passt wird responsive gemacht - Extended Edition](https://reader030.vdocuments.net/reader030/viewer/2022020314/587723831a28ab2b2c8b4621/html5/thumbnails/49.jpg)
Viewporthttps://www.flickr.com/photos/mendhak/2252824493
![Page 50: Was nicht passt wird responsive gemacht - Extended Edition](https://reader030.vdocuments.net/reader030/viewer/2022020314/587723831a28ab2b2c8b4621/html5/thumbnails/50.jpg)
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
![Page 51: Was nicht passt wird responsive gemacht - Extended Edition](https://reader030.vdocuments.net/reader030/viewer/2022020314/587723831a28ab2b2c8b4621/html5/thumbnails/51.jpg)
Klassischer Workflow
http://blog.meltmedia.com/2013/04/a-clients-prep-guide-for-a-responsive-project/
![Page 52: Was nicht passt wird responsive gemacht - Extended Edition](https://reader030.vdocuments.net/reader030/viewer/2022020314/587723831a28ab2b2c8b4621/html5/thumbnails/52.jpg)
Responsive Workflow
http://blog.meltmedia.com/2013/04/a-clients-prep-guide-for-a-responsive-project/
![Page 53: Was nicht passt wird responsive gemacht - Extended Edition](https://reader030.vdocuments.net/reader030/viewer/2022020314/587723831a28ab2b2c8b4621/html5/thumbnails/53.jpg)
53https://www.flickr.com/photos/the-magic-tuba-pixie/5806342006
Prototype
![Page 54: Was nicht passt wird responsive gemacht - Extended Edition](https://reader030.vdocuments.net/reader030/viewer/2022020314/587723831a28ab2b2c8b4621/html5/thumbnails/54.jpg)
Prototype
A Prototype is wortha thousand meetings
![Page 55: Was nicht passt wird responsive gemacht - Extended Edition](https://reader030.vdocuments.net/reader030/viewer/2022020314/587723831a28ab2b2c8b4621/html5/thumbnails/55.jpg)
Aus der Praxis
![Page 56: Was nicht passt wird responsive gemacht - Extended Edition](https://reader030.vdocuments.net/reader030/viewer/2022020314/587723831a28ab2b2c8b4621/html5/thumbnails/56.jpg)
A/B Testing
https://www.flickr.com/photos/esparta/4482887906
![Page 57: Was nicht passt wird responsive gemacht - Extended Edition](https://reader030.vdocuments.net/reader030/viewer/2022020314/587723831a28ab2b2c8b4621/html5/thumbnails/57.jpg)
Der User schlägt zurück
![Page 58: Was nicht passt wird responsive gemacht - Extended Edition](https://reader030.vdocuments.net/reader030/viewer/2022020314/587723831a28ab2b2c8b4621/html5/thumbnails/58.jpg)
Der User schlägt zurück
https://www.flickr.com/photos/95284782@N06/8880500036
![Page 59: Was nicht passt wird responsive gemacht - Extended Edition](https://reader030.vdocuments.net/reader030/viewer/2022020314/587723831a28ab2b2c8b4621/html5/thumbnails/59.jpg)
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/
![Page 60: Was nicht passt wird responsive gemacht - Extended Edition](https://reader030.vdocuments.net/reader030/viewer/2022020314/587723831a28ab2b2c8b4621/html5/thumbnails/60.jpg)
![Page 61: Was nicht passt wird responsive gemacht - Extended Edition](https://reader030.vdocuments.net/reader030/viewer/2022020314/587723831a28ab2b2c8b4621/html5/thumbnails/61.jpg)
![Page 62: Was nicht passt wird responsive gemacht - Extended Edition](https://reader030.vdocuments.net/reader030/viewer/2022020314/587723831a28ab2b2c8b4621/html5/thumbnails/62.jpg)
![Page 63: Was nicht passt wird responsive gemacht - Extended Edition](https://reader030.vdocuments.net/reader030/viewer/2022020314/587723831a28ab2b2c8b4621/html5/thumbnails/63.jpg)
![Page 64: Was nicht passt wird responsive gemacht - Extended Edition](https://reader030.vdocuments.net/reader030/viewer/2022020314/587723831a28ab2b2c8b4621/html5/thumbnails/64.jpg)
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 65: Was nicht passt wird responsive gemacht - Extended Edition](https://reader030.vdocuments.net/reader030/viewer/2022020314/587723831a28ab2b2c8b4621/html5/thumbnails/65.jpg)
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/
![Page 66: Was nicht passt wird responsive gemacht - Extended Edition](https://reader030.vdocuments.net/reader030/viewer/2022020314/587723831a28ab2b2c8b4621/html5/thumbnails/66.jpg)
Den Ferrari nicht schrotten!
http://www.mobile-zeitgeist.com/2013/08/07/warum-responsive-webdesign-schrott-ist/
![Page 67: Was nicht passt wird responsive gemacht - Extended Edition](https://reader030.vdocuments.net/reader030/viewer/2022020314/587723831a28ab2b2c8b4621/html5/thumbnails/67.jpg)
Verbesserungenhttps://www.flickr.com/photos/91173606@N00/3448611327
![Page 68: Was nicht passt wird responsive gemacht - Extended Edition](https://reader030.vdocuments.net/reader030/viewer/2022020314/587723831a28ab2b2c8b4621/html5/thumbnails/68.jpg)
Gleiche URL, aber andere Struktur
https://www.flickr.com/photos/chrisdlugosz/3402955869
![Page 69: Was nicht passt wird responsive gemacht - Extended Edition](https://reader030.vdocuments.net/reader030/viewer/2022020314/587723831a28ab2b2c8b4621/html5/thumbnails/69.jpg)
Mobile First Ansatz wählen
https://www.flickr.com/photos/pixel_boogie/3451813645
![Page 70: Was nicht passt wird responsive gemacht - Extended Edition](https://reader030.vdocuments.net/reader030/viewer/2022020314/587723831a28ab2b2c8b4621/html5/thumbnails/70.jpg)
Content First
https://www.flickr.com/photos/klara/4236116910
![Page 71: Was nicht passt wird responsive gemacht - Extended Edition](https://reader030.vdocuments.net/reader030/viewer/2022020314/587723831a28ab2b2c8b4621/html5/thumbnails/71.jpg)
Performance messen / verbessern
https://www.flickr.com/photos/aussiegall/286709039
![Page 72: Was nicht passt wird responsive gemacht - Extended Edition](https://reader030.vdocuments.net/reader030/viewer/2022020314/587723831a28ab2b2c8b4621/html5/thumbnails/72.jpg)
Auf echten Devices testen
https://www.flickr.com/photos/hysysk/4042285394
![Page 73: Was nicht passt wird responsive gemacht - Extended Edition](https://reader030.vdocuments.net/reader030/viewer/2022020314/587723831a28ab2b2c8b4621/html5/thumbnails/73.jpg)
Conditional loading
https://www.flickr.com/photos/webethere/8708630443
![Page 74: Was nicht passt wird responsive gemacht - Extended Edition](https://reader030.vdocuments.net/reader030/viewer/2022020314/587723831a28ab2b2c8b4621/html5/thumbnails/74.jpg)
Responsive Images
![Page 75: Was nicht passt wird responsive gemacht - Extended Edition](https://reader030.vdocuments.net/reader030/viewer/2022020314/587723831a28ab2b2c8b4621/html5/thumbnails/75.jpg)
Responsible RWD
![Page 76: Was nicht passt wird responsive gemacht - Extended Edition](https://reader030.vdocuments.net/reader030/viewer/2022020314/587723831a28ab2b2c8b4621/html5/thumbnails/76.jpg)
http://bradfrostweb.com/blog/post/beyond-squishy-the-principles-of-adaptive-design/
Responsible RWD Der User
![Page 77: Was nicht passt wird responsive gemacht - Extended Edition](https://reader030.vdocuments.net/reader030/viewer/2022020314/587723831a28ab2b2c8b4621/html5/thumbnails/77.jpg)
Ich habe fertig!
!http://www.levien.com/type/myfonts/inconsolata.html
![Page 78: Was nicht passt wird responsive gemacht - Extended Edition](https://reader030.vdocuments.net/reader030/viewer/2022020314/587723831a28ab2b2c8b4621/html5/thumbnails/78.jpg)
Danke! Prosit!
![Page 79: Was nicht passt wird responsive gemacht - Extended Edition](https://reader030.vdocuments.net/reader030/viewer/2022020314/587723831a28ab2b2c8b4621/html5/thumbnails/79.jpg)
Vielen Dank an Senator Film Verleih