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 full-size slide

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

    View full-size slide

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

    View full-size slide

  4. Der Kontext.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  9. Die Abgrenzung.

    View full-size slide

  10. Die Abgrenzung -
    mobile Seiten / Web Apps.

    View full-size slide

  11. Die Abgrenzung -
    native / hybride Apps.

    View full-size 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 full-size slide

  13. Der Begriff.

    View full-size 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 full-size 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 full-size slide

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

    View full-size 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 full-size slide

  18. 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 full-size slide

  19. Die Herausforderungen.

    View full-size slide

  20. 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 full-size slide

  21. Die Vorteile.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  24. Die Lösungsansätze.

    View full-size slide

  25. 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 full-size slide

  26. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  30. 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 full-size slide

  31. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  35. 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 full-size slide

  36. 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 full-size slide

  37. 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 full-size slide

  38. 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 full-size slide

  39. 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 full-size slide

  40. 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 full-size slide

  41. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  44. 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 full-size slide

  45. 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 full-size slide

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

    View full-size slide

  47. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  51. 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 full-size slide

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

    View full-size slide

  53. VIELEN DANK!

    View full-size slide