Web Design: Mobile First

Forget mobile first – it’s mobile only!

Noch vor einigen Jahren war die Optimierung für mobile Endgeräte nicht relevant – heute ist sie relevanter als alles andere. Die mobile Internetnutzung nimmt noch immer zu und nicht mobil-optimierter Content ist kaum noch vorstellbar. 2015 waren laut Statista bereits knapp über 50% der Internetnutzer:innen in Deutschland mobil unterwegs. Diese Zahl stieg in den folgenden Jahren stetig an. So verzeichnete man 2020, dass 80% der Internetnutzer:innen ihren Content mobil abrufen. Das liegt vor allem auch daran, dass die Anzahl der mobilen Endgeräte weiterhin unaufhaltsam steigt. Egal, wo man sich heute umschaut, beinahe überall fällt einem ein Smartphone ins Auge. Damit ist das Mobile-First-Design für Websites quasi nicht mehr wegzudenken.

Die Webentwicklung und das damit verbundene Webdesign fokussierten sich jahrelang auf die Ausrichtung einer Website für die stationäre Verwendung auf einem Desktop. Durch die vermehrte Verwendung von Smartphones wurde die mobile Optimierung von Websites immer wichtiger. Das sogenannte responsive Design. Was es mit der Bezeichnung „Mobile First“ auf sich hat und welche Vorteile es mit sich bringt, erklären wir Ihnen in unserem heutigen Blog.

Was bedeutet „Mobile First“?

Basis für diesen neuen Denkansatz im Webdesign ist, wie bereits angesprochen, der stetig steigende mobile Konsum. Bei „Mobile First“ handelt es sich um einen Ansatz, bei dem das Design einer Website zunächst in der mobilen Version optimiert wird. Anschließend wird die Website für größere Bildschirme angepasst. Man arbeitet also quasi von der kleinsten Layout-Version hin zur größten.

Die größten Vorteile des Mobile-First-Designs

Weniger ist mehr

Wenn man nicht so viel Platz zur Verfügung hat, konzentriert man sich auf das Wesentliche. Dadurch wird ein Layout zwangsläufig übersichtlicher und benutzerfreundlicher. Die vermeintliche Schwäche des Mobile-First-Designs ist also eigentlich eine der größten Stärken und bietet dadurch Chancen für Webdesigner:innen. Um die elementaren Bedürfnisse der Nutzer:innen in den Vordergrund zu stellen, macht es Sinn, den Mobile-First-Ansatz zu integrieren.

Not macht erfinderisch

Der Mobile-First-Ansatz fördert den Einsatz moderner Frontend-Entwicklungsmethoden. Dadurch kann beispielsweise das mobile Design an verschiedenen Ankerpunkten an die Größe von Bildschirmen angepasst werden.

Mehr potentielle Reichweite

Einer der größten Vorteile von responsive Design liegt auf der Hand: Man kann viel mehr Menschen erreichen. Die eingangs aufgezeigten Zahlen verdeutlichen, dass die mobile Nutzung weiterhin steigt. Daher ist es extrem wichtig, eine gute mobile Webansicht mit adaptivem Design zu haben. Denn dadurch sind die Informationen für wesentlich mehr Nutzer:innen zugänglich. Darüber hinaus verfügt jede:r Nutzer:in über die selbe Performance und über dieselben Inhalte einer Website.

Ist ein Mobile-First-Design auch im B2B-Bereich relevant?

Auch im B2B ist der Webdesign-Ansatz bereits angekommen. Von daher sollte das responsive Webdesign auch bei B2B-Websites berücksichtigt werden. Denn auch Geschäftsleute surfen am Tag viel auf ihrem Smartphone.

Sie analysieren Ihren Website-Traffic und stellen fest, dass die meisten Besucher die Website auf dem Desktop nutzen? Dann benötigt es ja sicherlich nicht den extra Aufwand die Seite für die mobile Nutzung zu optimieren…

Falsch gedacht. Denn 2018 führte Google für deren Ranking neue Parameter ein, die auch vom adaptiven Design einer Website abhängig sind. Zuvor wurden das Crawlen, Indexieren und Ranken von Seiten typischerweise von den Desktop-Versionen von Websites abhängig gemacht. Und: Google geht noch weiter! Denn seit März diesen Jahres wird das „Mobile First Indexing“ für alle Websites zum Standard.

Das bedeutet, dass „Mobile First“ weder im B2C- noch im B2B-Bereich vernachlässigt werden sollte, wenn ein gutes Google-Ranking angestrebt wird.

Mobile Ladezeit für das Google Indexing optimieren

Seit dem bereits angesprochenen Google Update von 2018 ist die Ladegeschwindigkeit von mobilen Websites ein entscheidender Ranking-Faktor von Google. Drei Tools, um die mobile Performance zu überprüfen, haben wir für Sie festgehalten:

• Geschwindigkeit in der Google Search Console: Dieser Bericht zu Ladezeiten in der Google Search Console basiert auf tatsächlichen Daten von Chrome-Nutzern. Dabei können vor allem die Speed-Trends über einen längeren Zeitraum betrachtet und abgelesen werden.

• Google Page Speed Insights: Dieses Google-Tool bietet einen guten Überblick über die Ladezeit-Performance jeder URL für Desktop und Mobile. Geben Sie dazu ganz einfach Ihre URL ein und schon erhalten Sie eine Prognose. Falls Ihre Website Potentiale aufzeigt, kann das Tool erste Hinweise für Baustellen im Bereich der mobilen Performance-Optimierung geben.

• Google Lighthouse: Lighthouse bietet als Open-Source-Tool für den technischen Audit einer Website bestimmte Analysen für die Performance. Das Tool auf URL-Basis kann über die Entwicklertools im Chrome Browser aufgerufen werden.

Abschließend haben wir Ihnen noch ein paar Dos and Don’ts zum Mobile-First-Ansatz zusammengefasst:

Dos

• Große Schriften verwenden: Auf dem Smartphone können für den Desktop erstellte Inhalte in 12-Punkt-Schrift kaum gelesen werden.
• Denken Sie an die User-Experience: Nur weil Sie etwas tun „könnten“, heißt das nicht, dass Sie es „sollten“. Denken Sie immer an den User!
• Wir haben es schon oft genug erwähnt, aber denken Sie an Mobile FIRST!

Don’ts

• Überladen Sie das Design nicht. Sie werden überrascht sein, auf wie viel Inhalte sie auf Ihrer Website verzichten können.
• Verwenden Sie keine zu kleinen Links. Eine Maus ist feinfühliger als ein Daumen. 😉

Es wird Zeit umzudenken

Um einen erfolgsversprechenden Mobile-First-Ansatz auf die Beine zu stellen, reicht es nicht aus, einfach nur ein minimalistisches, reduziertes Design zu kreieren. Zunächst sollte eine sinnvolle Strategie ausgearbeitet werden. Dabei sollte vor allem auf Faktoren wie die User-Experience und den Kontext geachtet werden. Bevor man sich an die Erstellung eines Designs macht, sollte folgende grundlegende Fragestellung beantwortet werden können: Wie kommt der Nutzer zum Produkt, in welcher Umgebung verhält er sich wie und wo nutzt er welche Zusatzleistung?

„Mobile First“ ist schon lange kein Buzzword mehr, mit dem in der Marketing-Branche um sich geworfen wird. Nein, es ist viel mehr Alltag für jedes Unternehmen geworden. Wenn man heutzutage eine erfolgreiche Web-Präsenz vorweisen möchte, müssen alle Seiten mobil optimiert sein. Die Arbeitsansätze werden sich demnach nachhaltig ändern.

Und nur weil man auf einem größeren Display mehr Platz zur Verfügung hat, heißt das nicht, dass man diesen mit unwichtigen Informationen und Features beladen muss – also: Weniger ist mehr! Optimal ist eine übersichtliche, leicht bedienbare Designlösung. Wir stehen Ihnen gerne mit unserer Expertise zur Seite. Kontaktieren Sie uns einfach!