Es wird Zeit für eine strategische Entscheidungshilfe: Responsive vs. Adaptive Webdesign! In einem Punkt sind wir uns einig: eine mobile Webseite ist heutzutage unverzichtbar. Nutzer surfen längst nicht mehr nur zu Hause oder im Büro am stationären PC. Wir sehen sie täglich in der Bahn und auf dem Gehweg mit mobile Devices herumhantieren und wie „Smombies“ (Smartphone + Zombies) auf ihre Bildschirme schauen. Doch genauso oft hören wir von den Problemen, die das Surfen auf mobilen Geräten mit sich bringt.
Die Ursache liegt dabei auf der Hand: Viele Unternehmen versuchen, ihre komplette Desktopseite wie mit einer Schraubzwinge auf einen kleineren Bildschirm zu pressen – dabei braucht es das doch gar nicht. Eine mobile Webseite sollte den Usern unterwegs nur das anbieten, was sie auch unterwegs brauchen – clean & clear!
Die Bedürfnisse der Nutzer sowie der Kontext, in dem sie sich bewegen, bilden die Basis für die Entscheidung, ob Du mit einem Responsive oder einem Adaptive Webdesign besser aufgestellt bist. Wir haben festgestellt, dass alle nur noch von „responsive“ reden. Doch ist das die alles umfassende Lösung?
In diesem Artikel zeigen wir Dir, was „responsive“ bedeutet, welche Vor- und Nachteile es im Vergleich zu Adaptive Webdesign hat und wie Du anhand einer Nutzeranalyse und des Growth Canvas herausfindest, mit welcher Strategie Du am besten fährst.
Responsive vs. Adaptives Webdesign – was kann es?
Ethan Marcotte etablierte den Begriff „Responsive Webdesign“ im Jahr 2010 für einen Artikel im Magazin A List Apart. Seitdem kursiert der Begriff in den Köpfen der Verantwortlichen, ohne dabei die feinen Unterschiede zu Adaptive Webdesign zu kennen.
Nicht jede Webseite, die sich automatisch an die Browsergröße anpasst, ist eine echte responsive Webseite. Keine Panik: Auch die Profis tun sich schwer, die beiden Begriffe für anpassungsfähige Webseiten voneinander zu trennen. Darum möchte ich Dir in diesem Artikel die Unterschiede aufzeigen und eine Entscheidungshilfe geben.
Was ist Responsive Webdesign?
Seiten, die zu 100% responsive sind, passen sich dem Viewport, also der Größe des Browser-Fensters an. Dabei ist es unerheblich, ob dieses 400px oder 4.000px breit ist. Das verwendete Gerät zur Betrachtung der Seite steht nicht im Vordergrund, sondern die Größe des Viewports ist entscheidend. Inhalte – wie z.B. Bilder, Texte und Container – integrieren sich einfach flexibel in die jeweilige Bildschirmgröße. Wer wissen möchte, wie diese Anpassungen genau funktionieren, der schaut am besten in den Artikel „3 Säulen des Responsive Webdesign„.
In der Praxis sieht es so aus: wenn drei nebeneinander stehende Bilder oder Text-Blöcke nicht mehr in einer horizontalen Darstellung auf den Bildschirm passen, beispielsweise für ein Tablet im Hochformat („Porträt-Ansicht“), so werden diese Content-Bereiche einfach verschoben. Sie „floaten“ (schweben oder gleiten) in die passende Darstellungsform und werden vertikal angeordnet.
Eine einzige Webseite für alle am Markt befindlichen Geräte zu pflegen ist der Traum eines jeden Webdesigners und Content-Verantwortlichen. Es spart offensichtlich viel Arbeit und Zeit, eine komplett flexible Seite einzusetzen. Jetzt kommt das große ABER, denn der Fehler steckt im Detail. Nur, weil die Seite sich für jedes Gerät automatisch anpasst, ist sie auch performant und lädt schnell. Werden auf der Seite JavaScript oder Frameworks wie Bootstrab verwendet, so lädt das Smartphone diese ebenfalls. Auch wenn die entsprechenden Bereiche mit CSS (display: none) ausgeblendet sind, muss der Besucher mit dem Smartphone trotzdem darauf warten, bis diese Scripte und Frameworks geladen wurden. Je nachdem, wie viele zum Einsatz kommen, kann die Ladezeit für den Besucher sehr unangenehm werden. Ähnlich verhält es sich mit großen Bildern, die einfach auf die entsprechende Größe skaliert werden, ohne dabei deren Größe anzupassen. Sie können ebenfalls hohe Ladezeiten verursachen.
Der Initialaufwand ist bei Responsive Design deutlich höher und erzeugt dadurch höhere Kosten, wobei die Pflege in Nachhinein einfacher ist und dadurch in der Wartung weniger Budget notwendig ist.
Kurzer Ausflug – Responsive with Server Side Components (RESS)
Die responsive Technologie hat sich seit deren Entstehung natürlich weiter entwickelt. Im Gegensatz zum klassischen Responsive Webdesign, bei dem ein einheitliches Design erzeugt wird, werden bei RESS einige Aufgaben vom Server bereits abgenommen und gesteuert. Dadurch werden nicht alle Inhalte geladen, sondern nur die für das Gerät und den Browser notwendigen. Die Seite wird dadurch deutlich performanter. Um diese Architektur aufzubauen, bedarf es eines zusätzlichen Budgets in der Startphase.
Nur 22% der Top Onlineshops in Deutschland setzen auf reines Responsive Webdesign. (Infografik: Mobile Commerce Deutschland)
Ob Deine Seite eine gute Performance liefert, kannst Du mit den Google PageSpeed Tools überprüfen.
Vorteile Responsive Layout
- Jede Displaygröße wird berücksichtigt
- Keine Spiegelung der Seite für mobile Geräte notwendig
- Inhalte auf allen Devices können zentral gepflegt werden
- Zukünftige mobile Endgeräte werden theoretisch abgedeckt
- Geringerer Aufwand in der technischen Umsetzung
Nachteile Responsive Layout
- Komplexe Konzeption und Gestaltung durch freies Raster
- Hoher Zeitaufwand für Planung und Anpassung der Seite
- Kontrollverlust über Darstellung und Design auf neuen Geräten
- Keine gerätespezifisch optimierte Darstellung
- Oft fehlende Optimierung der Performance
Was ist Adaptive Design?
Auch Adaptive Design nutzt einen Ansatz für flexible Darstellungen der Webseite, allerdings werden feste Rasterstufen (Breakpoints) definiert. Je nachdem, mit welchem Gerät (Smartphone, Tablet oder Desktop PC) die Seite aufgerufen wird, liefert der Server, auf dem die Seite liegt, die passenden Inhalte zurück. Das hat den Vorteil, dass nicht benötigte Inhalte auch nicht geladen werden. Gerade deshalb wird meist schnell eine gute Performance erreicht.
Auch die User Experience kann besser gesteuert werden, da das Gerät im Vordergrund steht und für jeden Gerätetyp eine entsprechende Darstellung definiert wird. Hierdurch ist man in der Konzeption gezwungen, eine für den Besucher durchdachte Content-Strategie zu entwickeln und Nutzerzentriert zu denken. Dafür muss man verstehen, welche Bedürfnisse der Kunde hat, wenn er mit einem Smartphone auf die Webseite zugreift.
Durch definierte Konzepte in der Startphase kann das Budget für Adaptive Design besser gesteuert werden. Gerade weil bei dieser Strategie besonders auf die Nutzerbedürfnisse geachtet wird, ist es wahrscheinlich, dass sich schneller ein Return on Investment (ROI) durch bessere Conversion Rates einstellt. Dafür sind bei Adaptive Design die Kosten im Hinblick auf Content-Pflege und die Wartung besonders bei neuen Gerätegrößen höher.
Ein Beispiel:
Die Deutsche Bahn AG hat verstanden, dass Smartphone User häufig unterwegs sind und in ihrem Nutzungskontext primär Informationen zu Zügen und Fahrplänen erhalten möchten. Der Umfang der mobilen Seite wurde also erheblich reduziert, weshalb hier Responsive Wegdesign keinen Sinn ergibt.
Bereits 78% der Top 100 Onlineshops setzen aktiv auf Adaptive Design. (Infografik: Mobile Commerce Deutschland)
Vorteile Adaptive Layout
- Klar definierte Konzepte und Inhalte durch festgelegte Raster-Stufen (Breakpoints)
- Verwendung fester Größen geben Kontrolle über die Inhalte
- Hohe Nutzerzentrierung durch einfache Anpassung der Darstellung auf unterschiedlichen Geräte-Typen
- Serverseitige Anpassung von Inhalten, dadurch bessere Performance
Nachteile Adaptive Layout
- Höherer technischer Aufwand und Pflege
- Es wird nur für bestimmte Viewports / Geräte optimiert
- Eventuelle Fehldarstellung auf unterschiedlichen Endgeräten
Das „Gradient Chart“ nach Bowles als Entscheidungshilfe
Als kleine, aber effiziente Methode für die Entscheidung zwischen Responsive vs. Adaptive Webdesign hat sich Cennydd Bowles dieses „Gradient Chart“ ausgedacht:
So funktioniert die Entscheidung nach dem „Gradient Chart“:
- Überprüfe die Aufgaben, die der Nutzer auf dem Desktop Computer durchführen möchte und liste sie nach Priorität auf.
- Jetzt werden die Aufgaben in einer weiteren Liste nach Wichtigkeit für das Smartphone aufgelistet.
- Vergleiche die beiden Listen miteinander und zeichne Verbindungslinien zwischen identischen Aufgaben ein.
Sind die Linien eher in einer flachen Struktur – wie links in der Grafik zu sehen, erkennt man, dass die Inhalte in der gleichen Reihenfolge dargestellt werden können und somit für Responsive Webdesign geeignet sind.
Verlaufen die Linien allerdings sehr steil und kreuzen sich häufig, ist es wahrscheinlich sinnvoller, die Seite als Adaptive Webseite aufzubauen und die Inhalte den Bedürfnissen der Nutzer anzupassen.
Am Beispiel der Deutschen Bahn kann man schön erkennen, weshalb sie sich für eine dedizierte mobile Seite entschieden haben:
Am Anfang steht die Nutzeranalyse
Beide Technologien sorgen offensichtlich dafür, dass sich die Seite wie von Zauberhand für den Besucher anpasst. Stopp! Eigentlich passen sich nur die Inhalte für das Gerät bzw. den Viewport an. Das ist eine sehr technische Betrachtungsweise, denn ob der Nutzer damit zufrieden ist, weiß man an diesem Punkt noch nicht.
Die häufigste Frage zu Beginn eines Mobile-Projektes lautet meist: „Soll ich Responsive oder Adaptive Design einsetzen“? Aus meiner Sicht ist das die falsche Vorgehensweise, denn derjenige, der die Seite bedienen muss und kaufen soll, wird völlig außer Acht gelassen – der Kunde!
Wer also seinen Nutzer und dessen Bedürfnisse nicht kennt, kann dessen Bedarf nicht befriedigen. Somit wird ein Projekt zur Umsetzung einer mobilen Webseite nur erfolgreich, wenn im Voraus auch genügend Zeit und Budget in den User Research gesteckt wurde. Auch wenn es länger dauert, Markforschung zu betreiben und Nutzerbefragungen durchzuführen, am Ende zahlt es sich aus. Geld in diese Maßnahmen zu investieren schützt davor, auf die falsche Technik zu setzen oder im Nachhinein teure Anpassungen an der Seite vornehmen zu müssen.
Der Blickwinkel muss für ein erfolgreiches Mobile-Projekt geändert und auf den Nutzer zentriert werden.
Kennst Du die Bedürfnisse der Besucher auf der Webseite? Zalando verwendet einen Einstieg über große Teaserflächen. Bei Baur gibt es im sichtbaren Bereich schnelle Einstiegspunkte in die Kategorien. Welcher Typ ist Dein Kunde?
Mobile Best Practices sind eine Lüge – Teste selbst!
Viele machen den Fehler und wollen den Aufwand nicht in Kauf nehmen, die eigene Seite so zu optimieren, dass sie speziell auf die Nutzerbedürfnisse und die Customer Journey angepasst wird. Stattdessen schauen sie einfach beim Wettbewerber, wie dessen mobile Seite aussieht und kopieren die Vorgehensweise schlichtweg. Dabei ist die mobile Welt noch gar nicht so alt. Bislang haben sich noch keine richtigen Best Practices etabliert. Noch immer lernen Betreiber aus ihren Fehlern und passen ihre Layouts, z.B. an die größer werdenden Displays an. Ein paar Herausforderungen:
Wird das Burger-Menü erkannt?
Auf dem Bildschirm eines Smartphones ist meist wenig Platz vorhanden. In vielen Fällen hat sich daher das Burger-Menü bei den Betreibern etabliert. Doch auch hier stellt sich die Frage, ob eine ältere Zielgruppe dieses Icon identifizieren kann? In einem A/B-Test konnten wir heraus finden, dass ein Burger-Menü Icon um 50% häufiger genutzt wird, wenn das Icon zusätzlich klar mit der Beschriftung „Menü“ gekennzeichnet wird!
Ist das Wichtigste mit meinem Daumen erreichbar?
Bleiben wir bei dem Beispiel des Menü-Buttons. Kennst Du die perfekte Position für das Icon? Ich frage mich, warum wichtige Elemente in einen Bereich integriert werden, der schwer mit dem Daumen zu erreichen ist? Vor allem in Zeiten, in denen die Smartphone Displays wieder größer werden.
Apps wie „Wunderlist“ und „Todoist“ machen es bereits vor: Neue Aufgaben fügt man ganz einfach durch das Tippen auf ein Plus-Icon hinzu, welches fingerfreundlich im unteren Bereich des Displays positioniert ist. Hast Du schon mal eine neue Position für Deine Menü-Icons getestet?
Luke Wroblewski hat sich mit dem Thema Responsive Navigation und einer fingerfreundlichen Bedienung bereits im Jahr 2012 beschäftigt. Wie in der nachfolgenden Grafik von ihm zu sehen, ist der Bereich der oberen linken Ecke für Rechtshänder besonders schwer zu erreichen. Trotz solcher bekannter Probleme, die durch Experten aufgezeigt werden, werden Designs leider weiterhin falsch kopiert.
Auch Facebook und Spotify setzten einst auf eine Navigationsstrategie im Header-Bereich. Inzwischen ist die Navigation wieder an den unteren Bildschirmrand gewandert.
Um eine optimale User Experience zu erreichen, bleibt also nichts anderes übrig, als echte Nutzer zu beobachten und Hypothesen in einem A/B-Test zu verifizieren. Nur durch dieses taktische Vorgehen schafft man Kundenzufriedenheit und eine eigene Optimierungs-Strategie jenseits von vermeintlichen Best Practices!
Beantworte diese Fragen vor dem Start mit einem Mobile Projekt:
- In welchem Kontext nutzt der Besucher die Webseite?
- Gibt es geräteabhängige Unterschiede in der Nutzung der Seite?
- Wie wird die Webseite am Desktop genutzt und welche Aufgaben werden erfüllt?
- Welche Anforderungen werden an die Webseite gestellt, wenn die Seite mit dem Smartphone aufgerufen wird?
- Welche Ressourcen stehen für die Weiterentwicklung und Pflege zur Verfügung?
- Wie können die Marketingmaßnahmen für die Geräte richtig ausgesteuert werden?
Mit dem Growth Canvas zur richtigen mobile Strategie
Der Growth Canvas ist ein strategisches Modell, das den Weg zu mehr Wachstum aufzeigt. Er beinhaltet mehrere Stufen, die jeweils aufeinander aufbauen. Im besten Fall beherrscht das Unternehmen alle Disziplinen und verfügt über genügend Ressourcen, um alle Bereiche sauber abbilden zu können. Der Growth Canvas hilft Dir auch bei der Entscheidung für die richtige mobile Strategie. Wie genau, erfährst Du hier!
Strategie – die Basis einer guten mobilen Seite
Die unterste Ebene des Growth Canvas zeigt besonders für mobile Seiten, dass eine gute Grundlage geschaffen werden muss. Eine Mobile-Strategie verläuft nicht nach dem Wunsch: „Uns muss man auch auf dem Smartphone erreichen können!“. Vielmehr bedarf es eines eigenen Teams, das sich explizit mit der Steuerung der Prozesse und der Bestimmung des Zielbildes beschäftigt. Die Strategie muss nicht zwangsläufig immer lauten, dass in einem mobilen Onlineshop auch gekauft wird. Vielmehr muss die Fragestellung in die Richtung gehen:
- Was soll die mobile Seite erreichen?
- Welche KPIs (Key Performance Indikatoren) können wir über die Conversion Rate hinaus definieren?
- Wie messen wir den Erfolg?
Analyse & Insights – Inhalte priorisieren und erlebbar machen
Diese Ebene ist die wohl umfang- als auch erkenntnisreichste. Wer hier seine Analytics Daten richtig interpretiert und auswertet weiß, mit welchen Geräten die Seite aufgerufen wird, welche Bildschirmgrößen häufig genutzt und welche Inhalte besonders gerne auf dem Smartphone aufgerufen werden. Daraus können dann Rückschlüsse auf die Customer Journey gezogen werden.
Nicht alle Produkte werden gerne direkt über das Smartphone gekauft. So kann es sein, dass preiswerte Artikel häufiger auf der mobilen Seite gekauft werden, als hochwertige und teure Produkte. Ist hier vielleicht eine telefonische Beratung die bessere Strategie?
Ob die Seite auch Spaß in der Nutzung macht und zielführend für den Kunden ist, findest Du heraus, indem Du echte Nutzer befragst und bei der Benutzung der Seite beobachtest. In dem Entstehungs-Prozess einer mobilen Seite ist dies ein wichtiger Schritt. Auch Designs oder Prototypen lassen sich mit echten Nutzern testen. Dafür muss aber bekannt sein, wer Deine echten Kunden sind, z.B. durch das Erstellen von Personas.
Wichtige Fragen, welche die Disziplinen dieser Ebene beantworten, sind:
- Welche Geräte werden von unseren Besuchern genutzt?
- Wie sieht die Customer Journey für Kunden aus?
- Welche Optimierungshebel lassen sich identifizieren?
- Warum kaufen Kunden nicht?
Priorisierung – Potenziale erkennen und dokumentieren
Die Optimierung von Webseiten ist wie ein Kreislauf: Analysieren, Umsetzen, Ausprobieren, Messen, … und der Kreislauf beginnt erneut. Die richtigen Hebel und Ideen identifizierst Du, indem die Seite in regelmäßigen Abständen geprüft und Konzepte hinterfragt werden. In einem Backlog werden neue Hypothesen festgehalten und gemeinsam im Team priorisiert. So wird die Seite kontinuierlich verbessert.
Um eine objektive Entscheidung zu treffen, verwenden wir ein Scoring-System, welches den Aufwand und Impact im Fokus hat. Diese Einschätzung hat den Vorteil, dass man sich bei der Auswahl der zu testenden Hypothesen auf diejenigen konzentriert, die sich auch wirklich zu testen lohnen. Eine gute Testidee, die aber sechs Monate für die Umsetzung eines A/B-Tests benötigt, behindert ein agiles Vorgehen für schnelleres Wachstum.
Optimierung – Auch eine mobile Seite kann A/B-Testing
Egal, ob die Entscheidung für Adaptive oder Responsive Design gefallen ist. Um die Best-Practice-Falle zu vermeiden, müssen die Hypothesen und Ideen aus dem Backlog an echten Seitenbesuchern getestet werden. Nur so lässt sich mit Zahlen belegen, welche der Ideen besser für die Zielgruppe funktioniert.
Der Erfolg von Testing kann einfach durch die folgenden drei Fragen validiert und berechnet werden:
- Wie viele Tests werden im Jahr durchgeführt?
- Wie hoch ist der Anteil positiver Tests?
- Wie hoch ist der durchschnittliche Uplift?
In dem unten dargestellten Planbeispiel ist auch der monetäre Erfolg aufgezeigt.
Immer wieder wird behauptet, dass sich A/B-Tests auf mobilen Seiten nicht lohnen, da die Conversion Rate (noch) zu niedrig ist. Gerade deshalb lohnt sich Testing! Es hilft dabei, die Conversion Rate zu steigern. Man muss auch nicht immer auf diese KPI optimieren.
KPI Vorschlag: Erleichtert man den Einstieg in den Shop und führt den Nutzer gezielt, reduziert sich wahrscheinlich die Bounce Rate!
KPI Vorschlag: Durch eine schnelle und effiziente Zielführung kann die durchschnittlich benötigte Anzahl von Klicks der Customer Journey reduziert werden.
Es lohnt sich also durchaus, eine mobile Strategie zu entwickeln und A/B-Tests durchzuführen. Wie der aktuelle E-Commerce Quarterly Report von Monetate zeigt, sind besonders auf mobilen Webseiten die Hebel und Optimierungspotenziale sehr hoch.
Fazit
Die Entscheidung Responsive oder Adaptive Webdesign ist durchaus nicht trivial und an einem Tag getroffen. Die „eine“ richtige Vorgehensweise gibt es leider nicht. Es bedarf zunächst Analysen und Nutzerbefragungen. Zudem spielen die Ressourcen eine wichtige Rolle, welche die mobile Seite nach Erstellung auch pflegen und weiterentwickeln sollen.
Beide Lösungen haben Vorzüge aber auch Nachteile. Wichtig bei beiden ist jedoch, dass der Nutzer die Seite verwenden kann und sie zur Lösung seines Problems beiträgt. Wenn eine mobile Lösung ausgerollt wurde und Du doch bei dem Wettbewerber abgeschaut hast, wie er seine Seite erstellt hat, investiere Zeit in weitere Innovationen durch Marktforschung und A/B-Testing. So entwickelst Du Dein Geschäftsmodell weiter und Deine mobile Seite erfüllt die Bedürfnisse Deiner Nutzer immer besser. Das wirkt sich positiv auf das Wachstum und die Geschäftsziele aus!
Weiterführende Links
- 6 Pfeiler für eine erfolgreiche mobile Strategie
- The gradient chart by Cennydd Bowles
- 9 basic principles of responsive web design
- Monetate E-Commerce Quarterly Report
The post Strategische Entscheidungshilfe – Responsive vs. Adaptive Webdesign appeared first on Conversion Optimierung, Landingpage Optimierung | konversionsKRAFT.
Via – Conversion Optimierung, Landingpage…
Leave a Reply
Your email is safe with us.