Kolloquium Wissensinfrastruktur - WS 2014/15

Responsive Webdesign

von Alexander Dehne und Sebastian Wolf

http://ub.unibi.de/kwirwd

Version 1.0, letzte Aktualisierung: 27.11.2014

Beispiele

QR-Code mit dem Smartphone einscannen
oder http://ub.unibi.de/rwdbsp aufrufen

Definition

Beim Responsive Webdesign (RWD) wird nur eine einzige Version der Website erstellt. Diese passt sich selbstständig der verfügbaren Umgebung (Endgerät) an.

Responsive Webseiten können somit auf die Eigenschaften (Displaygröße etc.) des Endgeräts (Smartphones, Tablets, Desktop …) reagieren.

Warum überhaupt
Responsive Webdesign?

Wachsende Vielfalt an Displaygrößen

  • 4K-Monitore (27"+)
  • Full-HD-Monitore (22-27")
  • Kleinere Monitore (17-22")
  • Laptops (12-17")
  • Netbooks / Tablets (7-12")
  • Große Smartphones (5-7")
  • Kleine Smartphones (3-5")
  • Smartwatches (< 2")

Anteil mobiler Nutzer mit kleineren Displays wächst ständig, ebenso die Anzahl der Nutzer mit sehr großen Displays

Wachsende Vielfalt an Displaygrößen

Wachsende Vielfalt an Displaygrößen

Dieses Bild zeigt nur die mobilen Endgeräte von Samsung (2013)

… und Auflösungen

… aber wir haben doch schon eine "mobile" Website?

  • Berücksichtigt nur kleine / mittelgroße Smartphones
  • Für große Smartphones / Tablets ungeeignet
  • Umfasst nicht das vollständige Angebot
  • Doppelter Pflegeaufwand

RWD-Alternative: Mobile Apps?

  • Nutzen Funktionen / Speicher mobiler Geräte optimal aus
  • Aufwändig zu programmieren
  • Getrennte Apps für verschiedene Betriebssysteme (Android, iOS, Windows)
  • Doppelter Pflegeaufwand bleibt bestehen / verstärkt sich

Layout-Typen

  • Fixed
  • Elastic
  • Fluid
  • Adaptive
  • Responsive

Fixed Design

  • Alle Größenangaben in Pixel (px)
  • Ermöglicht exaktes (pixelgenaues) Layout
  • Nicht flexibel
  • "Optimiert" für mittelgroße Desktop-Monitore
    Beispiel
    Beispiel mit größerer Schrift
  • Zu klein für Smartphones / Tablets
  • Zu viel Weißraum auf großen Displays

Elastic Design

Zwei verschiedene Bedeutungen

Elastic Design I

  • Angaben in em statt in px
  • Breite und Höhe passt sich der Basis-Schriftgröße an
  • "Optimiert" für mittelgroße Desktop-Monitore
    Beispiel
    Beispiel mit größerer Schrift
  • Nicht geeignet bei kleineren oder großen Displays

Elastic Design II

  • Breiten- und Höhenangaben in % (relative Maßeinheit)
    Animation: Relative und absolute Maßeinheiten
  • Breite und Höhe aller Elemente passt sich Display an
  • Mindest- und Maximalbreite notwendig, da Schrift sonst zu klein / zu groß wird
    Animation: Maximalbreiten
  • Flexibel nur innerhalb eines bestimmten Bereichs
  • Nicht geeignet bei kleinen oder großen Displays

Fluid Design

  • Breitenangaben in % / Höhenangaben in px
  • Breite der Elemente passt sich der Bildschirmauflösung an
  • Gut geeignet für verschiedene Desktop-Monitore
    Beispiel
  • Mindest- und Maximalbreite notwendig, da es sonst unleserlich (zu schmal / zu breit) wird
    Beispiel mit min-width und max-width
  • Flexibel nur innerhalb eines bestimmten Bereichs
  • Nicht geeignet bei sehr kleinen oder sehr großen Displays

Adaptive / Responsive Design

Grundlagen

  • Design und Inhalte ändern sich an bestimmten Punkten (Breakpoints) und passen sich Display-Größe (Viewport) an
  • Über "Media Queries" in der CSS-Datei werden Bereiche veändert oder ganz ausgeblendet
  • Mit Javascript können z.B. Menüs verändert werden
    (ein- und ausblenden)

Adaptive Design

  • Mischung aus Fixed und Responsive
  • Innerhalb eines Viewport-Größenbereichs nicht veränderbar (fixed)
  • Mindestens 3 Breakpoints notwendig

Beispiel

Responsive Design

Beispiel
Beispiel mit Ausklappmenü (Javascript)

Wichtige Elmente
des Responsive Webdesign

Breakpoints setzen (Media Queries)

CSS

    body { background:yellow; }
h1 { color:#f00; }

@media screen and (max-width:640px) 
{
  body { background:cyan; }
  h1 { color:#333; }
}

@media screen and (max-width:480px) 
{
  body { background:black; }
  h1 { color:#fff; }
 }

HTML

    <!DOCTYPE html>
<html>
<head>
<title>Farbwechsel</title>
</head>
<body>
  <h1>Farbwechsel</h1>
</body>
</html>

Beispiel ansehen

Animation: Breakpoints vs. keine Breakpoints

Mobile First

  • Die Seite wird für mobile Endgeräte optimiert
  • Für größere Displays werden Elemente nachgeladen
  • Vorteil: Smartphones müssen weniger laden

Animation: Unterschied Mobile/Desktop First

Responsive / Adaptive Images

  • Responsive Images: Grafiken passen sich der Bildschirmgröße an
    Beispiel ansehen
  • Probleme
    • Qualitätsverlust von Pixelgrafiken beim Vergrößern / Verkleinern
    • Darstellung auf kleinen Displays mit sehr hoher Auflösung (Retina)
    • Unnötige Ladezeiten bei großen Bildern für kleine Displays

Responsive / Adaptive Images

  • Lösungen
    • Minimal-/Maximalgröße festlegen
    • Einsatz von Vektorgrafiken, die sich ohne Qualitätsverlust vergrößern und verkleinern lassen
      Animation: Vektor/Pixel-Grafiken
    • Grafiken in verschiedenen Größen bereitstellen (Adaptive Images). "Mobile First" beachten (Ladezeiten)
      Beispiel Adaptive Image

Responsive / Adaptive Tables

  • Tabellen + RWD = :-(
  • Diverse Möglichkeiten (zoomen, scrollende Tabellen)
  • Anwendung von Inhalt und Seite abhängig

Beispiel Ausblenden
Beispiel Umstrukturierung

Responsive Design umsetzen

  • Einfache Änderungen direkt im CSS
  • Problem: Unterschiedliche Browser (nicht nur IE ;-)
  • Für große Websites / Anwendungen Frameworks einsetzen
  • Beispiele: Bootstrap, Foundation, Gumby, Skeleton …
  • Plugins / Addons (Javascripts) für einzelne Bereiche, z.B. responsive Tabellen

Best Practice Beispiel

Responsive Design testen

So nicht …

http://wpwebsites.co.nz/google-loves-mobile-responsive-websites/

Sondern so …

  • Fenstergröße im Browser ändern
  • Tools / Emulatoren, z.B. Am I responsive?
  • Browser-Addons zur Simulierung
    verschiedener Viewports / Geräte
  • Am besten: Originalgeräte besorgen!
    (Look & Feel, Bildschirm-Auflösung)

Heute RWD - und in ein paar Jahren …?

http://graphicdesignjunction.com/2012/12/responsive-web-designs-are-better-than-ordinary-web-layouts/

Links

Diese und weitere Links in unserer Linksammlung unter http://ub.unibi.de/rwd

Vielen Dank für Ihre Aufmerksamkeit!

http://zurb.com/article/926/digital-comics-not-responsive-yet