Es ist eines der heißesten Themen dieses Jahres: Responsive Webdesign, die endgerätespezifische Darstellung von Websites. Wir widmen dem Thema einen Blogartikel, denn auch wenn auf den ersten Blick die Vorteile überwältigend erscheinen, ist Responsive Webdesign nicht für jede Internetzpräsenz notwendig.
Was bedeutet Responsive Webdesign?
Stellen Sie sich vor, Sie besitzen nicht nur einen Laptop oder einen PC mit Monitor sondern auch noch einen Tablet-PC und ein Smartphone.
Und nun schauen Sie sich ein und dieselbe Website auf diesen drei Endgeräten an – wie unterscheidet sich die Darstellung? In sehr vielen Fällen schlichtweg gar nicht. Dabei ist es doch sehr einleuchtend, dass eine Website auf dem iPad anders angezeigt werden sollte, als auf einem großen PC-Monitor.
Responsive Webdesign bietet genau das: Das Layout einer Website reagiert auf das Endgerät. Es passt sich flexibel an die verfügbare Bildschirmauflösung an, positioniert den Content je nach Endgerät unterschiedlich und skaliert Texte, Bilder und andere Elemente mit. Technisch geschieht das im Wesentlichen durch spezifische CSS-Codes, die an das jeweilige Endgerät geschickt werden.
Optisch sieht gelungenes Responsive Webdesign dann zum Beispiel so aus wie in der oben dargestellten Bildergalerie aus.
Wozu überhaupt Responsive Webdesign?
Webdesigner mussten in den vergangenen Jahren einen Spagat schlagen: Einerseits wurden die Auflösung von Desktop-Monitoren immer größer, andererseits nahm die Internetnutzung auf den kleineren, mobilen Geräten stark zu. Das hatte zwei Folgen: Websites wurden nicht auf allen Geräten einwandfrei dargestellt und der Webdesigner stand vor einer Fülle an Bildschirmauflösungen, die er möglichst alle berücksichtigen sollte. Zur Verdeutlichung: Alleine bei mobilen Endgeräten reicht die Bandbreite heute von 240x320 Pixeln bei einem kleineren Mobiltelefon bis hin zu 768x1024 Pixeln beim iPad in Portrait-Modus. Desktop-Monitore erreichen bereits eine Contentbreite von 1280 Pixel.
Responsive Webdesign ist eine mögliche Lösung für den schwierigen Spagat der Webdesigner: Bekommt eine Website ein Responsive Layout, reagiert sie auf das Endgerät und zeigt die Inhalte auf dem Monitor am Arbeitsplatz beispielsweise in einem vierspaltigen Layout an, während dieselben Inhalte von unterwegs auf dem iPhone in einem einspaltigen Layout betrachtet werden können.
Und was bringt es Ihren Besuchern? Benutzerfreundlichkeit! Denn die Website-Besucher sind nicht länger von Geräten abhängig, um Ihre Webpräsenz betrachten zu können. Ein gut durchdachtes Responsive Design ist in sich schlüssig und macht es dem Nutzer leicht. Die Anordnung des Inhalts wird zwar von Auflösung zu Auflösung anders dargestellt, zentrale Elemente wie Logos und Farbwelten bleiben aber gleich und der Nutzer findet sich auch in der mobilen Version schnell zurecht und muss nicht etwa das Navigationsschema neu lernen.
Wie groß ist der Aufwand für Responsive Webdesign?
Bei allen Vorteilen, die ein Responsive Layout bietet, darf natürlich nicht der zusätzliche Aufwand vergessen werden und bevor man voller Begeisterung eine Website fordert, die responive gestaltet ist, sollte man abwägen, ob es für das eigene Unternehmen oder Projekt wirklich notwendig ist.
Denn eine so flexibel reagierende Webpräsenz ist ein Großprojekt und betrifft sämtliche Stadien der Entwicklung: In der Konzeptionsphase müssen Desktop-Variante und mobile Version angedacht werden, daraus folgen zusätzliche Entwürfe für unterschiedliche Bildschirmauflösungen und auch beim CSS-Coding und dem abschließendem Testen der Seite entsteht Mehraufwand.
Zusammenfassend lässt sich sagen, dass Responsive Webdesign durchaus ein Trend ist, der sich in den kommenden Jahren immer stärker durchsetzen könnte, weil er in Sachen Benutzerfreundlichkeit und Reichweite großes Potenzial in sich birgt. Trotzdem ist Responsive Webdesign nicht automatisch die beste Lösung für jede Webpräsenz, das Kosten-Nutzenverhältnis muss eben stimmen.
Wie sieht Ihre eigene Website auf verschiedenen Geräten aus?
Sie wollen sich ein Bild davon machen, wie Ihre aktuelle Website bei unterschiedlichen Auflösungen aussieht? Unter http://mattkersley.com/responsive/ oder http://quirktools.com/screenfly/ können Sie jede beliebige URL testen.
Was denken Sie, wann macht Responsive Webdesign Sinn – oder eben nicht? Kennen Sie noch weitere Beispiele für gelungene Seiten?