Responsive Webdesign ist der Trend für die zukünftige Webentwicklung. Warum? Die größte Herausforderung für Web-Designer und -Entwickler in der Vergangenheit und auch verstärkt in der Zukunft war und wird die optimale Darstellung einer Website auf unterschiedlichen Endgeräten sein.

Mittlerweile gehen bereits ca. 40% der deutschen mit einem mobilen Endgerät ins Netz - tendenz steigend. Dies eröffnet viele Chancen für das Mobile-Marketing. Um dieses Potential auch zu nutzen sollte ein Webauftritt, sowohl für das Smartphone, Tablet, Netbook und der Desktop-Bildschirmgrößen optimal dargestellt werden und einfach bedienbar sein.

Mit Responsive Webdesign unter der Verwendung von CSS3 Media Queries und des Viewport Tags ist es möglich, eine Website für verschiedene Bildschirmauflösungen darzustellen. Dabei kann das Layout je nach Endgerät und entsprechendem Navigationsverhalten angepasst werden.

Unter Responsive Webdesign (Response = reaktionsfähig) versteht man die optische Anpassung einer Website an verschiedene Ausgabemedien. Das Layout skaliert sich somit an die vorhandene Ausgabegröße, wobei sich der Content, Bilder, Slider und Videos entsprechend anpasst. Anhand der CSS3 Media Queries kann die Bildschirmauflösung des Endgerätes erkannt werden.

Es geht aber nicht nur darum, die Website eins zu eins auf das Endgerät anzupassen, vielmehr geht es darum, dass sich das Layout entsprechend der Nutzergewohnheiten der Geräteeigenschaft anpasst.

Das beudeutet aber, dass die Layouts auf keine fest definierten Grids, sondern vielmehr auf fluid- und flexiblen-Grids basieren.

Was bedeutet dies für die Umsetzung von Responsive Websites?

Zum einen muss darauf geachtet, das die Website ein schlüssiges und konsistezes Interface Design erfährt, welches sich über alle unterschiedlichen Auflösungen durchziehen lässt. Zum anderen sollte ein bestimmtes Augenmerk auf die Navigationgerichtet werden. Das liegt vor allem daran, dass die Mobile und Portablen Endgeräte sich in der Bedienung anders verhalten.

Ein iPad hat im Vergleich zur Desktop-Version kein Maus-Cursor und somit auch keine Hover-Status. Dies wirkt sich in der Konzeption besonders in den Navigationselementen aus, da hier nicht mit einer Maus geklickt wird, sondern mit dem Finger, und somit sollte eine Navigation klarer und mit größeren Schaltflächen konzipiert werden.

Anbei ein Demo-Beispiel wie das Navigationenverhalten von Desktops und Tablets individuell gestaltet werden können. Die Zeit Online nutzt aktuell das gleich Navigations-Prinzip wie in diesem Beispiel.

Drupal Responsive Webdesign Themes

Für Drupal gibt es mittlerweile mehrere Themes mit denen ein Responsive Webdesign umgesetzt werden kann. Anbei nur ein kleiner Auszug von Responsive Drupal Themes:

• Omega - Responsive HTML5 Base Theme 
• Sasson 
• Zen 

In diesem Artikel möchte ich verstärkt das HTML5 Omega Theme vorstellen, welches auf 960gs Grid basiert. Es schnell, flexibel und einfach konfigurierbar. Unter dem Link responsive-webdesign.floriancaspar.de wird dieses Theme in der Standard-Installation mit den Responsive-Funktionen dargestellt.Der Blog www.steinwerfer.com basiert zum Beispiel auf dem Omega Theme.

Ein weiteres interessantes Theme mit dem von Scratch auf eine Responsive-Website erstellt werden kann ist Sasson. Dieses basiert ebenfalls auf 960gs. Enthält ein Sass & Compass Framework und enthält bereits Google Webschriften. Dies ist ein sehr schlankes Theme, das jedoch noch sehr jung ist.

Beispiele für bereits umgesetzten Responsive Websites mit CSS3 Media Queries findet Ihr unter mediaqueri.es