Responsives Webdesign: Ein Design für Computer, Handy und Tablet

Web-Design

Beim responsiven Webdesign (aus Englisch responsive für reagierend) handelt es sich um eine grundlegende technische Methode des Webdesigns.

Für alle Endgeräte werden ein gemeinsamer Satz an Inhalten (HTML-Datei, Text, Bilder, Videos etc.) und ein gemeinsamer Satz an Darstellungsanweisungen (CSS-Datei) bereitgestellt.

Die Darstellungsanweisungen enthalten mehrere Regelsätze in Abhängigkeit von der Bildschirmgröße. Auch die Inhalte können Regelsätze beinhalten und etwa Bilder in verschiedenen Auflösungen anbieten. Das Endgerät selbst entscheidet anhand der Regelsätze, wie es die Inhalte dann darstellt.

Auf breiten PC-Bildschirmen können Inhalte mehrspaltig präsentiert werden. Auf Smartphone-Bildschirmen können diese Inhalte nicht mehr sinnvoll nebeneinander angezeigt werden.

Als Alternative bietet sich die Darstellung untereinander an. Die Darstellungsanweisungen schreiben diese unterschiedlichen Anzeigen für verschiedene Breitenbereiche vor. Innerhalb eines Breitenbereiches passt sich die Darstellung dynamisch an die tatsächliche Breite an.

WordPress als Beispiel für responsives Webdesign

Die Website des verbreiteten Content-Management-Systems WordPress (https://wordpress.org) benutzt responsives Webdesign (Stand 2016). In einem Browser auf einem PC präsentiert sich die Internetseite mit Menüleiste und zweispaltigem Text.

Wird die Breite des Browserfensters verkleinert, so passt sich die Breite der Seite dynamisch an. Erreicht die Browserfensterbreite die Grenze eines in den Darstellungsanweisungen definierten Breitenbereiches, so wird der Text einspaltig und das Menü unter einem Button versteckt. Ein Klick auf den Button zeigt dann das Menü an.