Responsive Web Design

Im Rahmen der Mobile Tech Conference 2012 und des dort stattgefundenen Mobile Web Experts Days hielt ich diese Präsentation zum Thema Responsive Web Design als 1,5 stündigen Vortrag um Grundlagen und technische Details zu erläutern.

Transcript

1. Boris Fründt - JvM/next Responsive Web Design
2. Der Speaker. • Boris Fründt • Senior Web Developer • Jung von Matt/next • bondt.me • @bondt
3. Die Agenda. • Der Kontext. • Die Abgrenzung. • Der Begriff. • Die Fragen. • Die Herausforderungen. • Die Vorteile. • Die Lösungsansätze. • Das Fazit.
4. Der Kontext.
5. Der Kontext. Quelle: http://bradfrostweb.com/blog/notes/this-is-the-web/
6. Der Kontext. Quelle: http://bradfrostweb.com/blog/notes/this-is-the-web/
7. Der Kontext. Quelle: http://bradfrostweb.com/blog/notes/this-is-the-web/
8. Der Kontext. Quelle: http://services.google.com/fh/files/misc/multiscreenworld_final.pdf Der Kontext.
9. Die Abgrenzung.
10. Die Abgrenzung - mobile Seiten / Web Apps.
11. Die Abgrenzung - native / hybride Apps.
12. „Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience.“ Ethan Marcotte, 2010 Quelle: http://www.alistapart.com/articles/responsive-web-design
13. Der Begriff.
14. Der Begriff - Responsive Web Design. • "to be responsive" - auf etw. reagieren, auf etw./ jdn. eingehen. • Die Anpassbarkeit einer Webseite auf verschiedene Formfaktoren. • Der Ansatz, dynamisch auf das Verhalten und die Umgebung des Nutzers einzugehen.
15. Der Begriff - Responsive Web Design. • Flexible, Grid basierte Layouts • Flexible Bilder und Videos • Media Queries • Flexible Konzepte, flexible Arbeitsweisen, flexible Kunden, etc.
16. Der Begriff - Adaptive vs. Responsive Design. Adaptive Design Responsive Design
17. Der Begriff - Adaptive vs. Responsive Layouts. • Adaptive: mehrere Layouts mit fester Breite • Responsive: mehrere, fluide Grid Layouts • Hybrid: Kombination der Varianten (feste Breite für große Displays, flexible Breite für kleine)
18. Die Fragen.
19. Die Fragen. • Passt ein responsive Ansatz zum Kunden? • Erwarten Nutzer unterschiedliche Varianten einer Seite auf verschiedenen Devices? • Sind Zeit und entsprechende Ressourcen vorhanden? • Welche Herausforderungen kommen auf uns zu? • Welche Vorteile bieten sich?
20. Die Herausforderungen.
21. Die Herausforderungen. • Dateigröße. • Performance. • Medien (Bilder, &Videos). • Integration von 3rd Party Anwendungen (Banner, Social Widgets). • Mehr Zeit, größerer Aufwand und damit teuerer als nur eine Desktop Seite. • Der Kunde / Projektmanagement.
22. Die Vorteile.
23. Die Vorteile. iPhone optimierte Seite iPad optimierte Seite Desktop optimierte Seite Responsive Web Site Entwicklungsdauer vs.
24. Die Vorteile. • Eine URL. • Ein Markup. • Ein Deployment. • Zukunftssicherheit. • Weniger Zeit, geringerer Aufwand und damit günstiger als separate Varianten.
25. Die Lösungsansätze.
26. Die Lösungsansätze - Media Queries. • @media (min-device-width: 640px) { ... } • @media screen and (device-aspect-ratio: 16/9) { ... } • @media (orientation:portrait) { ... } • <link rel="stylesheet" media="handheld, only screen and (max-device-width: 320px)" href="phone.css"> Quelle der Grafik: http://www.adobe.com/devnet/html5/articles/css3-basics.html
27. Die Lösungsansätze - Media Queries. • Media Types: • all • braille • embossed • handheld • print • projection • screen • tty • tv • (only) • (not) • relevante Konditionen: • max-device-width • min-device-width • max-device-height • min-device-height • orientation • -webkit-min-device- pixel-ratio
28. Die Lösungsansätze - Viewport. Quelle: https://github.com/andreasbovens/understanding-viewport
29. Die Lösungsansätze - Viewport. Quelle: https://github.com/andreasbovens/understanding-viewport
30. Die Lösungsansätze - Viewport. Quelle: https://github.com/andreasbovens/understanding-viewport
31. Die Lösungsansätze - Viewport. • Android Browser unterstützen nicht user- scalable=no • IE interpretiert width=device-width als 320px • Safari auf dem iPad interpretiert width=device-width als 768px in landscape • kann mit initial-scale=1 verhindert werden • führt jedoch zu orientation change bug • patch: https://github.com/scottjehl/iOS- Orientationchange-Fix
32. Die Lösungsansätze - Flexible Grids. target ÷ context = result 700 ÷ 988 = 0.7085 h1 { width: 70.85%; ! ! /* 700px / 988px = 0.7085 */ } 144 ÷ 988 = 0.14575 h1 { margin-left: 14.575%; /* 144px / 988px = 0.14575 */ width: 70.85%; /* 700px / 988px = 0.7085 */ }
33. Quiz: 280px Sidebar in einem 960px Layout?
34. Q: 280px / 960px = ??? A: 0,29167 ~ 30%
35. Die Lösungsansätze - Grid Framworks.
36. Die Lösungsansätze - Flexbox. • CSS Flexible Box Layout Module • W3C CSS Working Drafts • die "Children" einer "Box" können horizontal oder vertikal angeordnet werden (kein float!) • wie sie sich im "Parent" ausrichten kann kontrolliert werden • Flexboxes können ineinander verschachtelt werden
37. Die Lösungsansätze - Flexbox. #flexbox > p:nth-child(3) { box-flex: 1; } • http://umaar.github.com/css-flexbox-demo/ • alte vs. neue Syntax • http://wiki.csswg.org/spec/flexbox-2009-2011-spec-property-mapping • http://dev.w3.org/csswg/css3-flexbox/
38. Die Lösungsansätze - Responsive Images. • Ansatz 1: Streaming Bild-Format • Ansatz 2: Volle Auflösung und per CSS runterskalieren • Ansatz 3: per JS Bild-URL ändern (<img src= "small.jpg?full=large.jpg" />)
39. Die Lösungsansätze - Responsive Images. • Ansatz 4: media-(Größe)-src Attribut (WHATWG) • Ansatz 5: W3C Community Group "Responsive images": <picture> Element (<source src="" media="" />) • Ansatz 6: WHATWG srcset-Attribut • Ansatz 7: SVG
40. Die Lösungsansätze - Responsive Videos. • Ansatz 1. Selbst gehostete Videos mit Hilfe des HTML <video> Tags. • Ansatz 2. YouTube / Vimeo Videos per iFrame. • Ansatz 3. Viddler / Blip.tv per Flash Player. • Standard: Feste Breite und Höhe vergeben. • Was ist zu tun bei flexiblen Layouts?
41. Die Lösungsansätze - Responsive Videos. • Ansatz 1 - Video Tag: video { width: 100%; height: auto; } <div class="videoWrapper"> <iframe width="560" height="349" src="http://www.youtube.com/embed/video_id" frameborder="0" allowfullscreen> </iframe> </div> • Ansatz 2 / 3 - iFrame / Flash Video:
42. Die Lösungsansätze - Responsive Videos. • Ansatz 2 / 3 - iFrame / Flash Video: .videoWrapper { ! position: relative; ! padding-bottom: 56.25%; /* 16:9 */ ! padding-top: 25px; ! height: 0; } .videoWrapper iframe { ! position: absolute; ! top: 0; ! left: 0; ! width: 100%; ! height: 100%; } http://fitvidsjs.com/
43. Die Lösungsansätze - Responsive Text http://fittextjs.com/
44. Die Lösungsansätze - Retina Images. Quelle: http://coding.smashingmagazine.com/2012/08/20/towards-retina-web/
45. Die Lösungsansätze - Retina Images. • Bilder in doppelter Auflösung verwenden • Bilder in der halben Größe anzeigen • Pixel-Dichte abfragen (mit Media Queries oder window.devicePixelRatio) • Alternative: SVG oder Icon-Fonts
46. Die Lösungsansätze - Retina Sprites. • 1. Sprites nutzen! • 2. @2x Version in doppelter Größe mit Assets an entsprechender Position • 3. MQ für high-resolution Displays nutzen und dort das Retina Sprite refernzieren • 4. Background-size für jedes Asset setzen @media only screen and (-Webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) {}
47. Die Lösungsansätze - Retina Sprites. Quelle: http://miekd.com/articles/using-css-sprites-to-optimize-your-website-for-retina-displays/
48. Lösungsansätze - Mobile First. • 1. Starte mit fluiden Layout für mobile Geräte • (Konzentration auf wichtigsten Komponenten, Daten und Interaktionen) • (damit auch Smartphones ohne Media Querie Support unterstützt werden) • (IE ohne Media Queries ist broken aber nutzbar - alternativ respond.js) • 2. Media Queries verwenden, um für größere Screens zu optimieren.
49. Die Lösungsansätze - Weitere Faktoren. • Device Performance • Netzwerk Performance • Device APIs • Ergonomie • Konditionelles Ladeverhalten • > Feature Detection!
50. Die Lösungsansätze - Feature Detection. • Open-Source JS Library • Feature Detection im Frontend • Hilft bei Progressive Enhancement • http://www.modernizr.com/
51. Die Lösungsansätze - Feature Detection. • Server-seitige Feature / Device Detection: • WURFL - Wireless Universal Resource FiLe • DeviceAtlas
52. Die Lösungsansätze - RESS. • Responsive Web Design + Server Side Components • RESS kombiniert adaptive Layouts mit Server seitiger Optimierung einzelner Komponenten Quelle: http://www.lukew.com/ff/entry.asp?1392
53. Das Fazit. • Viele Herausforderungen. • Viele Möglichkeiten. • Zukunftsorientierung. • Responsive Web Design > Media Queries. • Testing! • http://responsive.rga.com/
54. VIELEN DANK!