Was sind die Herausforderungen?
Smartphones & Co. haben kleinere Displays, werden über einen Touchscreen bedient, erreichen noch nicht die Rechenleistung von Desktop-Rechnern und werden in der Regel mit der Absicht eingesetzt, schnell und unkompliziert an Informationen zu gelangen. Weiterhin beherrschen Geräte des Marktführers Apple nicht die Flash-Technologie, auf welcher ein beträchtlicher Anteil von Web-Inhalten basiert.
Noch wesentlich umfassender ist aber die Aufgabenstellung, die sich aus den unterschiedlichen Display-Größen ergibt. Die Auflösungen und Maße der mobilen Geräte variieren sehr stark. Die Darstellung einer Website sollte sich also der Display-Größe und Ausrichtung (Quer- oder Hochformat) anpassen. Andernfalls übernehmen die Browser dieser Geräte die Kontrolle über die Ansicht und verkleinern die Website dermaßen, dass der Nutzer die Seiten ständig ein- und auszoomen muss, was ihm einen längeren oder wiederholten Besuch der Website verleitet.
Eine moderne Herangehensweise – Responsive Design
Moderne Websites mit Responsive Design verfügen über möglichst flexible Layouts, deren Verhalten und Darstellung durch unterschiedliche Displayauflösungen und -größen speziell definiert werden. Auch Schrift- und Bildgrößen, also die Darstellung der Inhalte im Layout, können hier mit einbezogen werden (Fluid Layout).
Je nach Auflösung bzw. zur Verfügung stehendem Platz werden unterschiedliche Vorgaben zu Funktionen, Inhaltsumfang und Layout abgerufen. Bei Bedarf werden sperrige Grafiken durch kompaktere für den mobilen Style ersetzt. In gestalterischer Hinsicht ist dabei auf die sichere Wiedererkennung von Marke und Identität (CI) und eine einfache Benutzerführung zu achten. Wie bei anderen Applikationen für Smartphones sollten sich auch Inhalte von Websites verstärkt in der Vertikalen aufbauen. So können sie mit der gewohnten Wischbewegung (Swipe) durchgescrollt werden.
Für die Umsetzung werden bei den unterschiedlichen Displayauflösungen bzw. -größen z. B. folgende Werte berücksichtigt, in welchen Verhalten und Darstellung unterschiedlich definiert, oder auch nur Details geändert sind: Breite ist mindestens 300 Pixel, Breite ist mindestens 800 Pixel, Breite ist mindestens 1000 Pixel, usw.
Ziel ist hierbei, nicht bestimmte Geräte (z. B. iPhone 3, BlackBerry XYZ, iPad 123 ...) anzuvisieren, sondern design- und gebrauchsorientiert auf den zu Verfügung stehenden Platz zu reagieren (Device-Agnostic).
Neuprogrammierung oder Erweiterung der bestehenden Website?
Logisch ist, dass der Gesamtaufwand geringer ausfällt, wenn neue Websites bereits inklusive Responsive Webdesign konzipiert werden – oder die Entwicklung sogar mit dem Schwerpunkt mobile Geräte erfolgt (Mobile First).
Dabei muss der Kunde nicht in allen Festlegungen gleichzeitig jede Darstellungsvariante mit einbeziehen. Der versierte Webdesigner hat die mobile Variante stets mit im Blick. Diese kann dann ebenso in einem zweiten Schritt abgesprochen und umgesetzt werden.
Folglich ist auch die Erweiterung einer bestehenden Website sinnvoll, sofern das Design einem Fluid Layout nicht vollständig widerspricht und die Site nicht auf einem unflexiblen Content-Management- oder Shop-System aufbaut. Und natürlich sollte die Programmierung auf modernen Web-Technologien basieren. Nur dann können Anpassungen und Erweiterungen in effizienter Weise umgesetzt werden.
Dringend abzuraten ist von Umsetzungen durch Hobby-Webdesigner und reine Gestalter („Grafiker“), da beide die modernen Web-Technologien nicht vollständig überblicken werden und so erheblicher Aufwand für Nachbesserungen zu erwarten ist.
Aufwand und Kosten
Der Aufwand zur Ergänzung eines responsiven Webdesigns richtet sich – neben den oben beschriebenen Voraussetzungen – nach der angestrebten Ausprägung der mobilen Version. Sind beispielsweise auch für Bildergalerien eigene Funktionalitäten zu integrieren, kann der Arbeitsaufwand die Größenordnung der Basisprogrammierung erreichen.
Im günstigsten Fall sind 10 Stunden einzukalkulieren, um die Benutzerfreundlichkeit durch die wichtigsten Anpassungen entscheidend zu erhöhen. Mehr Klarheit schafft eine gemeinsame Analyse der Website und die Abwägung der sinnvollsten Maßnahmen vor Ort in unserem Büro.
Die angepeilte Lösung kalkulieren wir gerne kostenlos und unverbindlich.