die|site

unleashed to create

19. Mar. 2024

Was ist eigentlich … responsive Webdesign?

Was ist eigentlich responsive Webdesign?

Sicher schon mal gehört “Ist die Seite denn auch responsive?“… und meist wird damit gemeint, dass die Seite auf dem Mobiltelefon eine gute Figur macht. Aaaaber so einfach ist es nicht.

Bevor das responsive Design zum Defaultfeature einer jeden Webseite wurde, waren die mobilen Webseiten verbreitet, meist durch ein „m“ vor der Domain gekennzeichnet. Hier wurde eine zusätzliche Seite inklusive eines Designs gebaut, welche sich für die Ansicht  auf einem mobilen Endgerät eignet. Viel Arbeit und noch größerer Wartungsaufwand.

Das responsive Webdesign beschreibt das flexible Verhalten einer Seite auf die verschiedenen Screengrößen, Auflösungen und Formate. Der Seite wird  in den sogenannten Stylesheets, hier wird das Design das Layout zum größten Teil bestimmt, Befehle gegeben, bei welcher Auflösung, was wie angezeigt werden soll.

So hat eine Seite auf dem Desktop meist eine Navigation, die aus verschiedenen Themennamen besteht, jedoch auf dem Smartphone nur noch ein sogenanntes Hamburger-Menü: drei Striche übereinander, die die eigentliche Navi erst öffnet.

Navigation in der Desktopansicht
Hamburger Menü auf dem Smartphone

Andere Stellen einer Seite reagieren im responsiven Webdesign liquide, die „fließen“ proportional zur Bildschirmauflösung, dehnen sich prozentual mit aus oder werden dementsprechend kleiner. Dem Element wird als Größe ein Prozentwert gegeben, welcher sich auf die Gegebenheiten anpasst.

Neben diesen grafischen Besonderheiten, muss auch der Inhalt für die Ansicht auf den verschiedenen Endgeräten optimiert werden, so steht der Grundsatz „content first“. Der mobile Besucher soll nicht ins Hintertreffen geraten, nur weil sein Screen kleiner ist als der des heimischen Monitors. Daher ist es beim responsive Webdesign existenziell, Content gut strukturiert in die flexible Seite zu bauen.

Fazit ist, dass nicht alles was für ein Smartphonescreen optimiert ist, gleich responsive ist. Vielmehr beschreibt dieser Ausdruck, das Reagieren, adäquate Antworten (respondere: lat. antworten) auf die Umgebung, in der die Webseite ausgeführt wird und das in Hinblick auf die Technik, das Format, die Auflösung und die Ladezeiten.