U5: Responsive Webdesign

Beim Responsive Webdesign wird eine Internetseite je nach Bildschirmgröße und/oder Device anders dargestellt, um die Besucherfreundlichkeit zu gewährleisten.
Webdesigner wählen diese Form, damit User eine Website unabhängig vom verwendeten Endgerät (Computer, Tablet, Smartphone....) problemlos nutzen können.

„Form follows function.“
    – Funktion, Design und Inhalt folgen der jeweiligen Bildschirmauflösung

Zu berücksichtigende Besonderheiten

• Größe des Geräts; Breite und Höhe des Browserfensters
• Orientierung (Hoch-/Querformat)
• unterschiedliche Eingabemöglichkeiten (Tastatur, Sprache, Touch)
• eventuell unterwegs geringere Datenrate
• direkter Zugriff auf Apps (z.B. Karten-App, Telefon)

Vorgehensweise

• „Mobile first!“ – Optimierung für mobile Endgeräte hat die höchste Priorität
  immer mehr Nutzer surfen mit Smartphone und Tablet im Internet
• keine starre Gestaltung der Website mehr
• Responsive Websites berücksichtigen unterschiedliche Anforderungen des Endgeräts
• idealerweise nicht mehrere Versionen der Website, sondern gleicher Inhalt und Aufbau (Content und HTML) und Unterscheidung der Darstellung nur anhand unterschiedlicher Formatierungsbefehle (CSS)
• hierzu verwendet man CSS Media Queries („Abfragen der Medien, welche die Website anzeigen“)

Empfehlungen

• Haupthindernis herkömmlicher Seiten: Versuch eines pixelgenauen Designs
• guter Ausgangspunkt für responsive Design: aktuelle Schriftgröße als Basisgröße
• Schriftgrößen (und Maße) in relativen Größen wie „em“, damit eine größere Schriftgröße nicht das Design zerschießt
• 1em: vom Browser berechnete Schriftgröße des Elements
• Schriftgröße kann (und sollte) als Basis für Breitenangaben von Elementen verwendet werden, daher prozentuale Breiten oder relative Angaben in em oder rem (root em = Wurzel-em), keine festen Pixelwerte
• keine Höhenangaben für Elemente

Media Queries

• um für unterschiedliche Endgeräte unterschiedliche Layouts zu generieren
• zentrales technisches Feature, das Responsive Webdesign so quasi erst ermöglichte
• CSS Media Query wird innerhalb eines CSS-Codeblocks über eine spezielle @media-Regel festgelegt;
  darin enthaltene CSS-Selektoren und -Regeln werden nur unter der angegebenen Bedingung aktiviert

• all: jegliches Ausgabemedium
• screen: Darstellung der Inhalte einer Webseite/
  auf einem scrollenden Bildschirm
• print: Darstellung der Inhalte einer Webseite auf mehreren Seiten mit festen Dimensionen
• speech: Vorlesen der Inhalte einer Webseite durch einen Sprach-Synthesizer

Einige am häufigsten genutzte Media Features:

• width: Breite des Bildschirms in Pixeln abfragen
• height:Höhe des Bildschirms in Pixeln abfragen
• orientation: Bildschirm-Orientierung Hochformat/Querformat detektieren
• resolution: Verfügbare Bildschirmauflösung erkennen