Website mobilfreundlich machen: 12 bewährte Schritte

Eine mobilfreundliche Website lässt sich auf dem Smartphone mühelos lesen und bedienen: Der Text ist ohne Zoomen lesbar, Schaltflächen lassen sich leicht antippen, nichts ragt seitlich über den Bildschirm hinaus, und die Seiten laden auch über eine Mobilfunkverbindung schnell. Das ist wichtiger denn je – der meiste Web-Traffic kommt von Smartphones, und Google setzt auf Mobile-First-Indexierung, bewertet Ihre Website für das Ranking also anhand ihrer mobilen Version.

Die gute Nachricht: Wie man eine Website mobilfreundlich macht, ist längst geklärt. Es folgen 12 Schritte, die nahezu jedes Problem abdecken – und danach, wie Sie Ihre Website kostenlos in echten Gerätegrößen testen.

1. Das Viewport-Meta-Tag einfügen

Ohne dieses Tag rendern Smartphones Ihre Seite in Desktop-Breite und verkleinern sie anschließend – alles wird winzig. Fügen Sie Folgendes in den <head> jeder Seite ein: <meta name="viewport" content="width=device-width, initial-scale=1">. Deaktivieren Sie das Zoomen nicht mit user-scalable=no – das ist ein Verstoß gegen die Barrierefreiheit.

2. Ein responsives Mobile-First-Layout verwenden

Gestalten Sie zuerst für den kleinsten Bildschirm und ergänzen Sie dann mit CSS-Media-Queries (@media (min-width: 768px)) weitere Komplexität für größere Bildschirme. Nutzen Sie CSS Flexbox und Grid statt Spalten mit fester Breite, und ordnen Sie mehrspaltige Layouts auf Smartphones in einer einzigen Spalte untereinander an.

3. Flexible Breiten statt fester Pixelwerte

Ersetzen Sie width: 960px durch max-width: 960px; width: 100%. Verwenden Sie für Container relative Einheiten (%, rem, vw) und vermeiden Sie Elemente, die breiter sind als der Bildschirm – sie verursachen horizontales Scrollen, den häufigsten Layoutfehler auf Mobilgeräten.

4. Bilder und Medien responsiv machen

Ergänzen Sie Ihr CSS um img, video { max-width: 100%; height: auto; }. Liefern Sie mit srcset und sizes kleinere Bilder an Smartphones aus, nutzen Sie moderne Formate (WebP, AVIF) und setzen Sie immer die Attribute width und height, damit das Layout beim Laden der Bilder nicht springt.

5. Gut lesbare Schriftgrößen verwenden

Fließtext sollte auf Mobilgeräten mindestens 16 px groß sein, bei einer Zeilenhöhe von etwa 1,5. Halten Sie die Zeilenlänge angenehm und achten Sie darauf, dass der Text die Kontrastverhältnisse der WCAG erfüllt – kleiner, kontrastarmer Text ist im Freien auf dem Smartphone schwer zu lesen.

6. Schaltflächen und Links leicht antippbar machen

Tippflächen sollten mindestens 48 × 48 px groß sein und etwa 8 px Abstand zueinander haben. Winzige, dicht gedrängte Links im Footer oder im Menü gehören zu den häufigsten Schwächen bei der mobilen Nutzbarkeit.

7. Die Navigation vereinfachen

Klappen Sie lange Menüs hinter einer klar beschrifteten Menü-Schaltfläche ein, halten Sie die wichtigsten Aktionen (Suche, Warenkorb, Kontakt) sichtbar und verzichten Sie auf Interaktionen, die nur per Hover funktionieren – auf einem Touchscreen gibt es keinen Hover.

8. Aufdringliche Pop-ups vermeiden

Bildschirmfüllende Interstitials, die auf Mobilgeräten den Inhalt verdecken, frustrieren Nutzer und können dem Ranking schaden. Setzen Sie stattdessen auf kleine Banner und machen Sie die Schließen-Schaltflächen groß und gut zu treffen.

9. Formulare für Mobilgeräte optimieren

Verwenden Sie die passenden Eingabetypen (type="email", type="tel", inputmode="numeric"), damit Smartphones die richtige Tastatur einblenden, ermöglichen Sie das automatische Ausfüllen mit autocomplete, halten Sie Formulare kurz und platzieren Sie Beschriftungen über den Feldern statt daneben.

10. Die mobile Performance verbessern

Smartphones haben langsamere Prozessoren und Netze. Komprimieren Sie Bilder und laden Sie sie per Lazy Loading, minifizieren Sie JavaScript und laden Sie es verzögert, entfernen Sie ungenutztes CSS, nutzen Sie ein CDN und aktivieren Sie Caching. Streben Sie Core Web Vitals im Bereich „gut“ an: LCP unter 2,5 s, CLS unter 0,1 und INP unter 200 ms – die Daten Ihrer echten Nutzer finden Sie in der Google Search Console oder in PageSpeed Insights. Ein kostenloses Website-Audit meldet häufige Ursachen wie langsame Serverantworten, renderblockierende Ressourcen und Bilder ohne Größenangaben; wie Sie sie beheben, lesen Sie unter Warum ist meine Website langsam?

11. Mobil und auf dem Desktop dieselben Inhalte anbieten

Bei der Mobile-First-Indexierung werden Inhalte, die mobil ausgeblendet oder entfernt sind, womöglich gar nicht indexiert. Behalten Sie in beiden Versionen dieselben Überschriften, Texte, strukturierten Daten, Bilder (mit Alternativtext) und Meta-Tags bei.

12. In echten Gerätegrößen testen – regelmäßig

Das Fenster Ihres Desktop-Browsers kleiner zu ziehen, reicht nicht. Testen Sie in echten Smartphone- und Tablet-Viewports, im Hoch- und im Querformat, und wiederholen Sie den Test nach jeder größeren Änderung. Genau hier gehen die meisten „mobilfreundlichen“ Websites unbemerkt kaputt.

So testen Sie, ob Ihre Website mobilfreundlich ist

Rudras Audit für responsive Layouts rendert Ihre Seiten auf bis zu acht Geräteprofilen – iPhone SE, iPhone 14, Pixel 7, iPad, iPad Pro und drei Desktop-Größen – und meldet Inhalte, die überlaufen oder sich überlappen, mit Screenshots für jedes Gerät. Kombinieren Sie es mit einem Scan der gesamten Website, um auch Performance- und SEO-Probleme auf Mobilgeräten aufzudecken:

1. Starten Sie ein kostenloses Website-Audit für Ihre Startseite, um die gesamte Website zu crawlen.
2. Öffnen Sie den Bericht und sehen Sie sich die Befunde zu SEO, Performance und Barrierefreiheit an.
3. Starten Sie das Audit für responsive Layouts, um Ihre Seiten auf jedem Gerät zu sehen, oder nutzen Sie den kostenlosen Mobile-Checker für die schnelle Prüfung einer einzelnen Seite.
4. Beheben Sie die gemeldeten Probleme, scannen Sie erneut und vergleichen Sie die Ergebnisse.