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.

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