Was ist eine mobilfreundliche Website, und wie testet man sie?

01Was ist eine mobilfreundliche Website?

Wenn Sie eine Seite auf dem Handy öffnen und für jeden Absatz mit zwei Fingern zoomen, seitlich wischen oder winzige Links treffen müssen, ist sie nicht mobilfreundlich. Eine mobilfreundliche Website beseitigt diese Probleme: Die Schrift ist gut lesbar, das Menü öffnet sich mit einem Tipp, und die Buttons haben Fingergröße.

Mobiloptimierung bedeutet nicht, die Desktop-Seite einfach zu verkleinern. Die Priorität der Inhalte, die Struktur des Menüs und die Länge der Formulare werden für die Bedingungen eines kleinen Displays neu gedacht. Wer mit dem Smartphone surft, ist meist unterwegs, hat eine schwankende Verbindung und möchte schnell finden, was er sucht.

Auch Suchmaschinen berücksichtigen das. Google nutzt für Indexierung und Ranking vorrangig die mobile Version einer Website. Eine Seite, die auf dem Handy unvollständig oder fehlerhaft erscheint, kann daher ihre Suchleistung verschlechtern, so gut sie am Desktop auch aussieht.

02Was ist Responsive Design?

Responsive Design bedeutet, dass eine einzige HTML-Struktur bei unterschiedlichen Bildschirmbreiten unterschiedlich angeordnet wird. Statt einer separaten mobilen Seite (etwa m.domain.de) gelten dieselbe Adresse und derselbe Inhalt; nur das Layout ändert sich.

Dieser Ansatz ruht auf drei Säulen: dem flexiblen Raster (Spalten in Prozent oder Bruchteilen), flexiblen Bildern (die nicht über ihren Container hinausragen) und Media Queries (CSS-Regeln, die ab bestimmten Bildschirmbreiten greifen).

<meta name="viewport" content="width=device-width, initial-scale=1">

.kartlar {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

img {
  max-width: 100%;
  height: auto;
}

@media (min-width: 768px) {
  .kartlar { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1200px) {
  .kartlar { grid-template-columns: repeat(3, 1fr); }
}

03Der Mobile-First-Ansatz

Mobile First heißt, das Design beim kleinsten Bildschirm zu beginnen und es nach oben auf größere Bildschirme auszuweiten. Das CSS-Beispiel oben folgt dieser Logik: Das Standardlayout hat eine Spalte, und mit wachsender Breite kommen weitere Spalten hinzu.

Der Nutzen ist nicht nur technischer Natur. Weil auf kleinen Displays wenig Platz ist, muss das Team entscheiden, welche Information wirklich zählt. Das Ergebnis sind schlichtere, fokussiertere und schnellere Seiten, von deren Klarheit auch die Desktop-Version profitiert.

Die Details des Mobile-First-Denkens auf Oberflächenebene beschreiben wir im Beitrag Unterschied zwischen UI und UX, die Umsetzung bei Unternehmensseiten auf unserer Leistungsseite zum responsiven Webdesign.

04Mobilfreundlichkeitstest: So gehen Sie vor

Um die Mobilfreundlichkeit einer Website zu prüfen, brauchen Sie keine teuren Werkzeuge. Kombinieren Sie die folgenden Methoden, erkennen Sie den Großteil der Probleme.

Der Gerätemodus im Browser

Öffnen Sie die Seite in Chrome, Edge oder Firefox und starten Sie die Entwicklertools (unter Windows F12, unter macOS Cmd+Option+I). Mit der Geräte-Symbolleiste sehen Sie die Seite in verschiedenen Smartphone-Größen. Wenn Sie das Fenster schmaler und breiter ziehen, erkennen Sie, wo das Layout bricht.

Lighthouse und PageSpeed Insights

Der Reiter Lighthouse in den Chrome-Entwicklertools und PageSpeed Insights analysieren Ihre Seite unter mobilen Bedingungen. Die Berichte zu Performance, Barrierefreiheit und Best Practices listen zu kleine Tippflächen, unleserliche Schrift und fehlende Viewport-Angaben einzeln auf.

Berichte der Search Console

Die Google Search Console zeigt den Core-Web-Vitals-Bericht auf Basis echter Nutzerdaten getrennt für Mobilgeräte und Desktop. Da Googles früheres eigenständiges Tool für den Mobilfreundlichkeitstest eingestellt wurde, nutzt man heute diesen Bericht zusammen mit Lighthouse.

Test auf echten Geräten

Eine Simulation zeigt nicht alles. Öffnen Sie die Website auf mindestens einem Android-Gerät und einem iPhone, in verschiedenen Browsern. Füllen Sie das Formular aus, öffnen und schließen Sie das Menü und tippen Sie auf die Telefonnummer, um zu prüfen, ob der Anruf startet. Ein Test auf echten Geräten deckt Probleme wie eine Tastatur auf, die das Formular verdeckt, erst auf diese Weise auf.

05Website sieht auf dem Handy kaputt aus: Häufige Ursachen

Bei Websites, deren Layout mobil durcheinandergerät, tauchen meist dieselben Ursachen auf. Die folgende Tabelle führt Sie vom Symptom zur Lösung.

06Warum mobile Ladezeit ein eigenes Thema ist

Mobile Nutzer haben häufiger eine langsamere oder schwankende Verbindung als am Desktop, und der Prozessor des Geräts ist schwächer. Eine Seite, die am Desktop schnell lädt, kann mobil wegen schwerer Bilder und großer JavaScript-Dateien sekundenlang warten lassen.

Googles Core Web Vitals messen genau diese Erfahrung: Als »gut« gelten 2,5 Sekunden für die Ladezeit des größten Inhalts (LCP), 200 Millisekunden für die Reaktion auf Interaktionen (INP) und 0,1 für die visuelle Verschiebung (CLS). Bilder in modernen Formaten, nur der wirklich benötigte Code und ein korrekt eingestelltes Caching verbessern diese Werte.

Diese technischen Arbeiten behandeln wir unter Speed- und Performance-Optimierung. Weil die mobile Geschwindigkeit auch die Sichtbarkeit in der Suche beeinflusst, sollte sie gemeinsam mit SEO-optimiertem Webdesign geplant werden.

07Checkliste für die Mobiloptimierung

Haken Sie diese Punkte vor dem Livegang oder bei einer Überprüfung Ihrer Website einzeln ab:

• Das Viewport-Meta-Tag ist auf jeder Seite vorhanden.
• Bei keiner Breite erscheint horizontales Scrollen.
• Der Fließtext ist ohne Zoomen lesbar, der Zeilenabstand großzügig.
• Buttons und Links sind groß genug für bequemes Tippen mit dem Finger.
• Telefonnummern funktionieren per Tipp als Anruf, Adressen als Link zur Karte.
• Formulare sind kurz; es öffnet sich die passende Tastatur (E-Mail, Telefon, Zahl).
• Pop-ups verdecken keine Inhalte und lassen sich leicht schließen.
• Der Farbkontrast reicht auch bei Sonnenlicht zum Lesen; das von den WCAG für normalen Text empfohlene Verhältnis von 4,5:1 ist ein guter Maßstab.
• Der mobile Lighthouse-Bericht enthält keine kritischen Warnungen.

08Mobiloptimierung ist nie »fertig«

Jedes Jahr kommen neue Geräte, andere Bildschirmformate und Browser-Updates hinzu. Jeder neue Bereich, jedes Kampagnenband und jedes Chat-Widget kann das mobile Layout stören. Deshalb ist es eine gute Gewohnheit, mobile Tests nach jedem größeren Update zu wiederholen.

Worauf es bei der Barrierefreiheit ankommt, lesen Sie in unserem Ratgeber zur Barrierefreiheit im Web; wie Sie das mobile Erlebnis einer Unternehmensseite aufbauen, steht im Beitrag Was ist eine Unternehmenswebsite?. Wenn Sie eine Einschätzung der mobilen Darstellung Ihrer Website wünschen, schreiben Sie uns.