Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Responsive Web Design

Boris Fründt
September 06, 2012

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.

Boris Fründt

September 06, 2012
Tweet

More Decks by Boris Fründt

Other Decks in Technology

Transcript

  1. Der Speaker. • Boris Fründt • Senior Web Developer •

    Jung von Matt/next • bondt.me • @bondt
  2. Die Agenda. • Der Kontext. • Die Abgrenzung. • Der

    Begriff. • Die Fragen. • Die Herausforderungen. • Die Vorteile. • Die Lösungsansätze. • Das Fazit.
  3. „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
  4. 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.
  5. Der Begriff - Responsive Web Design. • Flexible, Grid basierte

    Layouts • Flexible Bilder und Videos • Media Queries • Flexible Konzepte, flexible Arbeitsweisen, flexible Kunden, etc.
  6. 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)
  7. 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?
  8. 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.
  9. Die Vorteile. • Eine URL. • Ein Markup. • Ein

    Deployment. • Zukunftssicherheit. • Weniger Zeit, geringerer Aufwand und damit günstiger als separate Varianten.
  10. 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
  11. 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
  12. 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
  13. 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 */ }
  14. 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
  15. 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/
  16. 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" />)
  17. 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
  18. 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?
  19. 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:
  20. 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/
  21. 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
  22. 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) {}
  23. 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.
  24. Die Lösungsansätze - Weitere Faktoren. • Device Performance • Netzwerk

    Performance • Device APIs • Ergonomie • Konditionelles Ladeverhalten • > Feature Detection!
  25. Die Lösungsansätze - Feature Detection. • Open-Source JS Library •

    Feature Detection im Frontend • Hilft bei Progressive Enhancement • http://www.modernizr.com/
  26. Die Lösungsansätze - Feature Detection. • Server-seitige Feature / Device

    Detection: • WURFL - Wireless Universal Resource FiLe • DeviceAtlas
  27. 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
  28. Das Fazit. • Viele Herausforderungen. • Viele Möglichkeiten. • Zukunftsorientierung.

    • Responsive Web Design > Media Queries. • Testing! • http://responsive.rga.com/