Anzeige

Responsive Design

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:

  1. Usability – Prüfung, ob der User in einem bestimmten Anwendungskontext sein Ziel auf allen Endgeräten finden kann.
  2. Konsistenz - Spiegeln alle Unterseiten ein identisches Look-and-Feel wieder?
  3. Content Quality - Entsprechen die Inhalte der Website der Erwartungshaltung der User?
  4. Brand Perception - Wie wird das Unternehmen auf der der Website wahrgenommen?
  5. Utility - Welche hilfreichen Tools und Funktionen stehen dem User zur Verfügung?
  6. Joy of Use - Hier werden die Ladezeiten und Content-Aufbereitung analysiert.
  7. 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.

Robert Karl Fellmer, IT-Journalist
Robert Karl Fellmer
IT-Journalist, Wordfinder PR
(Bildquelle: Team23)

Newsletter Anmeldung

Smarte News aus der IT-Welt

Sie möchten wöchentlich über die aktuellen Fachartikel auf it-daily.net informiert werden? Dann abonnieren Sie jetzt den Newsletter!

Newsletter eBook

Exklusiv für Sie

Als Newsletter-Abonnent erhalten Sie das Booklet „Social Engineering: High Noon“ mit zahlreichen Illustrationen exklusiv und kostenlos als PDF!

 

Artikel zu diesem Thema

Online Shopping
Mai 13, 2020

Onlineshops in der Corona-Krise: So geht's richtig

Während des Shutdowns war der Onlinehandel oft der einzige Weg, auf dem Waren zum Kunden…
Customer Experience - Feedback
Mär 10, 2020

Kunden erwarten hyper-personalisierte und einfache Customer Experience

Nur 10% der europäischen Unternehmen geben an, dass Kunden die Brand Experience als voll…
Website
Jan 27, 2019

Die Website von morgen – schon jetzt an die Zukunft denken

Auch wenn viele Kunden im B2B-Bereich heute die Möglichkeit haben, über…

Weitere Artikel

User Experience

Wie die User Experience im E-Commerce zum Geschäftserfolg beiträgt

Die „User Experience“ ist heute auch im Online-Marketing und speziell bei der Conversion-Rate-Optimierung (CRO) von Websites und Onlineshops ein Schlüsselfaktor. Und eng damit verknüpft: Nutzersignale, die in der Suchmaschinenoptimierung (SEO) von nicht…
Payment Kreditkarte

Kontaktloses Einkaufen wird zur neuen Normalität

Die Corona-Pandemie stellt das Leben aller auf den Kopf. Auch der Einzelhandel sieht sich mit neuen Herausforderungen konfrontiert: Während Geschäfte zur täglichen Versorgung weiter geöffnet hatten, kämpfen sich die anderen Läden und Kaufhäuser erst langsam…
Corona Laptop

Lernen aus der Corona-Krise

Es geht wieder los: Da einige Regionen der Welt über rückläufige Raten von Covid-19-Infektionen und – zum Glück – auch über sinkende Todesfälle im Zusammenhang mit Corona berichten, beginnen immer mehr Länder, ihre Fahrpläne für eine schrittweise Öffnung…
Shopping Mobile

Fehler im Check-out bedrohen Umsatz in Onlineshops

Die Payment-Plattform Stripe hat eine Studie zu fehlerhaften europäischen Check-out-Prozessen vorgestellt. Teil der Stichprobe waren die wichtigsten E-Commerce-Websites in einigen der größten europäischen Märkte. Die meisten Fehler im Bezahlprozess machen…

Anzeige

Newsletter Anmeldung

Smarte News aus der IT-Welt

Sie möchten wöchentlich über die aktuellen Fachartikel auf it-daily.net informiert werden? Dann abonnieren Sie jetzt den Newsletter!

Newsletter eBook

Exklusiv für Sie

Als Newsletter-Abonnent erhalten Sie das Booklet „Social Engineering: High Noon“ mit zahlreichen Illustrationen exklusiv und kostenlos als PDF!