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. Boris Fründt - JvM/next
    Responsive Web Design

    View Slide

  2. Der Speaker.
    • Boris Fründt
    • Senior Web Developer
    • Jung von Matt/next
    • bondt.me
    • @bondt

    View Slide

  3. Die Agenda.
    • Der Kontext.
    • Die Abgrenzung.
    • Der Begriff.
    • Die Fragen.
    • Die Herausforderungen.
    • Die Vorteile.
    • Die Lösungsansätze.
    • Das Fazit.

    View Slide

  4. Der Kontext.

    View Slide

  5. Der Kontext.
    Quelle: http://bradfrostweb.com/blog/notes/this-is-the-web/

    View Slide

  6. Der Kontext.
    Quelle: http://bradfrostweb.com/blog/notes/this-is-the-web/

    View Slide

  7. Der Kontext.
    Quelle: http://bradfrostweb.com/blog/notes/this-is-the-web/

    View Slide

  8. Der Kontext.
    Quelle: http://services.google.com/fh/files/misc/multiscreenworld_final.pdf
    Der Kontext.

    View Slide

  9. Die Abgrenzung.

    View Slide

  10. Die Abgrenzung -
    mobile Seiten / Web Apps.

    View Slide

  11. Die Abgrenzung -
    native / hybride Apps.

    View Slide

  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

    View Slide

  13. Der Begriff.

    View Slide

  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.

    View Slide

  15. Der Begriff -
    Responsive Web Design.
    • Flexible, Grid basierte Layouts
    • Flexible Bilder und Videos
    • Media Queries
    • Flexible Konzepte, flexible Arbeitsweisen,
    flexible Kunden, etc.

    View Slide

  16. Der Begriff -
    Adaptive vs. Responsive Design.
    Adaptive Design
    Responsive
    Design

    View Slide

  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)

    View Slide

  18. Die Fragen.

    View Slide

  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?

    View Slide

  20. Die Herausforderungen.

    View Slide

  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.

    View Slide

  22. Die Vorteile.

    View Slide

  23. Die Vorteile.
    iPhone
    optimierte
    Seite
    iPad
    optimierte
    Seite
    Desktop
    optimierte
    Seite
    Responsive
    Web Site
    Entwicklungsdauer
    vs.

    View Slide

  24. Die Vorteile.
    • Eine URL.
    • Ein Markup.
    • Ein Deployment.
    • Zukunftssicherheit.
    • Weniger Zeit, geringerer Aufwand und damit
    günstiger als separate Varianten.

    View Slide

  25. Die Lösungsansätze.

    View Slide

  26. Die Lösungsansätze -
    Media Queries.
    • @media (min-device-width: 640px) { ... }
    • @media screen and (device-aspect-ratio: 16/9) { ... }
    • @media (orientation:portrait) { ... }

    Quelle der Grafik: http://www.adobe.com/devnet/html5/articles/css3-basics.html

    View Slide

  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

    View Slide

  28. Die Lösungsansätze -
    Viewport.
    Quelle: https://github.com/andreasbovens/understanding-viewport

    View Slide

  29. Die Lösungsansätze -
    Viewport.
    Quelle: https://github.com/andreasbovens/understanding-viewport

    View Slide

  30. Die Lösungsansätze -
    Viewport.
    Quelle: https://github.com/andreasbovens/understanding-viewport

    View Slide

  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

    View Slide

  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 */
    }

    View Slide

  33. Quiz:
    280px Sidebar in einem
    960px Layout?

    View Slide

  34. Q: 280px / 960px = ???
    A: 0,29167 ~ 30%

    View Slide

  35. Die Lösungsansätze -
    Grid Framworks.

    View Slide

  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

    View Slide

  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/

    View Slide

  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
    ()

    View Slide

  39. Die Lösungsansätze -
    Responsive Images.
    • Ansatz 4: media-(Größe)-src Attribut
    (WHATWG)
    • Ansatz 5: W3C Community Group
    "Responsive images": Element
    ()
    • Ansatz 6: WHATWG srcset-Attribut
    • Ansatz 7: SVG

    View Slide

  40. 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?

    View Slide

  41. Die Lösungsansätze -
    Responsive Videos.
    • Ansatz 1 - Video Tag:
    video {
    width: 100%;
    height: auto;
    }

    src="http://www.youtube.com/embed/video_id" frameborder="0"
    allowfullscreen>


    • Ansatz 2 / 3 - iFrame / Flash Video:

    View Slide

  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/

    View Slide

  43. Die Lösungsansätze -
    Responsive Text
    http://fittextjs.com/

    View Slide

  44. Die Lösungsansätze -
    Retina Images.
    Quelle: http://coding.smashingmagazine.com/2012/08/20/towards-retina-web/

    View Slide

  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

    View Slide

  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) {}

    View Slide

  47. Die Lösungsansätze -
    Retina Sprites.
    Quelle: http://miekd.com/articles/using-css-sprites-to-optimize-your-website-for-retina-displays/

    View Slide

  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.

    View Slide

  49. Die Lösungsansätze -
    Weitere Faktoren.
    • Device Performance
    • Netzwerk Performance
    • Device APIs
    • Ergonomie
    • Konditionelles Ladeverhalten
    • > Feature Detection!

    View Slide

  50. Die Lösungsansätze -
    Feature Detection.
    • Open-Source JS Library
    • Feature Detection im Frontend
    • Hilft bei Progressive Enhancement
    • http://www.modernizr.com/

    View Slide

  51. Die Lösungsansätze -
    Feature Detection.
    • Server-seitige Feature / Device Detection:
    • WURFL - Wireless Universal Resource FiLe
    • DeviceAtlas

    View Slide

  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

    View Slide

  53. Das Fazit.
    • Viele Herausforderungen.
    • Viele Möglichkeiten.
    • Zukunftsorientierung.
    • Responsive Web Design > Media Queries.
    • Testing!
    • http://responsive.rga.com/

    View Slide

  54. VIELEN DANK!

    View Slide