In diesem Artikel möchte ich erklären, was der Unterschied ist zwischen einer statischen und einer responsiv programmierten Webseite. Ich habe dazu ein paar kleine Animationen gebastelt. (Ich wollte schon immer mal was mit animierten Gifs machen.)

Im Responsive Design wird das Layout der Webseite per CSS so programmiert, dass es sich automatisch allen möglichen Bildschirmgrößen anpasst. Aber was bedeutet das konkret oder besser gesagt:

Wie muss ich mir das vorstellen?

1. Das klassische, statische Layout

Nehmen für den Anfang den Fall einer Webseite, die nicht im Responsive Design programmiert ist. Alle Inhalte haben feste Breiten. Wird der Bildschirm kleiner, bleiben die Elemente unverändert.

In der Realität sieht es ein bisschen anders aus, denn die meisten Tablets und Smartphones versuchen, statische Inhalt so zu verkleinern, so dass sie irgendwie auf den Bildschirm passen.

Die Animation macht deutlich, wo das Problem liegt:

  1. Früher oder später verschwinden trotz Verkleinerung Inhalte aus dem Sichtfeld. Der User kann sie auch durch Scrollen nicht erreichen.
  2. In starker Verkleinerung kann man den Text nicht mehr lesen und Bilder nicht mehr erkennen. Links und Navigationslemente werden so winzig, dass man sie nicht mehr bedienen kann.

2. Mittelding: Kombination aus mehreren statischen Layouts

Bei dieser Methode werden mehrere starre Layouts miteinander kombiniert. Ab einer gewissen Bildschirmbreite „springt“ das Layout auf die nächst kleinere Version. Man nennt diese Methode auch Adaptive Design.

Der Designer/die Designerin kann weiter mit festen Breiten in Pixeln arbeiten, Elemente können exakt und „pixelgenau“ positioniert werden. Das ist in gewissem Sinn ein Vorteil.

Diese Methode hat aber einen gewaltigen Nachteil: Ein Großteil der Besucher landet mit seinem mobilen Gerät irgendwo zwischen zwei Layouts und sieht eine nicht optimierte Darstellung.
Man müsste endlos viele Layouts vorhalten, wenn man allen Besuchern eine gut lesbare und bedienbare Version bieten möchte. Das ist nicht praktikabel. Es gibt inzwischen einfach zu viele Geräte mit zu vielen unterschiedlichen Auflösungen* und Bildschirmbreiten.
*Der Artikel und die Grafik sind aus dem Jahr 2012 (!)

3. Responsive: Flexible Layouts, die sich anpassen

Bei dieser Methode ist das Layout „fließend“ und passt sich jeder Bildschirmbreite automatisch an. Im CSS wird nicht mehr mit absoluten Werten (Pixel) gearbeitet, sondern mit relativen Werten (Prozent).

Ein Beispiel: In einem statischen Layout hätte eine Header-Grafik eine Breite von 960 Pixeln. In einem fließenden Layout gibt es diesen absoluten Wert nicht mehr. Statt dessen wird definiert, wie groß das Bild im Verhältnis zu seiner Umgebung sein soll. Sagen wir, das Bild bekommt die Breite von 90% zugewiesen – dadurch sehen alle Besucher eine Darstellung, die zu ihrem Gerät passt.

Der Teufel liegt ein bisschen im Detail. Man muss beispielsweise darauf achten, dass jedes Element so skaliert, dass das Design auf kleinen Bildschirmen nicht auseinander fällt. Alle Elemente müssen gut zusammen spielen. Mit dem richtigen Konzept ist das aber kein Problem.

Bei Web-Projekten im responsive Design ist es wichtig, dass sich Designer und Entwickler frühzeitig zusammensetzen und die Umsetzung des Designs zu besprechen. Manchmal helfen schon kleine Änderungen an Design und Struktur und die Darstellung über die Gerätegrenzen hinweg lässt sich massiv verbessern.