Responsive Design prüfen: Anleitung in sieben Schritten für die eigene Website

Ob eine Website responsive ist, prüfen Sie in zwei Durchgängen: zuerst im Browser, indem Sie die Fensterbreite stufenlos von Handy- bis Desktop-Breite ziehen und auf Brüche achten, danach auf mindestens zwei echten Geräten, einem iPhone und einem Android-Handy. Entscheidend sind dabei nicht nur das Layout, sondern Navigation, Formulare, Tippflächen, Bilder und Ladezeit. Die folgende Anleitung führt in sieben Schritten durch beide Durchgänge und endet mit einer Prüfliste.

Responsive Design ist seit Jahren Standard, trotzdem scheitern viele Websites im Detail: ein Cookie-BannerEin Cookie-Banner ist das Hinweis- und Einwilligungsfenster, mit dem eine Website Besucher über eingesetzte Cookies und Tracking informiert und — je nach…Mehr erfahren →, das auf dem Handy den Absenden-Knopf verdeckt, eine Tabelle, die seitlich aus dem Bild läuft, eine Telefonnummer, die sich nicht antippen lässt. Diese Fehler sieht niemand, der die eigene Website nur am Computer anschaut.

Warum die mobile Ansicht die eigentliche Website ist

Für Google ist die mobile Fassung die massgebliche. Google hat die Umstellung auf die Mobile-First-Indexierung im Oktober 2023 als abgeschlossen gemeldet (Google Search Central Blog, «Mobile-first indexing has landed», 31.10.2023). Das bedeutet: Google crawlt und bewertet Websites grundsätzlich mit einem Smartphone-Crawler. Was auf dem Handy fehlt, fehlt auch für die Suche.

Kurz danach, am 1. Dezember 2023, hat Google den Test auf Optimierung für Mobilgeräte und den zugehörigen Bericht in der Search Console eingestellt. Wer heute nach dem alten Google-Test sucht, findet ihn nicht mehr. Die Prüfung muss also anders erfolgen, und genau dafür ist diese Anleitung gedacht.

Für Besucher ist die Sache ohnehin klar. Wer unterwegs eine Schreinerei, eine Zahnarztpraxis oder einen Umzugsdienst sucht, tut das auf dem Handy. Wenn die Telefonnummer dort nicht antippbar ist oder das Formular sich nicht absenden lässt, ist die Anfrage verloren, egal wie schön die Desktop-Version aussieht.

Schritt 1: Die Breite im Browser stufenlos verändern

Öffnen Sie Ihre Website am Computer in Chrome, Edge, Firefox oder Safari und schalten Sie die Entwicklerwerkzeuge ein. In Chrome und Edge geht das mit F12 oder Rechtsklick und «Untersuchen», danach das Gerätesymbol oben links. In Safari muss das Entwicklermenü zuerst in den Einstellungen aktiviert werden, danach gibt es den «Responsive DesignResponsive Design bedeutet, dass sich eine Website automatisch an die Bildschirmgrösse des Geräts anpasst — Desktop, Tablet oder Smartphone. Seit Googles…Mehr erfahren → Modus».

Wählen Sie nicht einfach ein Gerät aus der Liste. Ziehen Sie stattdessen die Breite langsam von etwa 320 Pixeln bis zur vollen Bildschirmbreite und achten Sie auf:

• seitliches Scrollen: Erscheint unten ein horizontaler Balken, ist etwas zu breit, oft ein Bild, eine Tabelle oder ein eingebettetes Video.
• Brüche: Gibt es Breiten, bei denen Spalten seltsam umbrechen, Texte überlappen oder Knöpfe aus dem Rahmen fallen?
• verschwundene Inhalte: Fehlen auf schmalen Bildschirmen Abschnitte, Kontaktangaben oder Navigationspunkte?

320 CSS-Pixel sind kein Zufall: Die Barrierefreiheitsrichtlinie WCAG 2.1 verlangt im Erfolgskriterium 1.4.10 «Reflow», dass Inhalte bei dieser Breite ohne zweidimensionales Scrollen nutzbar bleiben. Das entspricht etwa einer Desktop-Ansicht mit 400 Prozent Zoom.

Schritt 2: Auf echten Geräten testen

Die Browser-Simulation zeigt das Layout, aber nicht alles. Tastatur, Touch, Autovervollständigung, Safari-Eigenheiten und die echte Ladezeit im Mobilfunknetz sehen Sie nur auf einem echten Gerät. Mindestens zwei Geräte sollten es sein:

• ein aktuelles iPhone mit Safari,
• ein Android-Handy mit Chrome, idealerweise kein Spitzenmodell.

Schalten Sie dabei das WLAN aus und testen Sie im Mobilfunknetz. Halten Sie das Handy auch einmal quer. Bitten Sie zusätzlich eine Person, die die Website nicht kennt, eine konkrete Aufgabe zu erledigen, etwa «Finden Sie heraus, ob der Betrieb samstags geöffnet hat». Wie man solche kleinen Tests strukturiert, beschreibt der Glossarbegriff Usability Testing.

Schritt 3: Navigation und Kontaktwege

Auf dem Handy wird die Navigation meist zum Menü-Knopf. Prüfen Sie:

• Ist das Menü-Symbol als solches erkennbar, und lässt es sich mit dem Daumen gut treffen?
• Öffnet und schliesst sich das Menü zuverlässig, auch nach dem Antippen eines Links?
• Sind Unterpunkte erreichbar, ohne dass man präzise auf kleine Pfeile tippen muss?
• Ist die Telefonnummer ein echter Link, der beim Antippen den Anruf vorbereitet? Gleiches gilt für E-Mail und WhatsApp.
• Bleibt ein fixierter Header so schlank, dass er nicht ein Drittel des Bildschirms belegt?

Zur Grösse der Tippflächen gibt es eine Orientierung aus der WCAGDie Web Content Accessibility Guidelines (WCAG) sind der internationale Standard des W3C für barrierefreie digitale Inhalte. Sie ordnen alle Anforderungen vier…Mehr erfahren → 2.2: Das Kriterium 2.5.8 nennt mindestens 24 × 24 CSS-Pixel oder ausreichend Abstand zu benachbarten Zielen, das strengere Kriterium 2.5.5 nennt 44 × 44 Pixel. Für Knöpfe, die Anfragen auslösen, ist die grosszügigere Variante die bessere Wahl.

Schritt 4: Formulare ausfüllen, wirklich bis zum Ende

Formulare sind die häufigste Fehlerquelle und gleichzeitig der wichtigste Teil der Website. Füllen Sie jedes Formular auf dem Handy aus und senden Sie es ab.

• Öffnet sich bei E-Mail-Feldern die Tastatur mit @-Zeichen, bei Telefonfeldern die Zifferntastatur?
• Funktioniert die Autovervollständigung von Name, Adresse und E-Mail?
• Bleibt das aktive Feld sichtbar, wenn die Tastatur eingeblendet wird?
• Sind Fehlermeldungen verständlich und erscheinen sie beim betroffenen Feld?
• Verdeckt ein Cookie-Banner, ein Chat-Fenster oder ein schwebender Knopf den Absenden-Knopf?
• Kommt die Bestätigung an, und landet die Anfrage dort, wo sie hingehört?

Wer Formulare grundlegend verbessern will, findet in unserem Artikel über UX Writing Hinweise zu Beschriftungen und Fehlermeldungen.

Schritt 5: Bilder, Videos und Tabellen

Medien sind der zweithäufigste Grund für Probleme auf schmalen Bildschirmen.

• Bilder: Skalieren sie mit, ohne verzerrt zu werden? Ist auf dem Handy der wichtige Bildausschnitt sichtbar, oder wird beim Hero-Bild ausgerechnet das Gesicht oder das Produkt abgeschnitten?
• Dateigrösse: Lädt das Handy ein Bild in voller Desktop-Grösse? In den Entwicklerwerkzeugen unter «Netzwerk» sehen Sie, wie gross jede Bilddatei ist. Welche Formate wofür passen, erklärt der Artikel SVG, WebP oder PNG.
• Videos und Karten: Eingebettete Videos und Google Maps sind oft mit fester Breite eingebaut und laufen über den Rand.
• Tabellen: Preistabellen oder technische Daten brauchen auf dem Handy eine Lösung, etwa seitliches Scrollen nur innerhalb der Tabelle oder eine Darstellung als Karten.

Schritt 6: Lesbarkeit und Abstände

Ein Layout kann technisch responsive sein und trotzdem schlecht lesbar.

• Ist die Schriftgrösse für Fliesstext auf dem Handy angenehm, ohne dass man zoomen muss?
• Sind Zeilen nicht zu lang auf grossen Bildschirmen und nicht zu eng auf kleinen?
• Gibt es genügend Kontrast zwischen Text und Hintergrund, auch draussen im Sonnenlicht?
• Funktioniert das Zoomen mit zwei Fingern? Manche Websites sperren es, was für Menschen mit Sehschwäche ein Hindernis ist.

Welche Schriften sich für Websites eignen und wie man sie lädt, ohne Ladezeit zu verlieren, beschreibt Schriftarten für die Website.

Schritt 7: Ladezeit auf dem Handy messen

Responsive heisst auch: schnell genug auf einem durchschnittlichen Handy im Mobilfunknetz. Zwei Werkzeuge reichen für den Anfang:

• Lighthouse in den Chrome-Entwicklerwerkzeugen, im Modus «Mobil». Google nennt es als Nachfolger des eingestellten Mobile-Friendly-Tests. Die Bewertung erklärt der Glossarbegriff Lighthouse-Score.
• PageSpeedGoogle PageSpeed Insights ist ein kostenloses Tool, das die Ladegeschwindigkeit und Core Web Vitals einer Website analysiert und auf einer Skala von 0–100…Mehr erfahren → Insights zeigt zusätzlich, sofern genügend Besuche vorliegen, die Messwerte echter Nutzer, die sogenannten Core Web Vitals.

Ein einzelner Messwert ist eine Momentaufnahme. Messen Sie mehrmals und vergleichen Sie die wichtigsten Seiten, nicht nur die Startseite.

Beispiel: Prüfung der Website einer Physiotherapiepraxis

Konstruiertes Beispiel, kein Kundenfall. Eine Praxis in Winterthur möchte wissen, warum über die Website kaum Terminanfragen kommen. Die Inhaberin hat die Website bisher nur am Computer angesehen, dort wirkt alles in Ordnung.

Der Test nach den sieben Schritten zeigt in rund einer Stunde:

1. Bei 360 Pixel Breite läuft die Tabelle mit den Öffnungszeiten seitlich aus dem Bild.
2. Auf dem iPhone verdeckt das Cookie-Banner den unteren Drittel des Bildschirms, bis es weggeklickt wird.
3. Die Telefonnummer im Header ist reiner Text, kein Link.
4. Im Kontaktformular öffnet das Telefonfeld die normale Tastatur, und nach dem Absenden erscheint keine Bestätigung.
5. Das Teamfoto lädt in voller Kameragrösse und braucht im Mobilfunknetz mehrere Sekunden.

Keiner dieser Punkte ist aufwendig zu beheben. Zusammen erklären sie aber gut, warum Besucher abspringen, bevor sie anfragen. Das Beispiel zeigt auch: Die Prüfung braucht kein Fachwissen, nur zwei Handys, eine Stunde Zeit und die Bereitschaft, die eigene Website wie ein Fremder zu benutzen.

Prüfliste zum Abhaken

Was tun, wenn viele Punkte offen sind?

Einzelne Fehler lassen sich meist gezielt beheben. Wenn aber ein grosser Teil der Liste offen ist, liegt das Problem oft tiefer: Die Website wurde für den Desktop gebaut und nachträglich verkleinert. Dann ist ein Website-Redesign, das von Anfang an für das Handy gedacht wird, wie bei unserem Webdesign, oft günstiger als dauerndes Flicken. Eine unabhängige Einschätzung liefert ein Website-Audit. Und wenn es vor allem um Bedienbarkeit geht, schauen wir uns die Website im Rahmen unserer UX-Leistungen an. Wie ein solcher UX-Audit abläuft, beschreibt UX-Audit: was er prüft und was er bringt.

Fazit

Responsive Design prüfen ist keine Expertensache. Der Browser zeigt in wenigen Minuten, ob das Layout bricht. Zwei echte Handys zeigen, ob Menschen damit zurechtkommen. Und eine ehrliche Stunde mit der Prüfliste zeigt, ob die Website dort funktioniert, wo die meisten Besucher sie tatsächlich nutzen: in der Hand, unterwegs, mit dem Daumen.