Responsive Webdesign vs. Mobile First-Webdesign – wo liegt der Unterschied?

Die Darstellung auf mobilen Endgeräten: Responsive-Ansatz vs. Mobil First-Ansatz.

Eigentlich muss man nicht wieder und wieder erwähnen, dass immer mehr Menschen das Smartphone nutzen, um im Internet nach Produkten, Dienstleistungen oder Problemlösungen zu suchen. Im Jahr 2015 meldete Google, dass erstmalig mehr Suchanfragen über Mobilgeräte als über Desktopgeräte erfolgten. Eine optimierte Darstellung des responsive Webdesign oder Mobile First-Webdesign ist hier Voraussetzung, dass der Besucher überhaupt auf Ihr Angebot gelangt (denn Google berücksichtigt die mobile Darstellung und weitere UX/UI-Faktoren als Rankingfaktor) und auch dort bleibt. Dass Ihr Webdesign also durchgehend auf sämtlichen Auflösungen sauber lädt, ist die Voraussetzung für Ihren Erfolg und Ihre Performance, d. h., wie hoch Sie in den Suchergebnissen erscheinen.

Wir haben heute kein Projekt mehr, welches nicht unter dem Aspekt der Nutzung auf mobilen Endgeräten konzipiert wird. Hier besonders viel Aufwand in responsive Webdesign oder Mobile First-Webdesign zu investieren zahlt sich aus.

Oliver Wehle, Teamleiter unserer Webdesign-Agentur

Worin unterscheiden sich jetzt responsives Webdesign zu Mobile First-Webdesign?

Einigkeit besteht darin, dass es wichtig ist, eine Webseite optimiert für mobile Endgeräte (Tablets und Smartphones) zu betreiben. Es ist aber bei Weitem nicht damit getan, einfach ein dementsprechendes Template einzurichten und fertig. Denn hier fängt die die Arbeit eigentlich erst an. Denn wie wird ein Webdesign optimaler Weise an ein Endgeräte anpasst? Wie kann hier so vorgegangen werden, dass wohl der Nutzer eine optimale User Experience hat als auch Google dies so bewertet?  In der Praxis sind die beiden Vorgehensmethoden responsive Webdesign und Mobile First-Webdesign zu finden. Eine Gegenüberstellung:

Der responsive Webdesign-Ansatz im Überblick

Der Mobile First-Ansatz im Überblick

Fehler bei der Mobile-Optimierung

Lädt Ihre Webseite Ihre Besucher durch für Ihren Online-Shop optimiertes Design ein? Weckt das Design Vertrauen? Ist Ihr responsive Webdesign oder Mobile First-Webdesign erfolgreich? Kauft Ihr Kunde in Ihrem Online-Shop? Oder stellen potentielle Interessenten Anfragen an Sie? Folgende Features bei Internetseiten und Online-Shops können Ihre Conversion-Rate steigern oder ausbremsen. Und sie zeigen, dass eine mobile Optimierung (weder durch den responsive-Ansatz noch den Mobile First-Ansatz) nicht stattgefunden hat:

1. Die Schrift erscheint nicht lesefreundlich, d. h. sie ist entweder zu groß oder zu klein,
2. die Überschriften erschlagen den Besucher oder auch
3. der Zeilenabstand ist viel zu groß.
4. Die Bilder erscheinen auch zu groß oder zu klein, was sich zusätzlich auch für die Ladeperformance negativ auswirken kann.
5. Weiterhin könnte es sein, dass das Smartphone die eine oder andere Formatierung falsch darstellt.
6. Auch ein Kick-off-Kriterium ist eine zu schwer zu durchschauende Navigation.

Diese Liste ließe sich noch beliebig erweitern. Die Bewertung des Responsive Webdesign oder Mobile First-Webdesign muss daher anhand des Ergebnisses bewertet werden. Insgesamt kann man Internetseiten in „mobile friendly“ und „mobile unfriendly“ unterscheiden:

Eine Seite ist mobile friendly, wenn:

• Inhalte schnell erfasst werden können
• Inhalte auf Anhieb lesbar sind
• Die Website sehr kurze Ladezeiten hat
• Links (auch Buttons und Navigation) leicht erkennbar und klickbar sind

Eine Seite ist mobile unfriendly, wenn:

• Die Schrift klein oder unleserlich ist
• Die Ladezeit zu lange beträgt
• Teile nur am Desktoprechner optimal angezeigt werden können
• Inhalte zu eng stehen / nicht unterscheidbar sind
• Der Inhalt zu breit für das Display ist (horizontale Scrollbalken)

Auch, wenn Ihre Webseite responsive ist, sind das durchaus Aspekte, die eine Optimierung benötigen und die Sie nicht vernachlässigen sollten. Trotzdem ist es natürlich so, dass Sie Ihr Ranking in den Suchmaschinen verbessern, alleine dadurch, dass Ihre Seite für mobile Endgeräte optimiert ist. Im Übrigen stellt die Optimierung auf mobile Endgeräte ähnliche Anforderungen wie die Optimierung für barrierefreies Webdesign.

Die optimierte Darstellung über alle Endgeräte hinweg UND positive Nutzersignale sind ein elementarer Bestandteil unseres Vorgehens bei der Suchmaschinenoptimierung und im Online-Marketing. Egal, ob responsive-Ansatz oder Mobile First-Ansatz.

Marian Dietrich, Teamleiter SEO & Online-Marketing in Stuttgart, Heilbronn und Heidelberg

Wie prüft man die Performance der mobilen Darstellung neutral?

Am Ende zählt das Ergebnis. Responsive Webdesign vs. Mobile First-Webdesign: Das ist eine Frage des Ergebnisses. Neben der Prüfung des mobilen Darstellung in den entsprechenden Browsern und Endgeräten mit der entsprechenden Bildschirmauflösung gibt es auch die Möglichkeit, Google die Bewertung vornehmen zu lassen. Hierfür gibt es zwei Ansätze:

1. Google Chrome Browser
   Der Google Chrome Browser besitzt eine integrierte Funktion zum Überprüfen Ihrer Performance auf den verschiedenen Endgeräten. Wenn Sie mit der rechten Maustaste auf den Button zum Überprüfen (engl. inspect) gehen, öffnet das eine Konsole mit den verschiedenen mobilen Endgeräten. Hier können Sie nun das gewünschte Endgerät auswählen und sich das jeweilige Ergebnis anzeigen lassen.
2. PageSpeed Insights
   Noch einfacher lässt sich die Auswertung über die Internetseite https://developers.google.com/speed/pagespeed/insights/ überprüfen. Dort werden die Ergebnisse auch entsprechend der Ampelfarben (Rot / Orange / Grün) visualisiert und erläutert.

Gerne optimieren wir Ihre mobile Darstellung – ob Responsive Webdesign oder Mobile First-Webdesign. Nehmen Sie hierzu mit unseren Experten Kontakt auf.