Foto: Cem Bazer
Die steigende Anzahl an internetfähigen Geräten mit diversen Bildschirmauflösungen, angefangen bei Smartphones über Tablets, Laptops und Desktop-PCs bis hin zu Smart-TVs fordert Webdesigner, Webentwickler und Websitebetreiber gleichermaßen heraus und verlangt neue Ansätze in der Realisierung.
Responsive Webdesign - ein "Must Have" im Jahr 2014?
Ein Streifzug durchs Web zeigt, dass längst noch nicht alle Websites für die mobile Internetnutzung gewappnet sind. Obwohl Jahr für Jahr immer mehr Mobilnutzer hinzukommen, halten viele Websitebetreiber an ihrem obsoleten Internetauftritt fest. Vor allem kommerzielle Websites wie Onlineshops oder Buchungsportale müssen den neuen Anforderungen gerecht werden, um nicht auf der Strecke zu bleiben.
Jeder Websitebetreiber sollte für sich klären, ob seine Website überwiegend mobil oder von Desktop-Browsern aufgerufen wird. Je nachdem bleiben zwei Möglichkeiten zur Auswahl: Entweder werden mehrere Versionen einer Website entwickelt, beispielsweise eine abgespeckte, mobile und eine ausführliche Desktop-Version, oder eine Version, die für alle Endgeräte optimiert wird. Des Weiteren stellt sich die Frage, ob die Website hinsichtlich Suchmaschinenoptimierung und "Usability", sprich Benutzerfreundlichkeit, den heutigen Anforderungen genügt.
In den meisten Fällen ist es für Websitebetreiber sinnvoll, sich für eine Version des Internetauftritts zu entscheiden, die auf allen Geräten läuft, suchmaschinen- und benutzerfreundlich ist - die zeitgemäße Lösung eben. Für die Umsetzung ist derzeit "responsive Webdesign" am geeignetsten.
Es erfüllt gleich mehrere Ansprüche: Die Usability ist durch die flexible Darstellung der Website sehr hoch, was wiederum zu einem guten Ranking in den Suchmaschinenergebnissen führt.
Aber was heißt "responsive" überhaupt?
Übersetzt bedeutet "responsive" reagierend, reaktionsfähig. Das heißt also, dass das Webdesign nicht statisch ist, sondern auf die Umgebung reagiert, in diesem Fall auf die verschiedenen Bildschirmauflösungen.
Trotzdem ist responsive nicht gleich responsive, sondern tritt in drei Abstufungen auf:
"Floaten" (treiben) die Inhalte flexibel auf der Website, proportional angepasst und immer die volle Bildschirmauflösung ausfüllend, spricht man von "full responsive".
Das Gaudi-Wiesn-Quiz "O'klickt is! - Welcher Wiesn-Typ bist du?", umgesetzt als Web-app, passt die Grafiken im Hinter- und Vordergrund immer an die Auflösung des Endgeräts an.Ein stufenweise responsives Verhalten hat festgelegte "Breakpoints" (Umbruchpunkte), an denen sich das Seitenlayout für die definierten Auflösungen verändert.
Die Website von happy pixel zeigt dem Besucher immer den gesamten Content, allerdings bestimmen zwei festgelegte Breakpoints die Anordnung der Elemente.Bei verschiedenen Versionen einer Website bedeutet responsive lediglich, dass die zum Gerät und zur Auflösung passende Version optimiert angezeigt wird. Soziale Netzwerke wie Facebook oder YouTube haben ihre Websites dementsprechend optimiert.
Die komplexen Anforderungen eines flexiblen Layouts stellen Konzeption und Design vor neue Herausforderungen. Die beiden gängigen Herangehensweisen für das Webdesign basieren auf dem Mobile First- oder Desktop First-Konzept.
Entscheidet sich der Designer für den Ansatz Mobile First(Progressive Enhancement) stehen die kleinsten und leistungsschwächsten Geräte im Vordergrund. Design und Content werden auf ein Minimum reduziert und für größere Auflösungen um Features ergänzt.
Der Desktop First-Ansatz (Graceful Degradation) optimiert die Desktop-Version, um dann nach und nach Elemente wegzustreichen bis eine abgespeckte, übersichtliche und gut bedienbare Version für Tablets und Smartphones entstanden ist.
Mehr Kommunikation, Kooperation und Kosten
Häufig sind sich Website-Betreiber nicht darüber im Klaren, welcher Aufwand hinter der Erstellung einer Website im responsive Webdesign steckt und vor allem, wie viele Mitarbeit auch von ihrer Seite gefordert ist. Um das Projekt - vom ersten Kontakt bis hin zum Rollout der Website - stetig am Laufen zu halten und erfolgreich abzuschließen, ist eine intensive Kommunikation und Kooperation notwendig.
Diese beginnt schon bei den Vorüberlegungen, die der Websitebetreiber gemeinsam mit dem Webdesigner treffen muss. Zum einen gehört geklärt, wer die Zielgruppe ist und welches Internetnutzungsverhalten diese an den Tag legt. Zum anderen gilt es den Content zu priorisieren.
Eine gut durchdachte Konzeption ist beim responsiven Webdesign das A und O. Die Website, sprich der digitale Markenauftritt, muss einen professionellen Eindruck machen - und das am besten auf allen möglichen Endgeräten. Aktuell sind gut 200 verschiedene Bildschirmauflösungen auf dem Markt - Tendenz steigend. Zudem können Browser-Bugs oder andere unvorhersehbare externe Einflüsse die Darstellung der Website negativ beeinflussen. All das muss im Konzept abgesteckt sein, um die Website so flexibel wie möglich zu gestalten. Das heißt für Webdesigner weg von pixelgenauen Layouts und für den Websitebetreiber Abschied nehmen von romanfüllenden Texten, Flash-Animationen und Bildern mit geringer Auflösung.
Auch in der Entwicklungsphase muss der Website-Betreiber weiterhin miteinbezogen werden. Er sollte sich bereits über die Inhaltselemente - und noch keine finalen Texte - im Klaren sein und diese mit dem Webdesigner absprechen. Sobald die ersten Layouts stehen, muss immer wieder getestet werden, ob alle Inhalte auf diversen Bildschirmauflösungen ideal angezeigt werden. Parallel dazu entwickelt sich der Content.
Mit dieser Vorgehensweise kann verhindert werden, dass erst wenn die fertig programmierte Website steht, festgestellt wird, Layout oder Content sind nicht für responsives Verhalten geeignet. Testläufe und Optimierung sollten im gesamten Prozess stets eingebunden sein.
Der Zeitaufwand für den gesamten Entwicklungsprozess einer Website im responsiven Webdesign ist deutlich höher, und dementsprechend spiegelt sich das in den Kosten wider. Allein die Frontend-Programmierung, sprich die Website, die der User zu sehen bekommt, ist wegen der komplexen Anforderungen mindestens doppelt so teuer. Dafür können an anderer Stelle Kosten eingespart werden: Mit nur einer Website-Version muss neuer Content immer nur einmal aktualisiert werden. Wenn es zu Updates und Erweiterungen kommt, ist eine responsive Website wegen ihres flexiblen Layouts ebenfalls von Vorteil.
Daher ist es ratsam, die Investition zu tätigen und eine zukunftsfähige Website an den Start zu bringen, die bestens für die zunehmende mobile Internetnutzung mit diversen internetfähigen Geräten gerüstet ist.
Fazit
Responsive Webdesign ist die zeitgemäße Lösung für das veränderte Surfverhalten. Webdesigner und Website-Betreiber müssen bei der Entwicklung von Design und Content umdenken. Enge Zusammenarbeit und stetiger Austausch während des Projekts beflügeln die erfolgreiche Realisierung und lassen schon frühzeitig Optimierungsprozesse zu.
Hinsichtlich mobiler Trends ist eine Website im responsiven Webdesign zu empfehlen. Längst werden nicht mehr nur schnell die Mails gecheckt oder Informationen gegoogelt, sondern es wird auch mobil konsumiert. Und die mobilen Konsumenten sind anspruchsvoll. Eine übersichtliche Website, die sie intuitiv und schnell zum Ziel führt, lässt sie definitiv häufiger wiederkehren. (bw)