Design mit festem Hintergrundbild und fester Navigation

Einleitung

Bei langen Textseiten entsteht häufig die Situation, dass der Besucher die Navigationsleiste aus den Augen verliert. Einmal auf der Seite unten angekommen muss er wieder nach oben scrollen, um den nächsten Menüpunkt anzuwählen.

Eine Möglichkeit

Diesem Umstand wird oft damit Rechnung getragen, dass ein 2-Frame-Layout gewählt wird, bei dem die Navigation in einem gesonderten Frame dargestellt wird, der unveränderlich auf dem Bildschirm bleibt.

Natürlich gibt es auch die Möglichkeit, einen Anker auf den Seitenanfang zu setzen und am Ende einen entsprechenden Link einzufügen. Aber der ist nur sinnvoll, wenn der besucher überhaupt ganz unten ankommt. Außerdem ist das schon wieder ein Klick mehr.


Eine andere Variante

Bei diesem Design wurde ein anderer Weg gewählt: Die Navigation wurde in einen feststehenden <div>-Layer eingebettet.

Werbung

Ich unterbreche hier den Seitentext für

Jetzt geht es weiter mit dem ...

Hintergrundbild

Eine zweite Besonderheit dieses Designs ist das feststehende Hintergrundbild. Es ist immer sichbar, egal wie weit der Besucher der Seite nach unten scrollt. Wennman ein Design mit einem Hintergrundbild gestaltet, sind allerdings zwei Dinge zu beachten: die Auswahl des Bildes selbst und die Schriftgestaltung.

Bildauswahl

Das Bild sollte insgesamt nicht zu kontrastreich und bunt sein. Es ist ja ein Hintergrundbild.

Schriftgestaltung

Die Schriftgestaltung steht in einem engen Zusammenhang mit der Bildwahl: ist das Bild eher hell, dann sind hellere Farben vorzuziehen, bei einem dunklen Bild wie hier ist eine möglichst helle Schrift sinnvol.
Außerdem wurde duch die Zuordnung eines erweiterten Zeichenabstandes die Lesbarkeit verbessert.