LU05a - Responsive Webdesign - Medientypen

Der Zugriff auf das Internet ist vielseitiger geworden, weil nicht nur mit einem Desktop-PC oder Laptop Webseiten betrachtet werden. Heute sind weitere Geräte wie Tablets, Smartphones, E-Book-Reader, Spielekonsolen oder Fernsehgeräte hinzugekommen. Daraus ergibt sich die Herausforderung, dass die Bildschirmgrösse und die Bildschirmauflösung enorm variieren kann. Das Erscheinungsbild einer Webseite hängt deshalb stark vom verwendeten Endgerät ab, mit dem diese betrachtet wird.

Responsive Webdesign ist ein Ansatz, bei dem sich das Layout flexibel an die Eigenschaften des jeweiligen Endgeräts anpasst, wobei Inhalte und Benutzerfreundlichkeit stets im Fokus stehen. Schlüsselelemente sind ein flexibles Gridlayout, flexible Bilder/Medien und Media Queries.

Anstatt unzählige Layoutversionen für dieselbe Webseite zu erstellen und zu warten, werden beim Responsive Webdesign (was so viel wie reagierendes oder reaktionsfähiges Webdesign bedeutet) die Eigenschaften des Endgeräts berücksichtigt, um eine optimale und benutzerfreundliche Darstellung zu erreichen. Das Hauptkriterium für ein solches angepasstes Layout ist die Bildschirmgrösse (meistens Breite) des Geräts und eventuell auch die vorhandenen Eingabemethoden (Maus oder Touchscreen). Bei Responsive Webdesign (oder auch Responsive Layout) passt sich also die Webseite den (technischen) Gegebenheiten wie zum Beispiel dem Bildschirm des Nutzers an. Das betrifft vor allem die Darstellungsgrösse (Viewport), meint aber auch weitere Optimierungen wie Bilder, Typografie, oder auch die Inhalte.

Beispielsweise ist die Standardauflösung für Smartphones 320 bis 768 Pixel, für Tablets 768 bis 1.024 Pixel und für Desktop-PCs häufig über 1.024 Pixel. Responsive Webdesign erfordert daher ein Umdenken im Design-Prozess, so kann eine responsive Website beispielsweise Inhalte auf einem Smartphone in einer einzelnen Spalte, auf einem Tablet in zwei Spalten und auf einem Computer in drei oder vier Spalten anzeigen.