Responsive Webdesign: warum deine Website am Handy zuerst funktionieren muss

Responsive Webdesign ist eine Bauweise, bei der sich eine einzige Website automatisch an jede Bildschirmgröße anpasst, vom Smartphone bis zum großen Monitor. Für deinen Betrieb ist responsive Webdesign Pflicht, weil Google Websites nach ihrer Handy-Version bewertet und weil viele Kundinnen und Kunden dich zuerst am Handy suchen, anrufen oder nach dem Weg fragen.

Was ist responsive Webdesign?

Responsive Webdesign bedeutet, dass Layout, Bilder und Navigation einer Website auf die Breite des Bildschirms reagieren. Am Desktop stehen drei Spalten nebeneinander, am Handy rutschen die Spalten untereinander. Bilder werden verkleinert, das Menü klappt hinter ein Symbol zusammen. Technisch steckt dahinter ein flexibles Raster und CSS-Regeln, sogenannte Media Queries, die je nach Bildschirmbreite eine andere Darstellung auswählen.

Wichtig für dich als Inhaber: Bei responsive Webdesign gibt es nur eine Website mit einer Adresse und einem Inhalt. Du änderst Öffnungszeiten, Preise oder Speisekarte an einer Stelle, und die Änderung erscheint auf allen Geräten. Das spart bei jeder Aktualisierung Arbeit und verhindert, dass am Handy veraltete Angaben stehen bleiben.

Responsive Webdesign oder eigene mobile Website?

Früher bauten viele Betriebe eine zweite, getrennte mobile Website, oft unter einer Adresse wie m.deinbetrieb.at. Google beschreibt in der Dokumentation zur Mobile-First-Indexierung drei Wege: responsives Design, dynamische Auslieferung und getrennte URLs. Responsives Design nennt Google dort das am einfachsten umzusetzende und zu pflegende Muster.

Bauweise	Wie es funktioniert	Für kleine Betriebe
Responsive Webdesign	Eine Website, eine Adresse, das Layout passt sich an	Empfehlenswert: ein Inhalt, eine Pflege
Dynamische Auslieferung	Eine Adresse, der Server schickt je nach Gerät anderen Code	Technisch aufwendig, selten nötig
Getrennte mobile Website (m.-Domain)	Zwei Fassungen unter zwei Adressen	Doppelte Pflege, viele Fehlerquellen bei Weiterleitungen

Eine getrennte mobile Website verlangt laut Google unter anderem saubere Weiterleitungen, gegenseitige Verweise zwischen beiden Fassungen und denselben Inhalt auf beiden Seiten. Für einen Handwerksbetrieb oder ein Gasthaus lohnt dieser Aufwand nicht. Wer heute noch eine m.-Domain betreibt, sollte beim nächsten Relaunch auf responsive Webdesign umsteigen.

Warum Google die Handy-Version deiner Website bewertet

Google indexiert und bewertet Websites anhand der Version, die der Smartphone-Crawler abruft. Dieses Verfahren heißt Mobile-First-Indexierung und ist in der Google-Search-Central-Dokumentation beschrieben. Für dich heißt die Mobile-First-Indexierung: Was auf der Handy-Version deiner Website fehlt, kann Google im Zweifel nicht berücksichtigen, auch wenn es am Desktop zu sehen ist.

Aus der Google-Dokumentation ergeben sich einige konkrete Regeln für die mobile Version:

• Gleicher Hauptinhalt: Der Inhalt soll am Handy derselbe sein wie am Desktop. Aufklappbare Bereiche oder Reiter sind erlaubt, gestrichene Texte nicht.
• Gleiche Überschriften: Aussagekräftige Überschriften gehören auch in die mobile Fassung.
• Gleiche Bilder mit Alternativtext: Bilder sollen in guter Qualität und mit denselben Alternativtexten vorhanden sein.
• Kein Inhalt hinter Tippen oder Wischen: Inhalte, die erst nach einer Nutzeraktion nachgeladen werden, kann Google nicht sehen.
• Gleiche Metadaten und strukturierte Daten: Seitentitel, Beschreibung und strukturierte Daten sollen auf beiden Fassungen gleichwertig sein.

Bei responsive Webdesign erfüllst du die meisten dieser Regeln automatisch, weil es nur einen Inhalt gibt. Die Falle liegt woanders: Manche Vorlagen blenden am Handy ganze Abschnitte aus, um Platz zu sparen. Prüfe deshalb, ob am Handy wirklich alles da ist, was am Desktop steht.

KI-Bild

Worauf es bei einer mobilen Website ankommt

Eine mobile Website wird anders benutzt als eine Website am Schreibtisch. Am Handy tippst du mit dem Daumen, oft unterwegs, mit einer Hand und bei schwankendem Empfang. Responsive Webdesign sorgt dafür, dass das Layout passt. Ob die mobile Website im Alltag funktioniert, hängt an einer Handvoll Details:

• Lesbare Schrift ohne Zoomen: Fließtext soll am Handy ohne Vergrößern lesbar sein, mit genug Zeilenabstand und Kontrast. Welche Schriften und Farben am kleinen Bildschirm tragen, erklärt der Ratgeber zu Farben und Typografie im Webdesign.
• Große Tippflächen: Schaltflächen und Links brauchen genug Fläche und Abstand, damit der Daumen nicht danebentippt. Die Richtlinie WCAG 2.2 des W3C nennt als Mindestmaß für Tippziele 24 mal 24 CSS-Pixel oder ausreichend Abstand rundherum.
• Antippbare Telefonnummer: Die Telefonnummer muss als Anruf-Link hinterlegt sein, damit ein Tippen den Anruf startet. Eine Nummer als Bild oder als reiner Text zwingt zum Abtippen.
• Kurze Ladezeit: Am Handy ist die Verbindung oft langsamer als im Büro. Große Bilder, Videos im Hintergrund und viele eingebundene Fremddienste bremsen die Seite.
• Passende Bilder: Bilder sollen für kleine Bildschirme verkleinert ausgeliefert werden. Ein Foto in voller Kameragröße ist am Handy reine Wartezeit.
• Keine verdeckenden Pop-ups: Google rät in seinen Hinweisen zu aufdringlichen Interstitials davon ab, die ganze Seite mit Einblendungen zu verdecken. Kleine Banner, die nur einen Teil des Bildschirms belegen, sind die bessere Wahl.
• Formulare mit wenigen Feldern: Jedes Feld ist am Handy mühsamer auszufüllen als am Desktop. Frag nur ab, was du für die Antwort wirklich brauchst.

Viele dieser Punkte überschneiden sich mit Barrierefreiheit. Große Tippflächen, guter Kontrast und lesbare Schrift helfen Menschen mit Sehschwäche oder zittrigen Händen genauso wie allen, die im Sonnenlicht auf einer Alm aufs Display schauen.

Gute Zeichen und Warnzeichen am Handy

Gute Zeichen	Warnzeichen
Text ist ohne Zoomen lesbar	Du musst mit zwei Fingern vergrößern
Seite passt in die Breite, nichts ragt seitlich hinaus	Du kannst die Seite seitlich verschieben
Telefonnummer startet beim Antippen einen Anruf	Telefonnummer muss abgetippt werden
Menü öffnet sich mit einem Tipp und ist vollständig	Menüpunkte fehlen oder liegen übereinander
Seite ist nach kurzer Zeit benutzbar	Weißer Bildschirm, Inhalte springen beim Laden
Cookie-Hinweis belegt nur einen Teil des Bildschirms	Einblendung verdeckt die ganze Seite
Formular lässt sich mit dem Daumen ausfüllen	Felder sind winzig, die Tastatur verdeckt den Absendeknopf

KI-Bild

So testest du deine Website am Handy: Checkliste in 8 Schritten

Für einen ersten Test deiner mobilen Website brauchst du keine Fachkenntnisse und etwa eine halbe Stunde. Am aussagekräftigsten ist der Test, wenn du ihn so durchführst, wie es eine neue Kundin tun würde: mit dem Handy in der Hand, ohne Vorwissen über den Aufbau der Seite.

1. Zwei echte Geräte nehmen: Öffne die Website auf deinem Handy und auf einem zweiten Gerät mit anderem Betriebssystem oder kleinerem Bildschirm, etwa dem Handy eines Familienmitglieds. Ein Tablet als drittes Gerät schadet nicht.
2. Startseite im Hochformat prüfen: Ist ohne Wischen erkennbar, was dein Betrieb anbietet und wie man dich erreicht? Lässt sich die Seite seitlich verschieben, ist etwas zu breit.
3. Telefonnummer antippen: Startet ein Tipp auf die Nummer den Anruf? Prüfe dasselbe mit der E-Mail-Adresse und dem Link zur Wegbeschreibung.
4. Menü durchklicken: Öffne das Menü und ruf jede Unterseite auf. Fehlt am Handy ein Menüpunkt, den es am Desktop gibt, oder ist ein Abschnitt ausgeblendet, notiere die Stelle.
5. Formular absenden: Füll das Kontaktformular mit dem Daumen aus und sende es ab. Kommt die Nachricht an, und bekommt die Absenderin eine Bestätigung auf dem Bildschirm?
6. Unterwegs laden: Schalte das WLAN aus und lade die Website über das Mobilnetz. Wie lange dauert es, bis du lesen und tippen kannst?
7. Gerätemodus im Browser nutzen: Am Computer zeigt der Gerätemodus der Browser-Entwicklertools (in Chrome mit F12, dann das Handy-Symbol) die Seite in vielen Bildschirmgrößen und mit gedrosselter Verbindung. Google selbst bezeichnet den Gerätemodus von Chrome als Annäherung und rät, im Zweifel auf einem echten Gerät zu testen.
8. PageSpeed Insights laufen lassen: Gib die Adresse in PageSpeed Insights ein und wähle die Auswertung für Mobilgeräte. Das Werkzeug zeigt Messwerte zur Ladezeit, sofern genug echte Nutzerdaten vorhanden sind, und Laborwerte aus Lighthouse mit konkreten Verbesserungsvorschlägen.

Den früheren Mobile-Friendly-Test von Google findest du nicht mehr. Google hat den Test, die zugehörige Schnittstelle und den Bericht zur mobilen Nutzerfreundlichkeit in der Search Console mit 1. Dezember 2023 eingestellt und verweist im Blogbeitrag zur Page Experience vom April 2023 auf andere Werkzeuge wie Lighthouse. Laut Google bleibt mobile Nutzerfreundlichkeit trotzdem wichtig.

Typische Probleme beim responsiven Webdesign

Auch eine responsive Website kann am Handy schlecht funktionieren. Die folgenden Probleme sehen wir in Projekten mit kleinen Betrieben immer wieder, meist bei älteren Vorlagen oder Baukastenseiten, die nie auf echten Geräten getestet wurden:

• Ausgeblendete Inhalte: Die Vorlage versteckt am Handy Texte oder Bilder, um Platz zu sparen. Für Besucher und für Google fehlt der Inhalt dann.
• Zu breite Elemente: Tabellen, eingebettete Karten oder lange Wörter in Überschriften sprengen die Bildschirmbreite.
• Überladene Kopfzeile: Logo, Menü, Sprachwahl und Telefonleiste nehmen am Handy den halben Bildschirm ein, bevor der Inhalt beginnt.
• Schwere Startbilder: Ein großes Hintergrundvideo oder eine Bildergalerie ganz oben verzögert den Seitenaufbau am Handy deutlich.
• Fremddienste ohne Not: Jede eingebundene Karte, jedes Social-Media-Fenster und jedes Chat-Werkzeug lädt zusätzlichen Code.

Kommen mehrere dieser Probleme zusammen, ist Flicken oft teurer als neu bauen. Ob deine Seite einen Feinschliff oder einen Neubau braucht, klärt ein Website-Relaunch mit Bestandsaufnahme.

Responsive Webdesign gehört heute zu jeder ordentlich gebauten Website und sollte im Angebot nicht als Aufpreis stehen. Bei Ipsom ist die Anpassung an Handy und Tablet in jedem Website-Paket inklusive. Was eine Website insgesamt kostet und welche Leistungen in einem Angebot stehen sollten, zeigt der Ratgeber Was kostet eine Website in Österreich?.

Responsive Webdesign in Tirol: worauf du bei der Agentur achtest

Wenn du eine neue Website beauftragst, frag konkret nach dem Testen am Handy. Eine gute Agentur kann dir sagen, auf welchen echten Geräten und in welchen Browsern sie die Website vor dem Start prüft. Lass dir außerdem zeigen, wie die Seite am Handy aussieht, bevor du die Gestaltung freigibst, und nicht nur die Desktop-Ansicht.

Hilfreich ist auch die Frage, wie die Agentur mit Bildern umgeht: Werden Fotos automatisch verkleinert und in modernen Formaten ausgeliefert? Weitere Fragen für das Erstgespräch findest du im Ratgeber Den richtigen Webdesigner finden. Wer responsive Webdesign in Tirol sucht, sollte sich zudem ein, zwei Referenzseiten der Agentur selbst am eigenen Handy ansehen.

Fazit

Responsive Webdesign bedeutet eine Website für alle Bildschirme, mit einem Inhalt und einer Pflege. Weil Google Websites nach ihrer Handy-Version bewertet, muss deine Website am Handy zuerst funktionieren: lesbar, schnell, mit großen Tippflächen und einer Telefonnummer, die sich antippen lässt. Mit der Checkliste oben prüfst du deine eigene Website in einer halben Stunde. Wenn du beim Test auf mehrere Warnzeichen stößt und eine neue Website planst, unterstützt dich ein erfahrener Webdesigner in Tirol bei der Umsetzung.