18. Oktober 2012
Webdesign-Tipps 1: Du sollst nicht springen
Beim Surfen im Netz sehe ich leider sehr häufig folgenden, wie ich finde, störenden Effekt: der Inhalt zentrierter Seiten „springt“ beim Wechsel zwischen einzelnen Seiten um vielleicht einen halben Zentimeter von links nach rechts oder von rechts nach links.
Den Grund dafür hatte ich, als dies mir vor Jahren bei der Erstellung meiner eigenen Seiten das erste Mal aufgefallen war, schnell identifiziert: bei Seiten mit wenig Inhalt wird der Browser-Scrollbar rechts verborgen. Ist die Seite jedoch länger, wird sie angezeigt, um den Inhalt scrollen zu können.
Die Breite des Scrollbars war, so stellte ich fest, exakt der Wert, um den der Seiteninhalt beim Wechsel optisch „springt“.
Problemlösung
Ich empfand schon damals diesen „Effekt“ als sehr störend, es macht den Seitenwechsel unruhig und durch das Springen sieht der gesamte Auftritt irgendwie unprofessionell aus. Genauso schnell, wie ich das Problem identifiziert hatte, fand ich durch eine Recherche im Internet auch eine Lösung des Problems, welche ich seitdem bei allen Projekten verwende. Ein kurzer Eintrag
html { overflow-y:scroll; }
in der CSS-Datei, zum Beispiel im Zuge eines CSS-Resets, genügt, um die Scrollbar vom Browser dauerhaft anzeigen zu lassen – vorbei ist es mit dem unschönen Springen. Leider scheint sich dieser Trick bisher nur mäßig herumgesprochen zu haben; auch bei Seiten, die mir sonst sehr gefallen, sehe ich diesen „Sprungeffekt“ immer noch regelmäßig.