Wenn man eine Website mit einem Responsive Design umsetzen will, hat man gut zu tun. Was auf den ersten Blick einfach aussieht, ist auf den zweiten Blick ziemlich komplex.

Was ich mich dabei immer wieder gefragt habe ist: Wozu eigentlich die Umstände mit dem flexiblen Raster (Fluid Grid)?
Die Arbeit mit Prozentangaben ist kompliziert und man muss das Verhalten des Layouts aufwändig testen. Würde es denn nicht reichen, nur mit Media Queries zu arbeiten? Dann könnte man beim festen Layout bleiben und die Seite sieht trotzdem auf unterschiedlichen Geräten gut aus.

Adaptive oder Responsive Design?

Natürlich gibt es auch für diese Idee schon ein Schlagwort: Adaptive Design. Damit wird die Methode bezeichnet, die ich oben skizziert habe: Man baut Layouts für verschiedene Bildschirmgrößen. Es gibt beispielsweise eine Ansicht fürs iPhone in der Breite 320px, eine fürs iPad im Hochformat mit der Breite 768px und eine für Desktop-Computer mit einer Breite über 1024px.
Alle drei Layouts werden mit festen Werten umgesetzt, also ganz ohne die komplizierte Prozentrechnerei. Über MediaQueries fragt man dann ab, welches Gerät die Website gerade anschauen will. Meldet sich ein iPhone, schaltet das CSS automatisch auf das passende Layout um.

Perfekt. Dann kann man sich den flexiblen Raster eigentlich sparen, oder?
Die Antwort: Es kommt darauf an.

Gründe für Responsive Design mit flexiblem Raster

  • Proportionen statt Pixel
    Webseiten transportieren nicht Pixel, sondern Inhalte.
    Mit proportionalen Angaben kann man Inhalte angemessener präsentieren. Eine Randspalte nimmt über die Angabe 33% immer ein Drittel der Bildschirmbreite ein. 100 Pixel sind jedes Mal etwas anderes.
  • Es gibt (viel zu) viele Gräte
    Die Welt der mobilen Geräte besteht aus mehr als iPad und iPhone. Der Anteil der iPhones in den USA liegt zwar inzwischen bei über 25 Prozent. Der Rest kommt von anderen Herstellern, die andere Browser, andere Renderingtechniken und andere Bildschirmgrößen einsetzen.
    Es ist schlicht unmöglich, für alle Szenarios (Gerät, Browser, Nutzungssituation) ein passendes Layoutschema mit festen Maßen bereitzuhalten.
  • Zukunftssicher
    Die Anzahl der Endgeräte nimmer weiter zu und ein Ende dieser Entwicklung ist nicht abzusehen. Jede Woche kommt ein neues Gerät auf den Markt, von dem man nicht weiß, wie viele Marktanteile es erobern wird.
  • Schlanker Code
    Es landet deutlich weniger Code auf dem Server, wenn man ein flexibles Layout einsetzt. Für die Performance aber auch für die Pflege der Websites ist dieser Vorteil nicht zu unterschätzen.

Gründe für Adaptive Design (fester Raster)

  • Eine Lösung für bestehende Seiten
    So ohne weiteres kann man einen bestehenden Code nicht „responsive“ machen.
    Flexibel wird das Ganze allein über CSS. Wenn die HTML-Struktur nicht passt (weil der Code für einen anderen Zweck geschrieben wurde) hat man ein Problem. Hier bleibt nur der Weg über Adaptive Design.
  • Responsive Design ist nichts für kleine Budgets
    Ein Layout mit flexiblem Raster zu entwickeln kostet deutlich mehr Zeit als eine Lösung mit festen Breiten. Nicht zuletzt dadurch, dass man relativ viel Zeit für das Testen braucht.

Fazit

Ich glaube, dass dem Responsive Design die Zukunft gehört. Aber wir stehen erst am Anfang und es ist nach wie vor eine experimentelle Technik. Feste Regeln für die Best Practice gibt es noch nicht, jedes Projekt definiert den Begriff „responsive“ auf seine eigene Weise. Die Umsetzung orientiert sich an der Zielgruppe, deren Wünschen und Nutzungsgewohnheiten. Das ist eine Herausforderung, weil oft verlässliche Zahlen fehlen und man auf Schätzungen und Mutmaßungen angewiesen ist. Aber es ist gleichzeitig auch eine tolle Gelegenheit, den Bedürfnissen der Nutzer näher zu kommen.

So gesehen ist Adaptive Design nichts anderes als eine Spielart des Responsive Design. Adaptive Design ist ein guter Kompromiss, wenn es darum geht, eine bestehende Seite anpassungsfähig zu machen. Wenn man bedenkt, dass die Halbwertszeit eines Webdesigns etwa zwei bis fünf Jahre beträgt, ist ein Redesign über Adaptive Design ein großer Schritt in die richtige Richtung.