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
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
… 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
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
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 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
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/
Vielen Dank für Ihre Aufmerksamkeit!
http://zurb.com/article/926/digital-comics-not-responsive-yet
