Die Bezeichnung “responsive Design” ist derzeit in aller Munde und wird als die nächste Stufe im Webdesign propagiert. Nach “Liquid Layout” und “Mobile-CSS” bietet sich nun die aktuelle Entwicklung die alle Auflösungen und Endgeräte bedienen soll. Und das ist gleichzeitig auch die Anforderung aktueller Projekte an das Design.
Ein responsive Design sorgt dafür, dass in jeder beliebigen Auflösung die Darstellung nach dem Willen des Gestalters umgesetzt wird. Auch ohne, dass Designweichen im PHP-Code oder CSS niedergeschrieben werden. Auf diese Weise können auch keine Daten bei Designumstellungen vergessen und damit offen gelassen werden.
Dies kann sinnvoll sein, so dass Inhalte entsprechend aufbereitet werden und sichergestellt ist, dass all diese Inhalte auf der Seite dargestellt werden können. Verwendet die Seite jedoch viele Medieninhalte oder hohe Auflösungen so kommt es mit einem Responsive Design zu dem Problem, dass zwar die Darstellung angepasst wird, aber nicht das Datenvolumen. Schaut man sich nun zum Beispiel frequentierte Nachrichtenseiten an, setzen diese weiter auf Weichen welche auf eine andere Subdomain für mobile Geräte umleiten. Dieses ist ein Vorteil für Nutzer wie auch für den Anbieter, denn beide profitieren vom angepassten und damit geringeren Datenvolumen. Doch ist dies mit ein Sonderfall, hier soll es um die “neue Designstufe” gehen.
Wie man an diesem Layout sieht, sind die Darstellungen bei den meisten Responsive Designs noch recht minimalistisch. So sind die Designelemente, Farben und grafische Einbettungen noch auf ein Minimum begrenzt. Jedoch ist es nur eine Frage der Zeit in der sich diese Designelemente wieder ihren Platz zurückerobern. Momentan überwiegt noch die technische Umsetzung. Ob man dieses als rudimentäre Funktion oder als bewusste Designentscheidung sieht bleibt jedem selbst überlassen.
Ein besseres Beispiel für Responsive Design ist das Template von WordPress 3.6
Je nach Auflösung orientieren sich die Elemente neu und schaffen so eine barrierefreie Darstellung der Inhalte, und um diese sollte es bei der Webseite ja gehen. Dieses wird durch ein durchdachtes und bewusstes Umbrechen erreicht. Mit den Breiten lassen sich die verschiedenen Formen für die Auflösungen schaffen. Ein großer Desktop wird zum Beispiel mit einer Maximalbreite bedient, das heißt, dass alle Elemente an ihren Idealplatz verschoben werden, zum Beispiel werden links und rechts vom Inhalt Bereiche für Links, Umfragen oder Menüs geschaffen. verkleinert man den angezeigten Raum wird auch das Design folgen. Wie etwa die Rücksetzung des Umfrage und weitere Beiträge-Bereiches nach dem Text. Weitere Verkleinerungen wären etwa dass das Menü sich umformatiert und nun oberhalb des Inhaltes sich eingliedert.
Auf diese Weise ist das Layout schon für drei Auflösungen hin vorbereitet, nun folgenden noch die Formatierungen der Inhalte. Diese werden in frei aufteilbare <DIV>-Blöcke gesetzt, so dass diese sich der Breite nach anpassen oder dass sie statt nebeneinander untereinander angeordnet werden. Dies kann man auch am Hauptbild des Beitrages sehen, bei dem sich das Desktoplayout zu einem kompakten für Smartphone geeigneten Design zusammenschiebt.
Ich denke mit dieser Beschreibung wird klar um was es sich bei einem responsive Design handelt. Ich gehe davon aus, dass in nächster Zeit die meisten neuen Projekte auf dem ein oder anderen responsive Ansatz entstehen werden. Aber auch denke ich, dass separate Styles und Modifikationen wie etwa Mobile-CSS oder Designweichen werden dadurch nicht aussterben, sondern sie werden viel eher mehr Vielfalt erreichen.
