1. Was ist Responsive Webdesign?

    • ON
    • OFF

    Responsive Webdesign heißt „reaktionsfähiges Webdesign“.
    Das bedeutet:
    Das Layout der Website „reagiert“ und passt sich an die Auflösung des Gerätes an.

  2. Warum Responsive Webdesign?

  3. 1. Entwicklung der Internetnutzung

    DESKTOP
    MOBILE
    Internet Nutzer
    (Millionen)
    Jahre
  4. Fazit:
    Mobilgeräte müssen berücksichtigt werden!

  5. 2. Verschiedene Auflösungen

    Höhe
    (Pixel)
    Breite
    (Pixel)
    Es gibt unzählig viele
    verscheidene Auflösungen!
  6. Fazit:
    Es ist nicht möglich für jede Auflösung ein eigenes Design zu entwickeln.

  7. Die Lösung heißt:
    Responsive Webdesign!

  8. Wie funktioniert Responsive Webdesign?

  9. 1. Flexibles Layout

    Spalten werden zu Klein.
    Das Layout bricht.
    Relative Größen

    Über relative Größenangaben wird sichergestellt, dass sich das Layout proportional zur Auflösung verändert.

    Jedoch können so nicht alle Auflösungen (von Smartphone bis Desktop) ideal dargestellt werden.
  10. 2. Unterschiedliche Layouts

    Das Layout passt sich an.
    Text bleibt lesbar.
    Media Queries

    Mit Hilfe von Media Queries werden Breakpoints erzeugt, an denen das Layout wechselt.

    Zwischen zwei Breakpoints ändert sich die Größe weiterhin über relative Größenangaben.
  11. Und bringt das wirklich etwas?

  12. Ja, Andere haben es vorgemacht:

    TIME
    Skinny Ties
    O'Neill
    TIME

    Nach der Umstellung auf Responsive Webdesign hat TIME folgende Zahlen veröffentlicht:

    23% mehr Besucher der mobilen Website

    Die Anzahl der besuchten Unterseiten pro Besuch ist deutlich gestiegen

    Die Zeit die auf der Website verbracht wird ist um 7.5% gestiegen
    Skinny Ties

    Nach der Umstellung auf Responsive Webdesign hat Skinny Ties folgende Zahlen veröffentlicht:

    42% Gewinnsteigerung auf allen Geräten

    377,6% Gewinnsteigerung auf iPhone

    13,6% mehr Umtausche auf allen Geräten

    71,9% mehr Umtausche auf iPhone
    O'Neill

    Nach der Umstellung auf Responsive Webdesign hat O'Neill folgende Zahlen veröffentlicht:

    101,2% Gewinnsteigerung auf iPhone

    41,1% Gewinnsteigerung auf nicht-mobilen Geräten

    407,3% mehr Umtausche auf Android Geräten

    65,7% mehr Umtausche auf iPhone
  13. Responsive Webdesign
    Katharina Clasen
    Timo Göbel
    Interaktive Infografiken 2013