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.
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
- 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.
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)
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?
• Integration von 3rd Party Anwendungen (Banner, Social Widgets). • Mehr Zeit, größerer Aufwand und damit teuerer als nur eine Desktop Seite. • Der Kunde / Projektmanagement.
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
• 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
} • 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/
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?
verwenden • Bilder in der halben Größe anzeigen • Pixel-Dichte abfragen (mit Media Queries oder window.devicePixelRatio) • Alternative: SVG oder Icon-Fonts
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) {}
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.
Side Components • RESS kombiniert adaptive Layouts mit Server seitiger Optimierung einzelner Komponenten Quelle: http://www.lukew.com/ff/entry.asp?1392