Das Unternehmermagazin aus der Handelsblatt Media Group

Creditreform

Haben Sie Ihre Firmen-Website schon einmal auf einem Tablet oder Smartphone betrachtet? Falls Ihre Online-Inhalte nicht in einer mobilen Version vorliegen oder nur für die Darstellung auf einem Standard-Computerbildschirm angepasst sind, könnte das Ergebnis enttäuschend ausfallen. Denn je nach Aufbau der Seiten sind einige Bereiche nur teilweise oder gar nicht sichtbar, Texte umbrechen unglücklich oder Links lassen sich nur mühevoll aktivieren.

„Als Designer haben wir versucht, unsere Kontrolle über die gedruckte Seite auf das Internet zu übertragen. Und diese Mentalität spiegelt sich auch in der Art und Weise wider, wie wir Webseiten für unsere Kunden entwickeln“, sagt US-Web-Entwickler Tim Kadlec selbstkritisch. Man habe alles dafür getan, die Kontrolle nicht aufgeben zu müssen. „Aber es bleibt leider eine Tatsache, dass wir sie nie hatten: Im Web sitzen die Benutzer auf dem Fahrersitz“, weiß Kadlec.

Flexible Auflösung

Responsive, das „reagierende“ Webdesign soll Abhilfe schaffen: „Es geht dabei um ein Design, das sich seiner Umgebung, der Bildschirmauflösung, anpassen kann“, erläutert Tino Urbiks, Webdesigner und Frontend-Entwickler aus Berlin. Eine sinnvolle Entwicklung in Zeiten, in denen das Geschäft mit mobilen Geräten den PC-Markt längst überholt hat. Angesichts der unzähligen verfügbaren Endgeräte sei es „einfach nicht mehr möglich, mit einer bestimmten Pixelbreite zu arbeiten“, so Urbiks und empfiehlt Liquid Designs, bei denen nicht mit festen Pixeln, sondern mit Prozentangaben gearbeitet wird.

Folgt eine Webseite dem Responsive Design, das den Aufbau stufenweise an die Auflösung des Ausgabemediums anpasst, funktioniert zum Beispiel ein Menü auf allen Geräten – und zwar sowohl im Hoch- als auch im Querformat. „Wichtig hierbei ist, dass sich Elemente wie Videos, Bilder und Slideshows dem Viewport, also dem sichtbaren Bereich im Webbrowser, anpassen“, betont Urbiks.

Eine „responsive“ Webseite ist prinzipiell mit den gängigen Content-Management-Systemen realisierbar, für die bereits einige fertige Lösungen verfügbar sind – beispielsweise das kostenlose „CMS Drupal“ (www.drupal.org). Wer eine individuelle Website ohne Einschränkungen für die Firma erstellen will, kommt für diese aufwendige Aufgabe jedoch nicht ohne einen spezialisierten Dienstleister aus. Einen guten Einstieg in das Thema bietet der englischsprachige Online-Beitrag „Responsive Webdesign“ von Designer Ethan Marcotte (http://bit.ly/1gjHigU).

Michael Milewski

– Genau planen: Um das Maximum aus einer Website herauszuholen, braucht es viel Zeit und sorgfältige Überlegungen.

– Mit Web-Analysetools beschäftigen: Welche Gerätetypen nutzen Ihre Besucher, wie leistungsfähig sind sie?

– Eigene Inhalte analysieren: Diese müssen nicht fertig sein, bevor Sie mit Design und Entwicklung beginnen – Sie sollten aber die Struktur erkennen.

– Auf geräteübergreifende User-Experience achten: Besucher erwarten, dass das Erlebnis stets ähnlich, aber an das jeweilige Gerät angepasst ist.

– Die Website so weit wie möglich auf echten Geräten testen.

– Virtuelle Simulationen für verschiedene Ausgabemedien nutzen. Die Site www.responsinator.com hilft dabei.

Quelle: Tim Kadlec, „Praxiswissen Responsive Webdesign“, O’Reilly-Verlag