Haupt-Reiter

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
Bewertung: 
0
Bisher keine Bewertung