Thought Leadership
Zahlreiche Websites sind heutzutage immer noch nicht responsiv gestaltet oder sauber an die Multi-Device-Bedienung angepasst. Bei der Umsetzung werden teilweise Templates verwendet, die nicht auf Mobile Devices ausgelegt sind oder deren Anpassung an die verschiedenen Endgeräte nicht stattgefunden hat.
Desktop-konzipierte Designs bilden oftmals die erste Grundlage für Erstellung einer Homepage und obwohl die Zahl der mobilen Nutzer stetig steigt, geben organisatorische oder finanzielle Gründe immer noch zu oft den Anlass, der passenden Umsetzung auf die mobile Darstellung nicht die nötige Aufmerksamkeit zu geben.
Dem jeweiligen Endgerät entsprechend, verschiedene Varianten einer Webseite mit daran angepasstem Content darstellen zu können, ist inzwischen die Hauptaufgabe in der Darstellungsaufbereitung. Websites, die mit responsivem Design ausgestattet sind, berücksichtigen die unterschiedlichen Anforderungen der Endgeräte automatisch. Dabei gilt es stark variierende Größen und Auflösungen der Displays zu beachten. Elemente wie Menüleisten, Logos oder Hintergründe werden dabei entsprechend Ihrer Position unterschiedlich behandelt. Passende Skalierungen und Umbrüche sorgen für weitere Aufgabenschwerpunkte bei der Transformation der Designvarianten.
„Letztlich ist die Anforderung des Nutzers an die Website der ausschlaggebende Punkt“ so Oliver Vogt, Geschäftsführer bei der Digitalagentur TEAM23 aus Augsburg. Bei einer hauptsächlich von mobilen Nutzern angesteuerten Homepage stellt sich auch automatisch die mobile Variante in den Vordergrund und die klassische Desktopvariante der Webseite wird daran angepasst. Insbesondere bei E-Commerce-Angebotsseiten hat sich dieses Verfahren inzwischen durchgesetzt. „Alternativ lassen sich auch zwei verschiedene Varianten ein und derselben Webseite erarbeiten. Das bedeutet aber in Folge einen nicht zu unterschätzenden Mehraufwand, der sich allerdings je nach den Anforderungen dennoch durchaus lohnen kann“, fügt Vogt hinzu.
Screendesign agil anpassen
Welche Inhalte auf einer mobilen Seite dargestellt werden und in welchem Umfang das geschieht, ist ein wichtiger Punkt in der Entwicklung des Designentwurfes. Bei der einzelnen Betrachtung der unterschiedlichen Devices ergeben sich automatisch die Elemente, welche primär dargestellt werden müssen. Das Design folgt dabei dem darzustellenden Inhalt. Hierbei ergeben sich einzelne Punkte, die auf der mobilen Darstellung wichtig sind und immer präsent sein sollten. Vogt: „Dieses Screendesign mit Buttons, primären Inhalten & Content Elementen ist einer ständigen Überarbeitung unterworfen. Das bedeutet, dass die neuesten Entwicklungen des Marktes und seiner Branchengrößen ständig Eingang finden müssen. Gerade im E-Commerce Bereich ist das ständige Testen verschiedener Varianten unabdingbar. Nur so erkennt man, welche Darstellung beim Nutzer am besten ankommt und mehr Umsatz bringt
“Wenn die Top-Adressen im Netz Ihre Darstellung im Detail ändern, sollte man also nach Möglichkeit diese als Vorbild nehmen, um stets up to date zu bleiben. Eine Telefonnummer oder der Warenkorb stellen zum Beispiel solche elementaren Inhalte dar, die in einer mobilen Variante immer sauber mit dargestellt werden müssen. Vogt weist in diesem Zusammenhang auf fast schon erdbebenartige Einflüsse hin: „Werden diese Elemente von Branchengrößen in Design und Anordnung verändert, hat das unmittelbare Auswirkung auf das Orientierungsgefüge der Mehrheit der Nutzer“. Ändern sich aufgrund solch neuer Entwicklungen und Erkenntnisse Darstellung und Anordung, muss darauf zügig reagiert werden können, um nicht ins Hintertreffen zu geraten.
Konzeption und Herangehensweise
Das Ziel einer gelungenen Umsetzung ist eine ganzheitliche Lösung. Mit der standardmäßigen Zielgruppenanalyse, der erwarteten Nutzung der Seite und anhand von entsprechenden Geodaten lässt sich der responsiv einzubindende Content im weiteren Verlauf an die Anforderungen der mobilen Seite stärker definieren. Vogt: „Dabei geben folgende mögliche Fragen den Rahmen vor: ‚Wie soll die Website je nach Endgerät genutzt werden?‘ – ‚Was wollen wir, dass der Kunde letztlich machen soll und auf der anderen Seite, was erwartet der Kunde von meinen Seiten?‘ – ‚Soll oder will er sich informieren, konsumieren oder kontaktieren?‘ Wünsche und Nutzungserwartungen der Zielgruppen an die Website müssen also die Grundlage bilden.“
In der Konzeption gilt es diese unterschiedlichen Ausgangsszenarien zu berücksichtigen, um eine adäquate technische Umsetzung erarbeiten zu können. Ein Audit der bestehenden Seite und das Erstellen einer Costumer Journey sind im weiteren Verlauf des Projektes relevante Stationen, um für das Unternehmen und den User den optimalen Weg zur Designfindung aufzuzeigen. Diese gilt es dann mit einem ausführlichen Testing zu überprüfen und gegebenenfalls zu optimieren.
Ein Device-Lab-Testing mit möglichst vielen unterschiedlichen mobilen Devices sowie Browservarianten erzeugt weitere ausführliche, belastbare Ergebnisse im Anwenderbereich. Folgende Faktoren benötigen dabei besonderes Augenmerk und können folglich auch in Zusammenhang miteinander gebracht werden, um ein Gesamtbild zu erhalten:
- Usability – Prüfung, ob der User in einem bestimmten Anwendungskontext sein Ziel auf allen Endgeräten finden kann.
- Konsistenz – Spiegeln alle Unterseiten ein identisches Look-and-Feel wieder?
- Content Quality – Entsprechen die Inhalte der Website der Erwartungshaltung der User?
- Brand Perception – Wie wird das Unternehmen auf der der Website wahrgenommen?
- Utility – Welche hilfreichen Tools und Funktionen stehen dem User zur Verfügung?
- Joy of Use – Hier werden die Ladezeiten und Content-Aufbereitung analysiert.
- Bei der Frontendbetrachtung eines Responsive-Design-Projektes steht auch die Backend-Nachbearbeitung im Fokus. Ist der Aufwand für kleine Änderungen zu groß, sind Optimierungen nicht immer sinnvoll. Auch kann es möglich sein, dass das Template entsprechende Änderungswünsche nicht ermöglicht, oder für eine mobile Version nicht ausgelegt ist. Dann empfiehlt es sich, nur Details neu zu entwickeln oder gegebenenfalls das gesamte mobile Design als Projekt neu aufzulegen.
Atomic Design im Einsatz
Über Skizzenmethoden wie Moodboard, Scribble und Wireframe entsteht ein grobes Designraster, mit dem in den digitalen Tools wie Sketch, Invision oder Zeplin weitergearbeitet werden kann. „Das Atomic Design ist dabei der Schlüssel zu einer erfolgreichen Umsetzung im Baukastenprinzip“, so Vogt. Das Design einzelner Elemente, die sich individuell einfach zusammen bauen lassen, bildet somit zwar den Start eines solchen Projektes. Jedoch ist es damit allein noch nicht getan – Feinheiten auf granularer Ebene müssen bedacht und implementiert werden. „Das Verständnis für die Kleinteiligkeit dieses Designansatzes ist für die Entwicklung einzelner Elemente von entscheidender Bedeutung“, erläutert Vogt.
Clickdummies, also noch nicht programmierte Vorlagen, dienen im Anschluss als erste digitale Entwurfsskizze, über die dann direkt im Browser mithilfe von Kommentarfunktionen weitergearbeitet werden kann. Diese direkte Onlineüberarbeitung am Projektzwischenergebnis erspart eine Vielzahl von Offline-Arbeitsvorgängen und funktioniert um einiges schneller. Funktionstests finden dabei meist schon parallel zur Entwicklung statt und dienen der Usabilityoptimierung und Qualitätssicherung. „Mit einer abgespeckten Version (sog. Minimum Viable Product, MVP) lassen sich im Live-Testing auch schon erste Feedbacks aus den User Experiences in die Arbeit einbinden“, sagt Vogt. „Diese bieten gleichzeitig hilfreiche Anhaltspunkte für nötige Weiterentwicklungen.“
Daher sollten diese Schritte bereits frühzeitig im Budgetrahmen des Projektes bedacht werden. Letztlich bildet die gemeinsame Arbeit der Abteilungen Design und Entwicklung sowie das Verständnis für die jeweiligen Möglichkeiten und Grenzen die Grundlage für eine erfolgreiche Entwicklung des Responsive Designs zwischen Desktop-Variante und mobiler Version.
