Praxisbericht: Wie konzipiert man eine Responsive Website?

By 9. September 2013Technologie, Trends

Innert kürzester Zeit ist Responsive Webdesign zu einer Standardanforderung in Website-Projekten geworden. Das ist zu begrüssen, denn Responsive Webdesign garantiert eine optimale User Experience unabhängig von Bildschirm- und Fenstergrösse. Das ist vor allem deshalb wichtig, weil die Internet-Nutzung via Smartphones und Tablets weiterhin massiv zunimmt (vgl. Grafik). Aber auch Nutzern von sehr grossen Bildschirmen (sei es ein Smart-TV, sei es ein 27-Zoll-iMac) bringt Responsive Webdesign Vorteile. Und eigentlich war das Web schon immer so gedacht; starre Seitenlayouts dürften deshalb als eine Übergangsphase in die Geschichte des Internets eingehen.

Eine Responsive Website erfordert neue Herangehensweisen – sowohl in der Konzeption als auch in der Umsetzung. Doch während sehr viel über die technische Umsetzung geschrieben wird, findet man kaum Informationen darüber, wie man den Konzeptionsprozess optimal gestaltet und welche Tools dabei nützlich sind. Wer in einem konkreten Projekt steckt merkt allerdings bald, dass man mit den traditionellen Wireframes an Grenzen stösst, denn Wireframes sind statisch und können die dynamische Anpassung eines Seitenlayouts schlecht visualisieren. Wenn dann Kunden, Berater, Screen Designers und Frontend Devolpers sich gegenseitig zu erklären versuchen, wie sich eine Webpage je nach Bildschirmauflösung verändert, dann sind Missverständnisse eher die Regel als die Ausnahme.

Nach unserer Erfahrung führt beim Responsive Webdesign kein Weg am Prototyping vorbei. Nur wenn man bereits in einem frühen Entwurfsstadium erlebt, wie sich ein Wireframe im Browser verhält, versteht man die User Experience und kann man die Auswirkungen auf Design, Programmierung und Content Management abschätzen. Andererseits sind in der Frühphase rein schematische Prototypen ohne gestalterische Details völlig ausreichend, ja sie helfen sogar, sich auf das Wesentliche zu konzentrieren. Ist das grundlegende Verhalten der einzelnen Inhaltsblöcke einmal definiert, so kann man immer noch Texte, Bilder und grafische Details ergänzen, damit der Kunde die endgültige User Experience besser beurteilen kann.

Weil die gängigen Tools meist kein Responsive Webdesign berücksichtigen, werden solche Prototypen heute noch oft von Frontend Developers erstellt. Für einen schnellen, interaktiven Konzeptionsprozess ist dies allerdings nicht ideal. Insofern ist es erfreulich, dass nun erste Tools auf den Markt kommen, welche es auch einem Berater, Konzepter, Information Architect oder Screen Designer erlauben, Prototypen ohne Programmierkenntnisse zu erstellen. Programme wie z.B. Adobe Edge Reflow (derzeit noch im Beta-Stadium) erlauben es, dass Projektteams einen Prototypen gemeinsam entwickeln. Das ist deshalb wichtig, weil bei einer Responsive Website Inhalt, Gestaltung und Programmierung noch besser aufeinander abgestimmt sein müssen als bei einem konventionellen Web-Projekt.

Leave a Reply