Was ist Mobile First Design? Wie Mobile First Ihr SEO Ranking beeinflusst

Was ist Mobile First Design?

Mobile First Design ist ein Gestaltungsansatz, bei dem Sie eine Website zuerst für den kleinsten Bildschirm planen und sie danach für Tablet und Desktop erweitern. Das heißt: Der Smartphone Nutzer bestimmt Reihenfolge der Inhalte, Navigation, Buttons und Ladezeit, der große Bildschirm kommt als Erweiterung hinzu.

In diesem Beitrag betrachte ich Mobile First Design aus zwei Blickwinkeln. Zunächst geht es um die Gestaltung: Wie ordnen Sie Inhalte, was streichen Sie, wie bauen Sie einzelne Komponenten? Danach geht es um Google: Welche Version Ihrer Website liest die Suchmaschine, und was bedeutet das für Ihre Rankings? Zudem arbeite ich seit 2012 mit Unternehmenswebsites und Onlineshops. Die teuersten Fehler, die ich gesehen habe, stammten von Seiten, die am Desktop perfekt aussahen und auf dem Handy halb fertig wirkten.

Die eigentliche Frage lautet also nicht, ob sich die Seite auf dem Handy öffnet. Entscheidend ist vielmehr, ob die mobile Version alle Inhalte trägt, die Ihr Angebot erklären. Denn Google liest Ihre Website heute im Grunde wie ein Besucher mit Smartphone.

Woher stammt der Mobile First Ansatz?

Den Begriff „Mobile First“ hat der Designer Luke Wroblewski bekannt gemacht. Er stellte die Idee 2009 in einem Blogartikel vor und machte 2011 ein Buch mit demselben Titel daraus. Sein Kernargument war also einfach. Ein kleiner Bildschirm zwingt Sie zu Einschränkungen, und genau diese Einschränkungen zwingen Sie zu klaren Prioritäten.

Etwa zur gleichen Zeit, im Jahr 2010, stellte Ethan Marcotte das Konzept „Responsive Web Design“ vor. Dieser Ansatz passt eine einzige HTML Seite an die Breite des Bildschirms an. Beide Ideen ergänzten sich deshalb gut. Die eine beschrieb die Reihenfolge des Denkens, die andere die technische Umsetzung.

Damals entwarfen die meisten Agenturen zuerst das Desktop Layout. Danach blendeten sie einige Elemente aus und nannten das Ergebnis „mobile Version“. Auch ich bin in frühen Projekten so vorgegangen. Danach war das Ergebnis meist dasselbe: ein gequetschtes Menü, unlesbare Tabellen und schwere Bilder. Mobile First drehte diese Gewohnheit um. Sie bauen zuerst eine Seite, die auf engstem Raum funktioniert, und ergänzen dann Elemente, sobald der Bildschirm wächst.

Diese Umkehr gilt vor allem heute noch. Zudem ist sie längst keine reine Geschmacksfrage mehr, weil sie direkt damit zusammenhängt, wie Suchmaschinen Ihre Website lesen.

Worin unterscheidet sich Mobile First Design von Responsive Design?

Viele Unternehmer verwechseln diese beiden Begriffe. Responsive Design ist eine Technik: Sie passt dasselbe HTML mit CSS Regeln an verschiedene Bildschirme an. Mobile First Design ist dagegen eine Denkreihenfolge. Sie beschreibt, welchen Bildschirm Sie zuerst gestalten und wessen Bedürfnisse Vorrang haben.

Deshalb ist eine responsive Website nicht automatisch mobile first. Ein Desktop Layout auf dem Handy einfach untereinander zu stapeln, ist technisch responsiv. Allerdings folgt die Reihenfolge der Inhalte dann weiter der Desktop Logik. Die folgende Tabelle fasst den Unterschied daher kurz zusammen.

In meinen Projekten schreibe ich CSS am liebsten mit Abfragen nach Mindestbreite. So erhält das Handy die Grundstile, und die zusätzlichen Desktop Regeln greifen nur auf breiten Bildschirmen.

Was bedeutet Mobile First Indexing konkret?

Mobile First Indexing bedeutet, dass Google für Indexierung und Ranking die mobile Version einer Seite heranzieht. Laut den Best Practices für die Mobile First Indexierung nutzt Google die mobile Version der Inhalte, die der Smartphone Crawler erfasst, für Indexierung und Ranking.

Sie sollten hier zwei Dinge trennen. Mobile First Design ist Ihre Gestaltungsentscheidung. Mobile First Indexing ist dagegen das Crawling und Indexierungsverhalten von Google. Konkret: Das Erste liegt in Ihrer Hand, das Zweite nicht. Trotzdem profitieren Sie vom Zweiten fast automatisch, wenn Sie das Erste richtig umsetzen.

Ein weiteres Detail ist wichtig: Google führt keinen eigenen „mobilen Index“. Google hat das 2018 in einer Ankündigung klar gesagt. Es gibt einen einzigen Index, und die Version darin ist inzwischen die mobile. Ein Absatz, der nur auf Ihrer Desktop Seite steht, existiert für Google also praktisch nicht.

Daher reicht der Satz „Am Desktop ist alles vollständig“ nicht mehr als Verteidigung. Was auf dem Handy steht, sieht auch Google.

Wie hat Google die Umstellung auf Mobile First Indexing abgeschlossen?

Die Umstellung kam nicht über Nacht. Stattdessen dauerte sie rund acht Jahre. Nach den offiziellen Beiträgen im Google Search Central Blog verlief sie so:

• 2015: Google veröffentlichte das Update für mobilfreundliche Seiten in der mobilen Suche.
• 2016: Google begann mit Experimenten zum Mobile First Crawling und Indexing.
• März 2018: Google stellte die ersten Websites um, die die Best Practices erfüllten.
• 1. Juli 2019: Für alle neuen, Google bis dahin unbekannten Websites galt Mobile First Indexing standardmäßig.
• März 2020: Google kündigte die Umstellung für das gesamte Web an und verlängerte den Zeitplan später.
• 31. Oktober 2023: Google meldete, dass die Umstellung abgeschlossen ist.

In diesem letzten Beitrag nennt Google eine sehr kleine Gruppe von Websites, die auf Mobilgeräten gar nicht funktionieren. Zum Beispiel zeigen manche allen mobilen Nutzern Fehler. Andere sperren die mobile Version per robots.txt oder leiten jede mobile Seite auf die Startseite um. Außerdem will Google das Crawling mit dem alten Desktop Googlebot so weit wie möglich reduzieren.

Praktisch heißt das: Für fast jede Website im Netz ist die Version, die Google sieht, die mobile Version.

Beeinflusst Mobile First Design das SEO Ranking direkt?

Die ehrliche Antwort lautet: nicht direkt. Einen „Mobile First Design Wert“ gibt es nicht. In seiner Ankündigung von 2018 schrieb Google, dass es bei Mobile First Indexing darum geht, wie Google Inhalte sammelt, nicht darum, wie es sie rankt. Die Indexierung auf diesem Weg bringt also allein keinen Rankingvorteil.

Allerdings ist der indirekte Effekt stark. Google rankt Seiten auf Basis der mobilen Inhalte. Folglich schwächt jede Information, die mobil fehlt, Ihre Chancen. Fehlen Titel, Beschreibung, strukturierte Daten, interne Links oder Fließtext auf dem Handy, bewertet Google genau diese unvollständige Seite.

Dann kommt die Nutzererfahrung ins Spiel. Google schreibt in seiner Dokumentation, dass seine Rankingsysteme Signale wie Core Web Vitals nutzen. Die Felddaten dafür stammen zudem von echten Nutzern. Surfen die meisten Ihrer Besucher mit dem Handy, prägt also das Handy Ihre Werte.

Kurz gesagt: Mobile First Design hebt Rankings nicht per Knopfdruck. Stattdessen macht es die Seite, die Google sieht, vollständig, schnell und nutzbar. Genau dieses Fundament macht im Ranking meist den Unterschied.

Wie schaden fehlende mobile Inhalte Ihren Rankings?

Das Szenario, das ich am häufigsten sehe, geht so. Ein Designer möchte die mobile Seite kurz halten und entfernt deshalb einige Bereiche. Zum Beispiel lädt auf dem Handy die zweite Hälfte einer Leistungsbeschreibung nicht, ebenso wenig die Kundenstimmen oder die FAQ. Am Desktop steht alles, also bemerkt es niemand.

Die Dokumentation von Google ist allerdings eindeutig. Hat Ihre mobile Website weniger Inhalt als die Desktop Version, sollten Sie sie so aktualisieren, dass der Hauptinhalt gleichwertig ist. Sonst kann Ihre Sichtbarkeit für Suchanfragen sinken, die an diesen Inhalt geknüpft sind.

Allerdings betrifft die Lücke nicht nur Fließtext. Auch folgende Elemente verschwinden mobil erstaunlich oft:

• Title und Meta Description, weil manche Themes im mobilen Template andere Werte erzeugen.
• Strukturierte Daten, wobei Google vor allem Breadcrumb, Product und VideoObject auf beiden Versionen empfiehlt.
• Interne Links, denn Links aus der Desktop Seitenleiste fehlen mobil oft komplett.
• Alt Texte von Bildern und Robots Meta Tags.

Deshalb gehört ein direkter Vergleich zu meinen ersten Aufgaben, wenn ich eine Website übernehme. Ich lege den mobilen und den Desktop Quellcode nebeneinander und vergleiche Überschriften, Textlänge und Anzahl der Links. Finde ich eine Lücke, liegt die Ursache meist im mobilen Template des Themes.

Welche mobile Konfiguration sollten Sie wählen?

Google beschreibt drei Konfigurationen für eine mobilfreundliche Website. Ihre Wahl bestimmt dann sowohl die Entwicklungskosten als auch das SEO Risiko.

1. Responsive Design: Liefert jedem Gerät dasselbe HTML unter derselben URL und ändert nur die Darstellung je nach Bildschirmgröße.
2. Dynamische Bereitstellung: Die URL bleibt gleich, doch der Server schickt je nach User Agent anderes HTML. Dafür braucht es den Header „Vary: User Agent“.
3. Separate URLs: Mobile und Desktop Version liegen unter verschiedenen Adressen, meist auf einer m. Subdomain.

Google empfiehlt Responsive Design, weil es sich am einfachsten umsetzen und pflegen lässt. Zudem enthält die Dokumentation einen wichtigen Hinweis. Die meisten Warnungen zur Gleichheit der Inhalte betreffen nur dynamische Bereitstellung und separate URLs. Bei Responsive Design sind Inhalte und Metadaten auf beiden Versionen ohnehin identisch.

Daher empfehle ich bei neuen Projekten im Webdesign fast immer Responsive Design. Dynamische Bereitstellung oder separate URLs begegnen mir meist als Erbe einer alten Plattform. Wie sich diese Entscheidung auf das Budget auswirkt, erkläre ich im Ratgeber Website erstellen lassen: Kosten.

Worauf müssen Websites mit separater m. Domain achten?

Betreiben Sie noch eine separate mobile Domain wie m.beispiel.de, verdoppelt sich Ihr Aufwand. Deshalb nennt Google für diesen Aufbau zusätzliche Best Practices. Ignorieren Sie diese, können Seiten aus dem Index fallen.

• Die Desktop URL ist immer die kanonische Adresse. Die mobile Seite verweist per rel="canonical" auf sie.
• Umgekehrt verweist die Desktop Seite per rel="alternate" auf ihr mobiles Gegenstück.
• Fehlerseiten brauchen auf beiden Versionen denselben Statuscode. Liefert der Desktop Inhalt und das Handy einen Fehler, fehlt die Seite im Index.
• Hreflang Links bleiben innerhalb einer Version: mobile URLs verweisen auf mobile URLs, Desktop URLs auf Desktop URLs.
• Beide Versionen sollten Sie in der Search Console bestätigen.

Gerade auf mehrsprachigen Websites übersieht man die Hreflang Regel leicht. Details dazu finden Sie in meinem Beitrag über das Hreflang Tag.

Mein Rat ist meist einfach: Schaffen Sie beim nächsten Relaunch die separate mobile Website ab und wechseln Sie zu Responsive Design. Allerdings ist das ein Migrationsprojekt, also starten Sie nie ohne Weiterleitungsplan. Meine Schritte dafür beschreibe ich in SEO beim Website Relaunch schützen.

Wie legen Sie im Mobile First Design Prioritäten für Inhalte fest?

Der schwierigste Teil von Mobile First Design ist redaktionell, nicht technisch. Ein Handybildschirm zeigt wenig auf einmal, deshalb müssen Sie entscheiden, was zuerst kommt. Ich treffe diese Entscheidung in folgender Reihenfolge:

1. Zuerst notiere ich das eine Hauptziel der Seite, etwa Angebotsanfrage, Anruf, Kauf oder Information.
2. Danach wähle ich die drei Fakten, die ein Besucher für dieses Ziel braucht.
3. Diese drei Fakten und die Hauptaktion platziere ich innerhalb der ersten zwei Bildschirmhöhen.
4. Den Rest lösche ich nicht, sondern ordne ihn weiter unten unter klaren Überschriften.
5. Schließlich fülle ich freie Fläche am Desktop mit Layout, nicht mit zusätzlichem Inhalt.

Der vierte Schritt ist für SEO entscheidend. Mobile First zu denken heißt nicht, Inhalte zu kürzen. Es heißt, Inhalte zu ordnen. Eine lange Seite auf dem Handy ist kein Problem, eine unübersichtliche schon.

Auf einer Leistungsseite stehen zum Beispiel Preisrahmen, Ablauf und Kontaktbutton oben. Referenzen, ausführliche Erklärungen und FAQ folgen darunter. So finden sowohl eilige als auch gründliche Besucher, was sie suchen. Und Google sieht die vollständige Seite.

Schaden Menüs, Tabs und Akkordeons dem mobilen SEO?

Kurze Antwort: meist nicht, solange der Inhalt im HTML steht. Befindet sich der Text eines Akkordeons oder Tabs beim Laden bereits im Quellcode, kann Google ihn lesen. Diese Komponenten auf dem Handy zu nutzen, um Platz zu sparen, ist daher eine legitime Gestaltungsentscheidung.

Das Problem beginnt, wenn Inhalte erst nach einer Interaktion laden. Die Dokumentation von Google sagt es deutlich: Google lädt keine Inhalte, die eine Nutzerinteraktion wie Wischen, Klicken oder Tippen erfordern. Folglich bleibt ein Text, der erst nach einem Tipp auf „Weiterlesen“ vom Server kommt, für Google vermutlich unsichtbar.

Dieselbe Logik gilt für Lazy Loading. Bilder und untere Bereiche erst beim Näherkommen zu laden, ist gut für die Geschwindigkeit. Koppeln Sie jedoch den Hauptinhalt an einen Klick, überspringt Google ihn womöglich.

Für Menüs habe ich eine ähnliche Regel. Ein Hamburger Menü ist in Ordnung. Achten Sie aber darauf, dass die Menüpunkte im HTML als echte Links mit href stehen. Menüpunkte, die JavaScript erst später ohne href erzeugt, schwächen Ihre interne Verlinkung. Solche Details behandle ich ausführlicher in technisches SEO nach der KI Wende.

Welche Regeln gelten für Tippziele, Schriftgröße und Viewport?

Die erste technische Voraussetzung einer mobilen Seite ist das Viewport Tag. Laut den Grundlagen zu Responsive Web Design auf web.dev stellen mobile Browser die Seite ohne dieses Tag in Desktop Breite dar, meist etwa 980 Pixel. Nutzer müssen dann zoomen. Die Lösung ist eine Zeile: ein Meta Viewport Tag mit width=device‑width und initial‑scale=1.

Das zweite Thema sind Tippziele. web.dev nennt als empfohlene Mindestgröße für Touch Ziele etwa 48 geräteunabhängige Pixel. Zudem empfiehlt die Seite rund 8 Pixel Abstand zwischen den Zielen. Nutzen Sie also ein Icon mit 24 Pixeln, bringen Sie die Tippfläche mit Innenabstand auf 48 Pixel.

Das dritte Thema ist Lesbarkeit. Muss ein Nutzer zoomen, um zu lesen, ist das Design gescheitert. Ich halte Fließtext auf dem Handy in einer angenehmen Größe und lasse großzügigen Zeilenabstand. Außerdem scrolle ich breite Tabellen in einem eigenen Container oder baue sie zu Karten um.

Diese drei Regeln wirken simpel. Dennoch sind genau sie die Probleme, die ich in Audits am häufigsten finde: zu eng gesetzte Links, Tabellen, die über den Rand laufen, und winzige Schrift.

Warum ist Geschwindigkeit mobil noch wichtiger?

Ein Handynutzer hat oft einen schwächeren Prozessor und eine weniger stabile Verbindung. Eine Seite, die am Desktop schnell öffnet, kann auf dem Handy spürbar langsamer sein. Deshalb setze ich Geschwindigkeitsziele für ein Mittelklasse Handy, nicht für einen Desktop Rechner.

Die Schwellenwerte der Core Web Vitals von Google bieten dafür einen guten Rahmen. Als „gut“ gelten 2,5 Sekunden für Largest Contentful Paint, 200 Millisekunden für Interaction to Next Paint und 0,1 für Cumulative Layout Shift. Testmethoden bespreche ich hier nicht. Wichtig ist in diesem Beitrag, wie Designentscheidungen diese Werte bewegen.

• Ein riesiges Hero Bild verlängert LCP direkt, also schicken Sie dem Handy eine kleinere Version.
• Bilder ohne Größenangabe und spät ladende Werbeflächen verschlechtern CLS.
• Schwere JavaScript Slider und Chat Widgets erhöhen die Verzögerung bei Interaktionen.

Beim Bildgewicht holen Sie meist am schnellsten etwas heraus. Schon wenn Sie Dateien vor dem Hochladen mit einem Tool zum Bild verkleinern anpassen, sehen Sie einen deutlichen Unterschied. Die Grundregel lautet also: Schicken Sie dem Handy nur, was es wirklich braucht.

Wie halten Sie Bilder, Videos und strukturierte Daten mobil gleichwertig?

Google möchte, dass Bilder in der mobilen Version dieselbe Qualität und Beschreibung haben wie am Desktop. Die Dokumentation gibt dazu klare Empfehlungen. Vermeiden Sie zu kleine oder niedrig aufgelöste Bilder, nutzen Sie unterstützte Formate und schreiben Sie mobil ebenso aussagekräftige Alt Texte wie am Desktop.

Auch die Bild URLs zählen. Nutzen mobile und Desktop Version unterschiedliche Bildadressen, verlieren Sie während der Umstellung womöglich vorübergehend Traffic aus der Bildersuche. Behalten Sie deshalb nach Möglichkeit dieselben Bild URLs auf beiden Versionen. Vermeiden Sie außerdem Bild und Video URLs, die sich bei jedem Laden ändern, denn solche Ressourcen kann Google nicht sauber verarbeiten.

Für Videos ergänzt Google einen weiteren Hinweis. Platzieren Sie das Video auf der mobilen Seite gut auffindbar. Müssen Nutzer weit scrollen, um es zu erreichen, kann das Ranking des Videos leiden.

Bei strukturierten Daten ist die Regel einfach: Beide Versionen brauchen dasselbe Markup. Responsive Design erledigt das von selbst. Arbeiten Sie dagegen mit getrennten Templates, prüfen Sie den Block mit strukturierten Daten im mobilen Template separat. Einfaches Markup erstellen Sie schnell mit dem Schema Generator und fügen dann denselben Block in beide Templates ein.

Wie wirkt sich Mobile First Design auf die Conversion Rate aus?

SEO bringt den Besucher. Aus dem Besucher einen Kunden zu machen, ist allerdings Aufgabe der mobilen Nutzererfahrung. Mobile First Design bringt SEO und Conversion deshalb an einen Tisch. Eine erfundene Prozentzahl gebe ich Ihnen hier nicht. Stattdessen teile ich die Reibungspunkte, die ich in der Praxis immer wieder sehe.

• Zu viele Formularfelder: Auf dem Handy bedeutet jedes Feld einen weiteren Tipp und eine weitere Tastatur.
• Falscher Tastaturtyp, etwa eine Buchstabentastatur im Feld für die Telefonnummer.
• Popups, die den Bildschirm verdecken, mit winzigem oder unerreichbarem Schließen Button.
• Ein unerreichbarer Kontaktbutton, zum Beispiel ein Anruf oder WhatsApp Button ganz unten auf der Seite.
• Überraschende Kosten im Warenkorb, wenn Versand und Gebühren erst im letzten Schritt auftauchen.

In E-Commerce Projekten gehe ich diese Liste rückwärts vom Checkout aus durch. Denn mobile Nutzer springen am häufigsten in den letzten Schritten ab. Diese Art von Shop Audit führe ich im Rahmen meiner E-Commerce Beratung ausführlich durch.

Auf Unternehmenswebsites bringt meist eine einzige Änderung den größten Gewinn: Die Hauptaktion bleibt auf jedem Bildschirm erreichbar. Sobald ein Handynutzer die gesuchte Information findet, sollte der Kontaktbutton in Reichweite seines Daumens liegen.

Wie stellen Sie eine bestehende Website auf Mobile First um?

Nicht jede Website braucht einen kompletten Neubau. Trotzdem erfordert die Umstellung einer Desktop First Website auf Mobile First einen Plan. So gehe ich vor:

1. Zunächst prüfe ich in der Webanalyse die Geräteverteilung und die Seiten mit dem meisten Traffic.
2. Dann vergleiche ich mobile und Desktop Version dieser Seiten nach Inhalt, Überschriften, Links und strukturierten Daten.
3. Fehlende Inhalte hole ich auf die mobile Version zurück. Statt sie zu verstecken, ordne ich sie neu.
4. Das CSS der Templates stelle ich auf die Logik der Mindestbreite um.
5. Bilder und Skripte von Drittanbietern mache ich für das Handy leichter.
6. Nach dem Livegang beobachte ich die Berichte zu Indexierung und Nutzererfahrung in der Search Console.

Wechseln Sie von separaten mobilen URLs zu Responsive Design, wird aus dieser Liste ein Migrationsprojekt. Dann müssen Sie jede m. Adresse dauerhaft auf ihr Desktop Gegenstück weiterleiten.

Möchten Sie eine solche Umstellung nicht allein steuern, planen wir die Schritte gemeinsam im Rahmen meiner SEO Beratung. Setzt Ihr eigenes Team sie um, überspringen Sie zumindest den Vergleich in Schritt zwei nicht.

Wie prüfen Sie die mobile Nutzbarkeit auf die Schnelle?

Testmethoden beschreibe ich ausführlich in einem eigenen Beitrag, deshalb hier nur ein kurzer Fahrplan. Vorab ein Hinweis: Google hat sein altes Tool „Test auf Optimierung für Mobilgeräte“ Ende 2023 eingestellt. Vertrauen Sie also keinen älteren Anleitungen, die es noch empfehlen.

• Das URL Prüftool in der Search Console zeigt, wie Google die Seite mit dem Smartphone Crawler sieht.
• Der Gerätemodus in den Chrome DevTools prüft das Layout bei verschiedenen Bildschirmbreiten.
• Lighthouse liefert einen mobilen Bericht zu Performance und Barrierefreiheit.

Darüber hinaus empfehle ich eine einfache Gewohnheit. Öffnen Sie Ihre Website einmal pro Woche auf dem eigenen Handy mit mobilen Daten. Füllen Sie das Formular aus, öffnen Sie das Menü und legen Sie ein Produkt in den Warenkorb. In diesen fünf Minuten entdecken Sie viele Probleme, die Tools übersehen.

Denken Sie außerdem an Ihre Darstellung in den Suchergebnissen. Wie Google Title und Meta Description auf dem Handy kürzt, sehen Sie mit der Google SERP Vorschau.

Welche Fehler im Mobile First Design sehe ich am häufigsten?

In meinen Audits tauchen immer wieder dieselben Fehler auf. Die folgende Liste stammt aus meiner Praxiserfahrung. Nicht jede Website hat alle Punkte, doch schon einer davon verdient Priorität.

• Versteckte mobile Inhalte, etwa Desktop Texte, Bewertungen oder FAQ, die auf dem Handy nie laden.
• Abweichende Metadaten, zum Beispiel ein leerer oder generischer Title im mobilen Template.
• Hauptinhalt, der erst per Klick lädt, etwa Servertext hinter „Weiterlesen“.
• Per robots.txt gesperrte Ressourcen, sodass Google CSS oder JavaScript nicht crawlen kann.
• Eine mobile Version, die alles auf die Startseite umleitet.
• Zu eng gesetzte Links und zu kleine Buttons.
• Bilder in Desktop Größe auf dem Handy.
• Kampagnen Popups, die den ganzen Bildschirm verdecken.

Die ersten vier Punkte sind direkte SEO Probleme, weil sie die Seite verändern, die Google sieht. Die letzten vier treffen zuerst die Nutzer. Sinkt jedoch die Nutzererfahrung, sinkt auch die Conversion Rate.

Die meisten dieser Fehler haben eine gemeinsame Ursache. Jemand hat das Design am Desktop abgenommen und nie auf dem Handy getestet. Deshalb lasse ich Designs grundsätzlich auf dem Handybildschirm freigeben.

Für wen ist ein Mobile First Relaunch besonders dringend?

Das Thema betrifft jedes Unternehmen, für manche ist es allerdings dringender. Bei der Priorisierung stelle ich drei Fragen. Kommt der meiste Traffic vom Handy? Laufen Verkäufe oder Anfragen direkt über die Website? Läuft die Website auf einer alten Plattform?

Lokale Dienstleister zum Beispiel erhalten die meisten Suchanfragen über das Handy, oft mit akutem Bedarf. Wer einen Installateur, eine Praxis oder ein Restaurant sucht, vergleicht selten lange am großen Bildschirm. Für solche Betriebe zählt der erste Bildschirm auf dem Handy so viel wie die Leistung selbst.

Onlineshops sind in einer ähnlichen Lage. Funktionieren Produktlisten, Filter und Checkout auf dem Handy nicht reibungslos, wachsen die Verluste, egal wie hoch das Werbebudget ist. Zudem kostet jeder bezahlte Klick Geld, also verwandelt sich mobile Reibung direkt in verlorenes Budget.

Bei B2B Websites sieht das Bild etwas anders aus. Der Entscheidungsprozess läuft oft am Desktop weiter. Dennoch findet der erste Kontakt häufig auf dem Handy statt, also entsteht der erste Eindruck trotzdem mobil. Möchten Sie wissen, wo Ihre eigene Website steht, erreichen Sie mich über die Seite Kontakt.

Fazit: Wo sollten Sie mit Mobile First Design anfangen?

Mobile First entstand 2009 als Designidee. Heute ist es die Art, wie Google Ihre Website liest. Google hat 2023 bekannt gegeben, dass die Umstellung auf Mobile First Indexing abgeschlossen ist. Ihre mobile Seite ist somit für die Suche die eigentliche Version Ihrer Website.

Für den Anfang brauchen Sie keinen großen Relaunch. Wählen Sie zunächst Ihre fünf Seiten mit dem meisten Traffic und vergleichen Sie mobile und Desktop Version nebeneinander. Notieren Sie Unterschiede bei Inhalt, Überschriften, Links und strukturierten Daten. Schließen Sie danach die Lücken und kümmern Sie sich um Ladezeiten auf dem Handy.

Langfristig sollten Sie jede neue Seite zuerst auf dem Handybildschirm gestalten. So hört gleicher Inhalt auf, ein Problem für später zu sein, und wird ein natürlicher Teil des Prozesses. Meine Erfahrung zeigt ein einfaches Muster. Eine Website, die auf dem Handy klar ist, ist auch am Desktop klar, umgekehrt gilt das nicht immer.

Noch ein letzter Hinweis: Betrachten Sie Mobile First Design nicht als einmaliges Projekt. Jede neue Kampagnenseite, jedes Plugin und jedes Popup kann das Gleichgewicht auf dem Handy verschieben. Vereinbaren Sie deshalb mit Ihrem Team eine einfache Regel: Keine Seite geht online, ohne dass jemand sie vorher auf dem Handy geprüft hat. Das klingt nach einer kleinen Gewohnheit. Über die Jahre bewahrt sie Ihre Website allerdings vor einem großen Neubau.