„Auf meinem Laptop sieht das super aus." Das höre ich regelmäßig. Und meistens stimmt es. Auf dem Laptop. Aber über 60 % der Besucher kommen mit dem Smartphone. Und auf einem 6-Zoll-Bildschirm gelten andere Regeln als auf einem 15-Zoll-Monitor.
Was Responsive Design bedeutet
Responsive Design heißt, dass sich eine Website an die Bildschirmgröße des Geräts anpasst. Nicht zwei verschiedene Websites. Eine Website, die sich verändert. Spalten werden untereinander statt nebeneinander angezeigt. Navigation wird zum Menü-Icon. Bilder skalieren mit. Schriftgrößen passen sich an.
Das Prinzip gibt es seit über zehn Jahren. Es ist kein Trend und kein Bonus. Es ist Standard. Google bewertet Websites seit 2021 primär nach der mobilen Version, nicht nach der Desktop-Version. Wer am Handy schlecht aussieht, wird schlechter gefunden.
Die typischen Probleme
Manche Fehler fallen am Desktop nicht auf. Auf dem Handy sind sie sofort sichtbar.
- Horizontales Scrollen: Tabellen oder Bilder ragen über den Bildschirmrand hinaus. Der Besucher muss seitlich scrollen, um den Inhalt zu sehen
- Zu kleine Schrift: Was am Monitor gut lesbar ist, wird auf dem Handy zu einer Zumutung. Unter 16 Pixel Schriftgröße ist auf dem Smartphone nichts komfortabel lesbar
- Zu kleine Buttons: Ein Link, der am Desktop leicht zu klicken ist, ist mit dem Daumen kaum zu treffen. Google empfiehlt Mindestgrößen von 48 mal 48 Pixel für klickbare Elemente
- Überladene Navigation: Zehn Menüpunkte passen auf einen Desktop-Bildschirm. Auf dem Handy brauchen sie ein klappbares Menü, das sauber funktioniert
- Bilder, die nicht skalieren: Ein 2000 Pixel breites Bild wird auf dem Handy heruntergerechnet. Aber die volle Datei wird trotzdem geladen. Das kostet Ladezeit und mobiles Datenvolumen
Mobile First ist nicht nur ein Schlagwort
Mobile First bedeutet, dass man die Website zuerst für den kleinen Bildschirm entwirft. Nicht andersherum. Nicht „Desktop fertig, dann schauen wir mal, wie es auf dem Handy aussieht". Zuerst das Handy, dann der Desktop.
Der Grund ist einfach: Was auf einem kleinen Bildschirm funktioniert, funktioniert auch auf einem großen. Umgekehrt ist das selten der Fall. Wer am Desktop zwei Spalten nebeneinander baut, muss sie mobil untereinander setzen. Wer mobil anfängt, hat eine Spalte und kann am Desktop erweitern.
Was Google dazu sagt
Google indexiert seit 2021 ausschließlich die mobile Version einer Website. Das nennt sich Mobile-First Indexing. Wenn deine mobile Seite Inhalte nicht anzeigt, die auf dem Desktop sichtbar sind, existieren diese Inhalte für Google nicht.
Dazu kommen die Core Web Vitals. LCP, INP und CLS werden auf dem Handy gemessen. Ein Layout, das auf dem Desktop stabil steht, kann auf dem Handy springen und verschieben. Das kostet CLS-Punkte und damit Rankings.
So testest du deine Website mobil
Am einfachsten: Die eigene Seite auf dem eigenen Handy öffnen. Klingt offensichtlich, wird überraschend selten gemacht. Danach zwei Tools, die weiterhelfen:
- Chrome DevTools: Im Browser F12 drücken, oben links auf das Smartphone-Icon klicken. Dort kannst du verschiedene Bildschirmgrößen simulieren
- Google PageSpeed Insights: Gibt es unter pagespeed.web.dev. Zeigt Ladezeit, Core Web Vitals und Screenshots der mobilen Version. Kostenlos
Simulation ersetzt nicht das echte Gerät. Scrollverhalten, Touch-Gesten, Ladezeiten bei mobilen Daten sind am echten Handy anders als im Emulator.
Eine Website, die am Desktop perfekt aussieht und am Handy nicht funktioniert, funktioniert nicht. So einfach ist das. Die meisten deiner Besucher sehen nur die mobile Version.
Was eine mobilfreundliche Website braucht
Es ist kein Hexenwerk. Die Grundlagen sind überschaubar.
- Flexible Layouts: Keine festen Pixelbreiten, stattdessen prozentuale Werte oder CSS-Flexbox und Grid
- Responsive Bilder: Kleinere Bildversionen für kleine Bildschirme, per srcset-Attribut. Ladezeit ist auf dem Handy kritisch
- Lesbare Schrift: Minimum 16 Pixel, ausreichend Zeilenabstand
- Klickbare Elemente: Buttons und Links brauchen Abstand zueinander, damit man nicht versehentlich das Falsche tippt
- Viewport Meta-Tag: Ohne die Zeile
<meta name="viewport" content="width=device-width, initial-scale=1">ignoriert der mobile Browser die Bildschirmgröße komplett
Was du weglassen kannst
Auf dem Handy ist weniger fast immer mehr. Große Hintergrundvideos, die auf dem Desktop beeindrucken, fressen auf dem Handy Datenvolumen und Akku. Hover-Effekte, die mit der Maus funktionieren, existieren auf Touchscreens nicht. Und mehrspaltige Layouts, die am Desktop Struktur geben, werden mobil zu einem endlosen Scroll.
Das heißt nicht, dass die mobile Version weniger Inhalt haben soll. Derselbe Inhalt, anders dargestellt. Das ist der Kern von Responsive Design.
Häufig gestellte Fragen
Ist meine Website automatisch mobilfreundlich?
Wenn sie in den letzten fünf Jahren professionell erstellt wurde, wahrscheinlich. Wenn sie älter ist oder mit einem Baukasten erstellt wurde, der kein Responsive Design unterstützt: Eher nicht. Am schnellsten prüfst du es, indem du die Seite auf deinem Handy öffnest.
Brauche ich eine eigene App statt einer mobilen Website?
Nein. Für die allermeisten Selbständigen und kleinen Unternehmen reicht eine mobilfreundliche Website völlig aus. Eine App lohnt sich nur, wenn du wiederkehrende Nutzer hast, die regelmäßig eine komplexe Funktion brauchen. Ein Friseursalon braucht keine App. Eine Bank schon.
Kostet eine mobilfreundliche Website mehr?
Nein. Responsive Design ist heute Standard. Jeder seriöse Webdesigner baut mobil mit. Es ist kein Extra und kein Aufpreis. Wenn dir jemand „Mobile-Optimierung" als Zusatzleistung verkaufen will, ist das ein Warnsignal.
Wie viele Besucher kommen wirklich mobil?
Das variiert je nach Branche. Im Durchschnitt sind es über 60 %. Bei lokalen Dienstleistern oft 70 bis 80 %. Wer seine eigenen Zahlen wissen will, schaut in ein Analysetool wie Plausible oder Matomo. Beide sind DSGVO-konform und cookiefrei.
