Responsive Webdesign – brauchen wir intelligentere Webseiten?

Für Webdesigner ergibt sich somit die Notwendigkeit, ihre Webseiten für immer unterschiedlichere Bildschirmgrößen zu optimieren. Die Pflege der verschiedenen Webseiten kostet viel Mühe, was nicht nur mit einem hohen Zeitaufwand sondern auch mit hohen Kosten verbunden ist. Die strukturelle Trennung der unterschiedlich angepassten Webseiten ist nur bis zu einer gewissen Komplexität realistisch. Vielmehr bietet die strikte Trennung von Inhalt und Layout die technische Möglichkeit responsive Webseiten zu erstellen, die sich über unterschiedliche Layouts steuern lassen.

CSS3 und HTML5 – intuitive responsive Webdesign!

CSS3 und HTML5 bieten nun schon seit einigen Jahren innovative Möglichkeiten, Webseiten responsiv zu gestalten. Mit dem langsamen Aussterben des unsäglichen IE<8 lassen sich die meisten der Features nun auch tatsächlich im Alltag nutzen. Das Zauberwort heißt hier Media-Queries, die dem Browser die Möglichkeit geben, die Webseite an die Bildschirmgröße anzupassen.

Wer das erste Mal erlebt hat, das sich Seiten dynamisch an die Fenstergröße des heimischen Webbroserfensters anpassen, will kaum mehr zurück zu den statischen Webseiten, die sich um die Fenster- bzw. Bildschirmgröße einen Kericht geschert haben. Es macht Spass dabei zuzusehen, wie sich die verschiedenen Elemente ihren Platz neu suchen und sich wie in einer Komposition imme neu arrangieren.

Der Vorteil der Media-Queries von CSS3 ist die simple Handhabung. Auch wenn man noch nicht zu den alten Codierhelden gehört, kann man mit einigen Handgriffen jede Webseite responsiv machen. Wer die Grundlagen der "floating boxes” in CSS einmal verstanden hat, der kann ziemlich schnell den Taktstock in die Hand nehmen und erste Erfolgserlebnisse sammeln.

Natürlich gilt auch hier, je umfangreicher und komplexer eine Seite aufgebaut ist, desto umfangreicher und komplexer wird die Anpassung an verschiedene Screendesigns. Gemäß der Prämisse "don't touch a running system” schreckt das den ein oder anderen Webmaster davon ab, den Schritt in Richtung "responsive” zu wagen. Bedenkt man allerdings die Hürden, die wir als Webdesigner den Endnutzern zumuten, durch ständiges hin und herscrollen einige Informationen aus einer Webseite auf einem Smartphone zu entlocken, ist es die Mühe allemal wert.

Beispielseiten und Tutorials

Saat Akhtar hat zu diesem Thema auf seinem Blog eine umfangreiche Sammlung von beispielhaften responsive Websites zusammengestellt, von denen man sich bei der eigenen Umsetzung inspirieren lassen kann. Ich empfehle in diesem Zusammenhang besonders auf die Gestaltung der Navigation zu achten, ist dies doch eines der größten Herausforderungen bei der Erstellung responsiver Webseiten.

Für den Anfang empfehle ich das ausgezeichnete Videotutorial von Christian Vasile. Es erklärt den Aufbau einer responsiven Webseite"from the scratch” und führt unkompliziert und fundiert in die Materie ein. Eine weitere Einführung mit nützlichen Links bietet Nick Pettit in seinem Tutorial. Viel Spass beim Ausprobieren!

Noch sehr am Anfang aber fleissig am wachsen ist mein Blog, auf dem ich zu diesem Thema regelmäßig neue Artikel und Tutorials veröffentlichen möchte.