Artikelbild HTML 5 Elemente
Webtechniken

Vorher – Nachher: Umstellung auf responsive Webdesign

Wer eine Benachrichtigung in den Webmastertools bezüglich der mobilen Nutzerfreundlichkeit seiner Webseite bekommen hat, sollte sich so langsam an die Arbeit machen. Das haben wir auch getan und bieten einen kleinen Einblick in den Umbau einer Webseite.

Es geht um die Seite zum Kindermusical Winnie Wackelzahn. Diese bietet Informationen zu dem Stück an sich, zur Musik, den Aufführungsbedingungen und zum Aufführungsmaterial. Das Aufführungsmaterial kann auch im angeschlossenen Shop bestellt werden.
So sah die alte Seite aus:

Responsive Redesign
Die alte Seite – gestaltet für Desktops

Die Seite wurde 2011 neu erstellt und wenn man sich die heute so anschaut, sieht die auf den ersten Blick eigentlich gar nicht so schlecht aus – sie funktioniert nur leider nicht auf mobilen Geräten.
Der folgende Screenshot von Google Pagespeed spricht da Bände.

Redesign Pagespeed
Schlechte Werte beim Test

Bei näherem Hinsehen und nach abnehmen der rosaroten Brille, ist die Seite allerdings nicht nur technisch veraltet. Inhaltlich muss hier dringend mal durchgekehrt werden. Ein Blick in Analytics zeigt, dass zwei Seiten (Tipps und Presse) so gut wie überhaupt nicht besucht werden, die werden also rausfliegen.
Auch an den Ladezeiten muss dringend etwas getan werden.

Der angeschlossene Shop

Für den Shop verwendet die alte Seite eine etwas andere Lösung. In der Artikeltabelle kann der Kunde einfach die gewünschte Menge der Artikel eingeben, die er für eine Aufführung benötigt. Der Preis rechnet sich nach Eingabe der Menge unten selbst zusammen und mit einem Klick auf den Warenkorb-Button landen alle mit einer Mengenangabe versehenen Artikel im Warenkorb.
Das hat gut immer gut funktioniert. Doch bei der neuen Seite ist diese Funktion rausgeflogen. Denn auf kleinen Smartphone-Displays ist das nur schwer darzustellen, da der Gesamtpreis immer nur erst durch scrollen zu ersehen ist.

Mobile oder Desktop first?

Das ist zum Einen eine Sache der eigenen Vorliebe. Und zum Anderen der Zielgruppe. Die besteht hier im häufigsten Fall aus Kindergärten, Schulen und Theatergruppen. Wer sich da auf die Suche nach geeignetem Material macht, ist häufig am Desktop bzw. Notebook unterwegs. Denn es gibt PDFs zum Herunterladen, Musik zum Reinhören, Videos usw. Ein Blick in Analytics bestätigt die Annahme: 75% der Nutzer kommen mit dem Desktop, die Absprungrate ist bei Smartphone oder Tablet ca. 13% höher. Logisch…

Also Desktop first war hier die Vorgehensweise. Die Seite wurde von Grund auf neu aufgebaut und von Anfang an möglichst schlank gehalten. Auch wenn die Hintergrundgrafik auf der alten Seite was hat – raus damit. Die bunten Schildchen am rechten Rand? Weg damit. Selbst der dunkelrote Hintergrundkasten ist als Grafik angelegt, von den Navigationstabs gar nicht erst anzufangen…

Das (vorläufige) Ergebnis

So sieht die Seite jetzt aus. Auch wenn der gelbe Hintergrund manchen Leuten vielleicht zu dominant ist, die Lesbarkeit und die Übersicht konnte deutlich erhöht werden.

Responsive Redesign Relaunch
Weniger Schnickschnack, mehr Überblick

Doch das Redesign brachte nicht nur mehr Übersicht – auch die Werte im Pagespeed-Test waren bereits deutlich besser. Durch etwas Nachjustieren konnten in beiden Disziplinen beinahe jeweils 100 Punkte erreicht werden. Nur der Google Tag Manager macht leider einen Strich durch die Rechnung…

Redesign Pagespeed
Herzlichen Glückwunsch – 100 Gummipunkte!

Bislang war die Hauptseite beim Hauptkeyword in der unteren Hälfte der Top-10 unterwegs. Wenn sich durch das Redesign und die Anpassung der mobilen Nutzerfreundlichkeit wirklich das Ranking steigern lässt, wäre ich sehr überrascht.
Zu beobachten ist also ob die Zugriffe von Smartphones und Tablets steigen, die Absprungrate sinkt und sich das Ranking verbessert. Ich bin gespannt…

 

3 Kommentare zu “Vorher – Nachher: Umstellung auf responsive Webdesign

  1. Schöne Darstellung zu diesem Thema. Anfangs also im April als die Umstellung kam hatte ich mir noch keine großen sorgen gemacht das ich das nun unbedingt umsetzen müsse aber nachdem meine Seite immer mehr von der Bildfläche verschwand fing ich nun auch an Sie umzubauen. Ganze 3 Monate habe ich gebraucht und nun ist alles fertig bis auf Kleinigkeiten. Das es besser von Google angenommen wird habe ich bereits nach ein paar Tagen gemerkt. Nun aber meine Frage, wird das bessere Suchergebnis durch das Responsive Design nur auf mobilen Geräten besser dargestellt oder auch auf den normalen Desktop Bildschirmen ? Ich habe es getestet und konnt nichts feststellen !?

    Gruß aus Magdeburg sagt Daniel

  2. Hallo,
    spanndende Geschichte. Und…. wie haben sich die Änderungen auf das Ranking und auf das Nutzerverhalten ausgewirkt?

    Schöne Grüße,
    Gunnar

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Ich akzeptiere die Datenschutzhinweise.