Prüfpunkt viewportStruktur und Grundangaben
Warum ist meine Website am Smartphone so klein dargestellt?
Eine winzig dargestellte Website am Smartphone hat meist eine einzige Ursache: Im Quelltext fehlt die Viewport-Angabe. Diese eine Zeile teilt dem Gerät mit, dass die Seite auf die Bildschirmbreite des Smartphones eingerichtet werden soll. Fehlt sie, zeigt das Gerät die breite Desktop-Ansicht verkleinert an — lesbar nur, wenn der Besucher ständig zoomt und seitlich schiebt.
Die Viewport-Angabe richtet die Seite auf den Bildschirm ein
Ein Smartphone-Bildschirm ist viel schmaler als ein Monitor. Damit eine Website darauf gut lesbar ist, muss das Gerät wissen: Richte die Darstellung an der tatsächlichen Bildschirmbreite aus. Genau das sagt die Viewport-Angabe — eine einzelne Zeile im Quelltext, die jede Seite mitbringen sollte. Mit ihr passt sich der Inhalt der schmalen Breite an: Texte brechen um, Spalten ordnen sich untereinander, Schaltflächen bleiben groß genug zum Antippen. Ohne die Zeile nimmt das Gerät an, es solle eine breite Desktop-Seite darstellen, und verkleinert alles so weit, bis die volle Breite auf den Bildschirm passt.
Ohne die Angabe verlieren Sie mobile Besucher
Ein Großteil der Suchanfragen an ein regionales Unternehmen kommt vom Smartphone — etwa wenn jemand unterwegs einen Handwerker, ein Lokal oder eine Öffnungszeit sucht. Trifft dieser Besucher auf eine briefmarkengroße Darstellung, muss er zoomen, seitlich schieben und zielt mit dem Daumen auf winzige Menüpunkte. Die meisten geben nach wenigen Sekunden auf und wählen den nächsten Treffer. Auch Google achtet auf die Mobiltauglichkeit von Seiten; die fehlende Viewport-Angabe nimmt der Seite dieses Grundsignal. Unsere Prüfung meldet die fehlende Angabe deshalb als Mangel mittlerer Schwere — behebbar mit einer einzigen Zeile.
So gehen Sie es an
- Öffnen Sie Ihre Website am eigenen Smartphone und prüfen Sie, ob der Text ohne Zoomen lesbar ist.
- Achten Sie darauf, ob Sie seitlich schieben müssen, um Inhalte zu sehen — das ist ein deutliches Warnzeichen.
- Bitten Sie Ihre Agentur, die Viewport-Angabe auf allen Seiten zu ergänzen, falls sie fehlt.
- Testen Sie nach der Korrektur erneut am Smartphone, ob Texte umbrechen und Schaltflächen gut antippbar sind.
Weiter im Prüfbereich SEO
- Wozu dient die Sprachangabe im HTML einer Website?Die Sprachangabe im HTML sagt Programmen, in welcher Sprache die Seite verfasst ist. Vorleseprogramme wählen danach ihre Aussprache.
- Warum zeigt meine Website Fragezeichen statt Umlauten an?Fragezeichen oder Kästchen statt ä, ö, ü deuten auf eine fehlende Zeichensatz-Angabe hin. Eine Zeile im Quelltext legt die richtige Kodierung fest.
- Was sind Alt-Texte für Bilder und wie schreibe ich sie richtig?Alt-Texte beschreiben in einem Satz, was auf einem Bild zu sehen ist. Sie machen Bilder für die Google-Bildersuche auffindbar und für Blinde zugänglich.
- Warum braucht jede Seite interne Links zu anderen Seiten?Interne Links verbinden die Seiten Ihrer Website. Sie führen Besucher weiter und zeigen Google, welche Seiten existieren und zusammengehören.
Dieser Prüfpunkt gehört zum Prüfbereich SEO; 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.
Foto: Ricardo Gomez Angel, CC0
.jpg){kind=link}