Ein paar Worte über responsives Design

Zuletzt aktualisiert am 23. Januar 2020 von Claus Nehring
Was ist eigentlich „responsives Design“
Responsives Webdesign (vom englischen Wort „responsive“ = „reagierend“) ist ganz einfach ein Ausdruck für die Anpassung einer Webseite an die unterschiedlichen Bildschirmauflösungen verschiedener Endgeräte.
Spätestens mit dem Siegeszug der Smartphones war relativ schnell klar, dass eine für einen normalen Computerbildschirm entwickelte Webseite auf dem kleinen (und überdies hochkantigen) Bildschirm eines Smartphones im Prinzip unbrauchbar ist. Hinzu kommt noch die Nutzung verschiedener Eingabemethoden auf verschiedenen Endgeräten (mit der Maus klicken und zeigen auf dem Desktop, tippen und wischen auf dem Touchscreen des Smartphones).
Warum ist „responsives Design“ so wichtig
Im Moment (Stand Ende 2018) ist es so, dass weltweit gut die Hälfte aller Zugriffe auf Webseiten von Mobilgeräten aus erfolgt. Und das bedeutet für eine Webseite, dass sie sowohl auf dem vertikal oder horizontal ausgerichteten Bildschirm eines Mobiltelefons als auch auf dem horizontal ausgerichteten Bildschirm eines Desktops ansprechend aussehen sollte.
Wenn Ihre Seite auf einem dieser beiden Geräte nicht ansprechend aussieht oder, schlimmer noch, kaum nutzbar ist, werden Sie ganz automatisch potentielle Kunden verlieren. Und dass wollen Sie vermutlich nicht.
Andererseits wollen Sie sicherlich auch keine unzähligen Versionen einer Website für jedes bekannte Gerät auf dem Markt designen und entwickeln; dies wäre, wenn überhaupt machbar, schlicht viel zu teuer. Und deshalb ist ein (gutes) responsives Design die einzige Lösung, um eine Website benutzerfreundlich und zukunftssicher zu erstellen.
Und genau deswegen sollten Sie auf einem responsiven Design für Ihre Webseite bestehen und die Seite auf so vielen neuen und alten Geräten und auf verschiedenen Webbrowsern wie möglich testen.
Welche Technik steckt hinter einem „responsiven Design“
Die Technik hinter einem responsiven Design nennt sich CSS („Cascading Style Sheets“). Und die Idee dahinter ist eigentlich sehr simpel. Aber um diese Idee zu verstehen, müssen wir ein wenig weiter ausholen und uns erst einmal den grundsätzlichen Aufbau einer Webseite ansehen.
Und da sich dieser Artikel an Anwender und nicht an Spezialisten wendet, habe ich hier alles sehr vereinfacht dargestellt. Sie können also ruhig weiterlesen, es ist sehr viel weniger kompliziert, als Sie vielleicht denken.
Der Aufbau einer Webseite
Grundsätzlich besteht eine Webseite aus einer Datei, die einem Webbrowser (das sind Programme wie Chrome, Internet Explorer oder Safari) sagt, was er an welcher Stelle des Bildschirms darstellen soll. Diese Datei wird in einer Sprache erstellt, die sich HTML („Hypertext Markup Language“) nennt.
Sobald eine solche Datei mit einem Webbrowser geöffnet wird, liest dieser die darin enthaltenen Informationen und stellt die Seite auf dem Bildschirm dar. Ein Beispiel für eine sehr einfache HTML-Datei (die einfach nur die Worte „Hallo Welt“ auf den Bildschirm schreibt) sehen Sie hier.
Eine Webseite kann also durchaus aus nur einer einzigen HTML-Datei bestehen, in der alle Angaben zur Seite (Texte, Bilder, Position der einzelnen Elemente, Schriftarten, Farben usw.) genau definiert werden.
Die ersten Webseiten
Und die ersten Webseiten wurden auch tatsächlich genauso geschrieben. Der Aufbau jeder einzelnen Seite wurde in einer HTML-Datei festgelegt, ein Klick auf einen Link innerhalb einer Seite öffnete dann eine neue HTML-Datei. Die gesamte Website bestand dann aus einer mehr oder minder großen Ansammlung von solchen HTML-Dateien.
Aber dieses Verfahren stellte die Entwickler vor sehr große Probleme. Jedwede Änderung, die sich auf alle oder viele Seiten auswirken sollte (Schriftart, Farbe, Bilder usw.), musste in jeder einzelnen HTML-Date geändert werden. Bei einfachen Änderungen und bei kleineren Webseiten ließ sich das noch mit einem überschaubaren Aufwand erledigen, bei größeren Änderungen im Design der Webseite oder bei großen Webseiten stieß dieses System sehr schnell an seine Grenzen.
Also musste eine neue Idee her.
Die Entwicklung von CSS
Und diese Idee wurde dann auch tatsächlich im Jahre 1996 Wirklichkeit. In diesem Jahr veröffentlichte das W3C-Konsortium die erste Spezifikation von CSS. Und eigentlich war diese Idee sehr simpel, nämlich die Trennung der eigentlichen Seiten (die HTML-Dateien) und der Formatierung der einzelnen Elemente.
Man brauchte jetzt also für eine Website eine zusätzliche Datei, in der die Formatierung aller Elemente für die gesamte Webseite festgelegt wurde. Und wenn man jetzt beispielsweise die Textgröße für alle Absätze auf einer Webseite verändern wollte, musste an nur noch den entsprechenden Eintrag in dieser Formatvorlage (die CSS-Datei) ändern und schon war die Textgröße auf der gesamten Webseite geändert.
Und das sich mittlerweile so ziemlich alle modernen Web-Browser weitestgehend an diese Standards halten, funktioniert das auch tatsächlich. Man ist also heutzutage in der Lage, das Aussehen einer Seite komplett über diese CS-Dateien zu steuern. Soll sich also ein alter Auftritt in neuem Gewande präsentieren, müssen im Idealfall nur noch die CSS-Anweisungen umgeschrieben werden.
Der Aufbau einer modernen Webseite
Die Spezifikationen und Standards von CSS werden ständig weiterentwickelt (die momentan aktuelle Spezifikation ist 2.1). Mittlerweile ist CSS zu einem sehr mächtigen und komplexen Werkzeug geworden, dass auch die Anpassung einer Webseite an verschiedene Bildschirmauflösungen vorsieht.
Und diese Tatsache macht CSS zum Mittel der Wahl für die Erstellung responsiver Webseiten. Anstelle von verschiedenen Versionen derselben Webseite für unterschiedliche Bildschirm-Auflösungen und -Formate genügt heute eine Version. Sämtliche notwendigen Anpassungen werden über CSS-Dateien erledigt.
Und genau diese Anforderung sollte deswegen auch Ihre Webseite erfüllen.
Weiterführende Informationen
Weiterführende Informationen finden Sie zu den Themen CSS und HTML finden Sie in meinen Artikelserien „Einführung in HTML“ und „Einführung in CSS“.
Durch das Abschicken des Kommentars werden die eingegebenen Daten in der Datenbank dieser Website gespeichert. Ausserdem speichern wir aus Sicherheitsgründen Ihre IP-Adresse für einen Zeitraum von 60 Tagen. Weitere Informationen zur Datenverarbeitung finden Sie in der Datenschutz-Erklärung.