Responsive · Prüfpunkt
Auf welchen Bildschirmgrößen sollte eine Website getestet werden?
Eine Website sollte auf drei Bildschirmgrößen getestet werden: Smartphone mit 390, Tablet mit 768 und Desktop mit 1440 Pixeln Breite. Diese drei Profile decken die gängigen Geräteklassen ab. Der Prüfservice bildet dabei echte Geräte nach — mit Touch-Bedienung, mobiler Browser-Kennung und passender Pixeldichte — statt nur ein Browserfenster zu verkleinern.
Drei Profile decken die Geräteklassen ab
Das Smartphone-Profil misst 390 mal 844 Pixel — das Format eines gängigen aktuellen Telefons. Das Tablet-Profil misst 768 mal 1024 Pixel, ein Tablet im Hochformat. Das Desktop-Profil misst 1440 mal 900 Pixel, ein verbreiteter Monitor. An diesen drei Breiten wechseln die meisten Websites ihr Erscheinungsbild: Das Menü klappt zusammen, Spalten werden gestapelt, Bilder skalieren. Genau deshalb genügt ein einzelner Blick am eigenen Bildschirm nicht — eine Seite kann am Desktop tadellos wirken und auf dem Handy seitlich scrollen, Texte abschneiden oder Schaltflächen schrumpfen lassen. Jedes Profil wird darum eigenständig geprüft und im Bericht getrennt ausgewiesen, samt Bildschirmfoto.
Echte Geräte-Nachbildung liefert echte Ergebnisse
Ein bloß verkleinertes Browserfenster verhält sich anders als ein Telefon. Viele Websites schalten ihre mobile Darstellung erst um, wenn der Browser sich als Mobilgerät zu erkennen gibt: mit Touch-Eingabe, mobiler Browser-Kennung und der höheren Pixeldichte eines Handy-Bildschirms. Der Prüfservice richtet deshalb für jedes Profil eine vollständige Geräte-Nachbildung ein — das Smartphone-Profil meldet sich als Telefon mit Touch und dreifacher Pixeldichte, das Tablet-Profil als Tablet. Ohne diese Nachbildung entstünden Scheinbefunde: Die Prüfung sähe eine Zwischenform der Seite, die kein echter Besucher je zu Gesicht bekommt. Mit ihr sieht sie dieselbe Darstellung wie das Publikum.
Die Prüfung sieht die Seite wie ein Besucher
Vor der Messung lässt die Prüfung die Seite vollständig laden und zur Ruhe kommen. Dann rollt sie einmal langsam bis zum Seitenende und wieder nach oben — so wie ein Besucher, der sich umsieht. Das hat einen technischen Grund: Viele Seiten blenden Inhalte erst beim Scrollen ein. Würde die Messung vorher stattfinden, stünden diese Blöcke noch in ihrer Ausgangsposition, und die Prüfung meldete ein Layout, das es im echten Gebrauch gar nicht gibt. Erst nach diesem Durchlauf beginnt die eigentliche Messung: Scrollverhalten, Bedienflächen, Textumbruch, Inhalt im ersten Bildschirm — je Profil, mit Bildschirmfoto als Beleg.
So gehen Sie es an
- Prüfen Sie neue Seiten auf mindestens einem echten Smartphone, zusätzlich zum Blick am Arbeitsplatz-Monitor.
- Vergleichen Sie die drei Bildschirmfotos im Prüfbericht — sie zeigen, wie dieselbe Seite je Geräteklasse aussieht.
- Fragen Sie Ihre Agentur, an welchen Bildschirmbreiten Ihre Website ihr Layout wechselt, und lassen Sie genau diese Übergänge testen.
- Behandeln Sie die mobile Ansicht als Hauptansicht, denn viele Besucher sehen Ihre Website ausschließlich auf dem Handy.
Häufige Fragen
Reicht es, das Browserfenster kleiner zu ziehen?
Ein verkleinertes Fenster zeigt nur einen Teil der Wahrheit. Echte Telefone melden sich mit Touch-Eingabe, mobiler Browser-Kennung und höherer Pixeldichte — viele Websites schalten ihre mobile Darstellung erst dann um. Der Prüfservice bildet deshalb je Profil ein vollständiges Gerät nach und sieht damit dieselbe Darstellung wie ein echter Besucher am Handy.
Warum wird jede Gerätegröße einzeln geprüft?
Weil Websites ihr Layout mit der Bildschirmbreite wechseln: Menüs klappen zusammen, Spalten werden gestapelt, Bilder skalieren. Ein Befund kann auf genau einer Gerätegröße auftreten — eine Tabelle passt am Desktop und ragt auf dem Handy über den Rand. Der Bericht weist deshalb jede Messung je Profil getrennt aus, jeweils mit eigenem Bildschirmfoto.
Mit welcher Bildschirmbreite rechnet der Test für Smartphones?
Das Smartphone-Profil rechnet mit 390 Pixeln Breite und 844 Pixeln Höhe bei dreifacher Pixeldichte — das Format eines gängigen aktuellen Telefons. Der Browser rechnet dabei in sogenannten CSS-Pixeln; die physische Auflösung des Bildschirms ist höher. Ergänzend prüft der Service ein Tablet-Profil mit 768 und ein Desktop-Profil mit 1440 Pixeln Breite.
Weiter im Prüfbereich Responsive
- Wie zuverlässig sind automatische Website-Prüfungen?Verlässlich wird eine automatische Prüfung durch Wiederholung: Jeder Befund wird zweimal erhoben, gemeldet wird nur, was beide Messungen sehen.
- Warum darf eine Website auf dem Handy nicht seitlich scrollen?Seitliches Scrollen zeigt: Inhalt ragt über den Bildschirm hinaus. Die Prüfung misst den Überstand in Pixeln und nennt das verursachende Element.
- Wie groß müssen Schaltflächen auf einer Website mindestens sein?Mindestens 24 mal 24 Pixel, so verlangt es die Regel WCAG 2.5.8. Die Prüfung misst Schaltflächen und Links auf vier Gerätegrößen und nennt zu kleine.
- Warum wird Text auf einer Website abgeschnitten?Text wird abgeschnitten, wenn sein Kasten schmaler ist als der Inhalt. Die Prüfung findet solche Stellen auf vier Gerätegrößen und zeigt Beispiele.
Dieser Prüfpunkt gehört zum Prüfbereich Responsive — dort stehen alle Prüfpunkte im Überblick. Was die Prüfung insgesamt leistet, zeigt die Leistungsseite; wie ein Ergebnis zustande kommt, erklärt das Prüfverfahren. Alle Prüfbereiche im Überblick: Wissensbasis.