Warum sich Websites auf dem Handy seitlich verschieben: woran es fast immer liegt
Eine Seite sieht auf dem Rechner sauber aus, auf dem Handy lässt sie sich seitlich schieben. Der Inhalt sitzt leicht daneben, beim Wischen wackelt das Bild. Das ist kein Schönheitsfehler: Google bewertet die Bedienbarkeit auf dem Handy, und Besucher, die eine Seite geradeziehen müssen, lesen sie nicht zu Ende. Bei der Prüfung des eigenen Auftritts sind wir genau darüber gestolpert. Die Ursache war nicht das Layout, sondern ein einzelnes Wort.
Ein Element reicht für die ganze Seite
Waagerechtes Verrutschen ist kein Zustand einzelner Kästen, sondern des gesamten Dokuments. Sobald ein beliebiges Element breiter ist als der sichtbare Bereich, wächst die Breite der Seite mit, und alles andere, auch der Kopfbereich, lässt sich mitschieben.
Deshalb führt die Suche nach der Ursache in die Irre, wenn man dort anfängt, wo es auffällt. Auffällig ist der Kopfbereich; schuld ist er fast nie.
Lange Wörter brechen nicht von selbst
So funktioniert es
Ein Text bricht an Leerzeichen um. Zwei kurze Wörter finden immer eine Stelle, an der die Zeile enden darf.
So geht es schief
Ein zusammengesetztes Substantiv ist eine ununterbrochene Kette. Es gibt keine Stelle, an der der Browser umbrechen dürfte. Also ragt das Wort heraus, egal wie eng der Platz ist.
Genau das war der Fall: eine Überschrift mit einem langen Fachwort war breiter als der Bildschirm eines gängigen Telefons. Der Rest der Seite war einwandfrei.
Die Lösung ist ein unsichtbares Zeichen
Ein weiches Trennzeichen wird mitten ins Wort gesetzt. Ist genug Platz, sieht man nichts. Wird es eng, bricht das Wort an genau dieser Stelle mit Bindestrich um. Der Text bleibt derselbe, das Vorlesen bleibt dasselbe, das Kopieren bleibt dasselbe.
Der Unterschied zur brachialen Lösung: Ein erzwungener Umbruch an beliebiger Stelle zerschneidet Wörter mitten in der Silbe. Das weiche Trennzeichen bricht dort, wo es sprachlich richtig ist.
Auf einer Breite prüfen genügt nicht
-
1
Mehrere Breiten fahren
Telefon hoch, großes Telefon, Tablet hoch, Tablet quer, kleines Notebook. Ein Fehler, der bei einer Breite auftritt, ist bei der nächsten oft verschwunden.
-
2
Die Seite messen, nicht ansehen
Verglichen wird die Breite des Dokuments mit der Breite des sichtbaren Bereichs. Ein Blick täuscht, eine Zahl nicht.
-
3
Das schuldige Element benennen lassen
Statt zu raten, welches Element herausragt: alle Elemente durchgehen und die heraussuchen, deren rechte Kante über den Rand hinausgeht.
Die Falle beim Nachmessen
Nach der Korrektur zeigte die erste Wiederholung denselben Wert wie vorher. Nicht, weil die Korrektur nicht griff, sondern weil der Browser die alte Fassung aus dem Zwischenspeicher nahm.
Wer nachmisst, hängt einen beliebigen Zusatz an die Adresse oder leert den Zwischenspeicher. Sonst prüft er den alten Stand und verwirft eine Lösung, die längst funktioniert.
- Jede Seite bei mindestens fünf Breiten prüfen, nicht nur bei einer.
- Nicht ansehen, sondern messen: Dokumentbreite gegen sichtbare Breite.
- Lange zusammengesetzte Wörter in Überschriften mit weichem Trennzeichen versehen.
- Beim Nachmessen den Zwischenspeicher umgehen.
- Nach jeder Änderung am Erscheinungsbild erneut messen, nicht nur einmal zum Start.
Waagerechtes Verrutschen ist der Fehler, den man auf dem eigenen Rechner nie sieht und den jeder Besucher mit dem Daumen merkt. Wir bauen Websites in Freiburg im Breisgau und prüfen sie vor der Übergabe über alle gängigen Gerätebreiten.
← Zurück zu Neuigkeiten · Webdesign Freiburg · Was kostet eine Website?