Balanceakt zwischen Grafik, Content und Technik

Responsive Webdesign ist mehr als eine auf die Endgeräte angepasste Darstellung der Website. Programmierer Niklaus Hug erklärt die verschiedenen Dimensionen einer Website und was beim Programmieren von responsiven Websites alles beachtet werden muss.

Mit Responsiveness wird beschrieben, wie ein abgeschlossenes System auf seine Umwelt reagiert. Überall finden wir Beispiele dafür. Die Pupille des Auges verkleinert sich, wenn mehr Licht einfällt und die Haut des Chamäleons passt sich farblich automatisch der Umgebung an.

Der Mensch hat gelernt, responsives Verhalten für seine eigenen Zwecke zu nutzen:
Der Stoff für Wintersportbekleidung beispielsweise ist so fabriziert, dass dieser auf die Aussentemperatur reagiert. Bei kalten Temperaturen verdichtet er sich, um die Körperwärme zurückzuhalten und bei warmen Temperaturen dehnt sich das Gewebe aus, um mehr Wärme abgeben zu können. Auch Websites können so programmiert werden, dass sie auf die Umwelt reagieren.

Vor einigen Jahren verstand man unter Responsive Webdesign lediglich die unterschiedliche Darstellung einer Website auf verschiedenen Endgeräten. Heute verstehen wir unter Responsiveness weit mehr als Device Related Graphic Design, auch die Content-Strategie und die darstellenden Endgeräte sind zu betrachten. Diese drei Dimensionen – Grafik, Content, Technik – haben unterschiedliche Anforderungen und sind aufeinander abzustimmen. Das heisst: Nicht nur die Grafik soll sich den Endgeräten anpassen, auch Content und Technik tragen einen wesentlichen Teil zu gutem Responsive Webdesign bei.

1 – Grafik oder die Kunst, das Corporate Design einzuhalten

Durch die geschickte Verwendung von Media Queries ist es möglich, den Inhalt einer Website je nach Bildschirmbreite in einem andern Layout zu zeigen. Jedes Gestaltungsmerkmal kann in Abhängigkeit zur Bildschirmbreite definiert werden.

Diese Fähigkeit wurde von allen modernen Template Frameworks adaptiert und wird ebenso von den gängigen Browsern unterstützt. Die Kunst liegt darin, die Webseiten-Elemente so zu gestalten, dass sie über alle Bildschirmbreiten hinweg das Corporate Design konsistent wiedergeben und ein hoher Grad an Wiederverwendbarkeit erreicht wird. Denn: Entwicklungszeit kann massgeblich eingespart werden, wenn Webseiten-Elemente als einzelne Module wiederverwendet werden können.

2 – Content First!

Unter anderem geht Content First davon aus, dass der Hauptgrund, warum eine Website besucht wird, dessen Inhalt ist. So wird nur relevanter Inhalt in die Website aufgenommen und die Anordnung erfolgt entsprechend den Bedürfnissen der Besucher. Dies ist nicht nur für Smartphones wichtig, bei denen die Anzeige über kleine Bildschirme erfolgt. Websites in den 90er Jahren waren derart mit Informationen überladen, dass man die gewünschte nur schwer gefunden hat. Ein befriedigendes Surf-Erlebnis war das sicherlich nicht.

Welcher Inhalt am wichtigsten ist, hängt stark vom User-Kontext ab. Je nach demografischen Merkmalen der Webseitenbesucher werden andere Schwerpunkte gesetzt. Unter anderem gibt es geschlechtsspezifische, altersbedingte und kulturelle Unterschiede. Das Zielpublikum zu kennen, um entsprechende Profile daraus abzuleiten, ist eine echte Hilfestellung, um die Inhalte der Website richtig zu priorisieren und aufzubereiten. Damit wird die User Experience massgeblich verbessert.

Es lassen sich dennoch allgemein gültige Aussagen treffen. Zum Beispiel werden Webseiten von Restaurants oder Kundenzentren häufig nach Lageplan, Adressdaten und Öffnungszeiten durchsucht, und auch Notfallnummern sollten auf allen Geräten schnell zugänglich sein.

Somit ist der Kontext nicht nur von Person und Geschäftsfeld abhängig, sondern auch von Ort und Zeit. Es ist wahrscheinlich, dass bei einem mobilen Zugriff auf einen Fahrplan die nächste Verbindung von der nächsten Haltestelle gewünscht ist. Erfolgt der Zugriff hingegen nach Mitternacht, kann davon ausgegangen werden, dass der Fahrplan des Nachtnetzes verlangt wird. Hier darf auch mal gemutmasst werden. Allerdings sollte im Nachgang mittels Pfad-Analyse der Weg der Besucher durch die Website nachvollzogen werden.

Bei einem Informationsportal liegt es zum Beispiel nahe, dass sich der Besucher bei einem erneuten Aufruf der Website wieder für die selben oder verwandte Themen interessiert. Entsprechende Daten können ohne Weiteres über Cookies zugeordnet oder gleich in einem Account gespeichert werden.

Die Dimension Content hat somit zum Ziel, die Inhalte nach Ort, Zeit und bekanntem Benutzerverhalten zu priorisieren und entsprechend den Bedürfnissen auszuliefern. Nie sollte aber der Zugriff auf Inhalt unnötig erschwert oder gar verunmöglicht werden. Wie gute Servicekräfte versuchen wir, die Bedürfnisse der Kundschaft von den Lippen abzulesen, ohne diese dabei zu bevormunden.

3 – Die User kennen und Schwerpunkte in der Technik setzen

Neben der Bildschirmauflösung ergeben sich auch aus weiteren Gerätemerkmalen Ansprüche an die Webseite. Den Nutzern von Retina Displays möchte man gestochen scharfe Bilder zur Verfügung stellen. Alle anderen Nutzer, ohne hochauflösende Bildschirme, möchte man aber nicht mit längeren Ladezeiten belasten. Auch hier können Zielkonflikte auftreten, welche während dem Projektverlauf aufzulösen sind. Wird primär über Bilder kommuniziert, so sind hochauflösende Bilder wichtiger. Dienen diese aber lediglich als Ergänzung, so kann auf die zusätzliche Datenlast verzichtet werden.

Um simultan auf die Geräteeigenschaften der Besucher reagieren zu können, wurden in den letzten Jahren wertvolle Werkzeuge geschaffen. Auch wenn diese noch noch nicht alle komplett ausgereift sind und daher nicht von allen Browsern unterstützt werden können, sollten die Möglichkeiten und die Bedürfnisse ausgelotet werden.

Fazit

Gutes Webdesign ist also das Ergebnis einer ausbalancierten Strategie zwischen Grafik, Content und Technik. Jedes Projekt ist aber individuell und bringt deshalb eigene, ganz spezifische Herausforderungen mit sich. Alle diese Ansprüche zu vereinfachen, zu verdichten und schliesslich zu vereinen ist entscheidend dafür, damit der User eine Website als hilfreich empfindet.

Niklaus: Born in the year of Super Mario. Enthusiastic Web Developer specialised in Open Source CMS. Programming HTML5, CSS3, JS, PHP, Python.

Glossar

Media Queries fragen den Medientyp des Gerätes ab, mit dem auf die Website zugegriffen wird. So kann ein entsprechendes Stylesheet bereitgestellt werden kann.

Template Frameworks sind Sammlungen von kurzen, aufeinander aufbauenden Programmblöcken, welche die Umsetzung eines Designs standardisieren und beschleunigen.

zurück zum Haupttext