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.
„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
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.
Der Begriff - Responsive Web Design. • Flexible, Grid basierte Layouts • Flexible Bilder und Videos • Media Queries • Flexible Konzepte, flexible Arbeitsweisen, flexible Kunden, etc.
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)
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?
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.
Die Vorteile. • Eine URL. • Ein Markup. • Ein Deployment. • Zukunftssicherheit. • Weniger Zeit, geringerer Aufwand und damit günstiger als separate Varianten.
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
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
Die Lösungsansätze - Responsive Videos. • Ansatz 1. Selbst gehostete Videos mit Hilfe des HTML 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?
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
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) {}
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.
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
Das Fazit. • Viele Herausforderungen. • Viele Möglichkeiten. • Zukunftsorientierung. • Responsive Web Design > Media Queries. • Testing! • http://responsive.rga.com/