Webdesign: Statisch, adaptive oder responsive?

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.
view Klick aufs Bild startet die Animation

GIF

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.

view Klick aufs Bild startet die Animation

GIF

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.

viewKlick aufs Bild startet die Animation

GIF

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.

view Klick aufs Bild startet die Animation

GIF

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.

Hat Dir der Artikel weitergeholfen?

Kommentare, die nichts mit dem jeweiligen Artikel zu tun haben, oder die (weitgehend) inhaltslos sind und keinen Mehrwert für andere Leserinnen und Leser bieten, veröffentlichen wir nicht.

2 Kommentare zu “Webdesign: Statisch, adaptive oder responsive?

  • Moin!

    Schöne, klare Erklärung der Begriffe.

    Die Animation für adaptives Design ist sicherlich sehr plakativ, stellt aber meiner Meinung nach nicht ganz den realen Einsatz da.
    Den Sprung auf das kleinere Layout würde man machen bevor der Inhalt über den Viewport rausläuft.

    Es grüßt
    derRALF

    • Hallo, Ralf,
      da hast Du sicher recht. Im richtigen Leben ist das Ganze etwas komplexer, man verwendet eher eine Kombination aus adaptive und fluid Design. Und es kommt natürlich immer darauf an, welche Art von Projekt man vor sich hat. Will man z.B. eine bestehende Seite modernisieren machen ohne sie komplett neu aufzubauen, kann es durchaus sinnvoll sein, den Weg über fixe Layouts (adaptive) zu wählen. Andererseits wird auch viel als „responsive“ verkauft, das den Namen nicht wirklich verdient.
      Mir ging es in dem Beitrag darum, die Prinzipen klar zu machen. Bisschen vereinfacht, ich weiß.

      Schöne Grüße nach Hamburg (falls Du da gerade bist)

      von Kirsten

Die Kommentare sind geschlossen.