Responsive Webdesign im Überblick
PC, Laptop, Tablet und Smartphone. Das Angebot an Endgeräten war noch nie größer als heute. So wird es immer wichtiger alle Inhalte des Webs auf sämtlichen Geräten ansprechend darzustellen.
Doch wie geht man dieses Thema richtig an?
Für jedes individuelle Gerät eine eigene Website zu bauen wäre viel zu umständlich und kostenintensiv. Von der Effizienz sei mal ganz abgesehen, wer will und kann schon eine komplette Website mindestens 3 mal bauen? Und dann für das Tablet möglicherweise auch noch einmal im Querformat?
„Website, geh auf mich ein!“
Die Lösung hierzu bietet das sogenannte „Responsive Webdesign“.
Responsive bedeutet frei übersetzt übersetzt soviel wie „auf jeden eingehen“. Das ist dabei der Keyfactor!
Überlegen wir uns hierzu ein Beispiel: Die Otto-Normal Website ist klassischerweise auf eine Auflösung von 1024 x X optimiert. Manch ein Designer traut sich sogar an noch höhere Auflösungen, aber wer kann schon davon ausgehen, dass jeder einen Cinema Display zu Hause stehen hat?. Diese leere Seite wird nun in den meisten Fällen mit einem Grid versehen, meist vier Spalten.
Sieht das nach Stunden des Webdesigns auf dem PC noch gut aus, so muss man sich die selbe Seite 1 zu 1 nun auf einem Smartphone oder Tablet vorstellen: Konnte ich vorher noch alles gut überblicken, so muss ich hier mühsam mit meinen Fingern quer über den Bildschirm wischen, zoomen und ausrichten um einen zumindest Textblock vernünftig lesen zu können. Von Bildern und Grafiken wollen wir erst gar nicht anfangen. Dabei geht die User Expirience der Seite meist komplett flöten und die Website wird schneller wieder geschlossen, als man gucken kann.
Um User aller Geräte auf meiner Website zu halten muss man also von vornherein anders denken: Ich unterteile die Website nicht mehr in einfache Spalten von Links nach Rechts, sondern in Blöcke! Die Aufteilung dieser Blöcke passt sich nun an die Breite des Browserfensters, sprich die Auflösung nach x, an. (siehe hierzu die Grafik) Stehen am Laptop alle vier Blöcke noch nebeneinander, so sind sie beim Tablet z.B. übereinander (2 oben, 2 unten). Das ganze geschieht automatisch, je nach Breite des geöffneten Fensters. Bei geringerer Auflösung nach x stehen später so zum Beispiel alle Blöcke übereinander. Das sorgt dafür, dass die Breite der einzelnen Blöcke zwar kleiner werden kann, aber man dennoch im Stande ist etwas zu lesen.
Der kleinste gemeinsame Faktor
Jedoch verlangt Responsive Web Design nach einer aufwendigeren Planung. Man muss darauf achten, dass die Anordnung der Blöcke horizontal wunderschön wirken mag, aber vertikal (zum Beispiel auf dem Smartphone) ein wildes Gewusel ist.
Um die Sache von vornherein ideal zu Planen empfiehlt es sich beim kleinsten Endgerät anzufangen, dem Smartphone. Später Elemente hinzuzufügen (für höhere Auflösungen) geht nämlich viel leichter von der Hand, als Inhalte zu entfernen. Von groß auf klein gehen macht deshalb wenig Sinn.
Weiterhin sehr wichtig: Für den Aufbau der Website darf schon ab dem ersten Gedanken nicht mehr in Pixeln gerechnet werden, sondern nur noch in Prozentangaben (z.B. á la Smartphone = 10% der eigentlichen Elementgröße). So ist gewährleistet, dass die Inhalte später immer die passende Größe haben, unabhängig von der Auflösung des Gerätes. Dies muss auch unbedingt bei Texten beachtet werden! Eine feste Schriftgröße von etwa 15pt kann auf dem PC super wirken, auf dem Smartphone der pure Graus sein.
Responsive Webseiten im Trend?
Wem jetzt schon das Entsetzen ins Gesicht geschrieben steht, der sei beruhigt. Zwar ist bzw. war Responsive Webdesign der absolute Trend 2011 und wird die Internetbranche sicher noch lange beschäftigen, jedoch sind noch nicht viele der „großen“ umgestiegen. Bis es sich wirklich durchsetzt, wird sicher noch einige Zeit vergehen und bis dahin lässt sich die eigene Seite sicher auch noch anpassen.
Wer anfangen möchte, dem sei geraten andere Websites zu besuchen und sich deren Herangehensweise anzusehen. Eine gute Linkssammlung findet sich dazu zum Beispiel bei Designmondo. Eindrucksvoll wird an 50 Beispielen gezeigt, was alles geht.
Eine Patentlösung für alle Fälle findet man (leider) nicht im Netz, aber durch die vielen Beispiele kann man sich schnell auf einen Stil einschießen. Und das schöne am Responsive Web Design: Ihr könnt auch in eurem normalen Browser die mobile Version sehen! Einfach das Fenster kleiner ziehen und schon verwandelt sich die Website (klappt übrigens auch hier im Blog ;) )
