Tips zum Seitenlayout
 
Generelle Seitenaufteilung

Die ersten Überlegungen zur Aufteilung einer Seite sollten begleitet sein von der Erkenntnis, dass die eigene Bildschirmauflösung nicht unbedingt die von allen Besuchern auf der Seite ist.
Das gängigste Format ist immer noch eine Auflösung von 800 x 600 Pixel.
Wenn man also selbst (wie ich) mit einer höherern Auflösung arbeitet, kommt man leicht in Versuchung, die gesamte Bildschirmfläche auszunutzen.
Bei einer Breitenauflösung von 1024 Pixel hat man selbst dann rund 25 % mehr Platz, was aber beim Betrachter mit 800 Pixel zum unschönen Zwang des horizontalen Scrollens führen kann, vor allem bei Tabellen und Bildern eine sehr unfreundliche Geschichte.
Die Planung sollte bereits beim Frame beginnen, wenn man einen solchen, wie ich, benutzen will.

Meine Frames sehen für die Navigationsleiste (links) eine Breite von 200 Pixeln vor, den Rest (200,*) für den Hauptframe. Bei einer 1024er Auflösung hieße dies 824 Pixel Verfügbarkeit, also bereits mehr als eine 800 x 600 Auflösung verkraften kann.
Nun kann man natürlich anstatt des Asterisks (*) auch die absolute Zahl von 600 eingeben, was allerdings den Nachteil hat, dass dann auf Bildschirmen mit hoher Auflösung rechts am Rand ein großes Loch gähnt.

Die Lösung, die sich auch noch aus anderen Gründen anbietet:
Alles (fast)  was in Frames  gemacht wird, wird in eine Tabelle gestellt.

Dieser Text, den Sie eben lesen, steht in einer einspaltigen Tabelle mit einer Breite von 550 Pixel. Nur 550 deswegen, weil ich noch etwas Platz brauche für vertikale Scroll-Leisten.
Aus dem gleichen Grund ist die Tabelle in der linken Navigationsleiste nicht 200 Pixel, wie der Frame es hergeben würde, sondern nur 170 Pixel.
Die Tabelle, in der dieser Text hier steht, ist zentriert, so daß auch bei hoher Auflösung keine Linkslastigkeit auf dem Screen entsteht.
 
 

 
Text-Seiten
 

a. Zeilenbreite

Lesen ist anstrengender als Bilder betrachten. Um so mehr sollte man auf Lesefreundlichkeit von Textseiten, wie z.B. dieser hier, achten.

Hauptfehler, der hier immer wieder gemacht wird, ist die Ausnutzung des gesamten, zur Verfügung stehenden Platzes. Bei einer hohen Auflösung, kann dies bedeuten, daß die Textzeilen so breit werden, wie der gesamte Frame. Und dann man muß man schon den Kopf bewegen, um die Zeile von links nach rechts zu verfolgen. Beim Zeilenumbruch hat man dann Schwierigkeiten, die neue Zeile zu finden. Das strengt an, nervt und verleitet zum Ausstieg.

Hier hilft mir wieder meine Tabelle, die auf eine Breite von 550 Pixel beschränkt ist.
Das ist eine Größe (=Zeilenlänge), die m.E. gerade noch vertretbar ist.
Auf professionellen Seiten (z.B. ZD-Net) finden Sie Text nur in Spalten, ähnlich wie bei Zeitungen, etwa 300 Pixel breit. Das macht das Lesen angenehm.

b. Farben / Hintergründe

Haben Sie sich auch schon oft gefreut, endlich den gesuchten Beitrag gefunden zu haben und dann - Sie lesen gerade begeister die ersten Worte - wird zu guter letzt beim Laden ein Background-Image eingespielt, daß einem schummrig wird vor den Augen. Es gibt sogar Seiten, bei denen können Sie Teile des Textes gar nicht mehr lesen, weil Text-Farbe und Hintergrund kaum noch unterschiedlich sind.
Das menschliche Auge ist es gewohnt, dunklen Text auf hellem Untergrund zu lesen. Aber das ist nicht der einzige Grund, warum man diese Regel beibehalten sollte:
Texte werden gerne ausgedruckt. Ein normales Background-Image wird zwar beim Drucken ignoriert, nicht aber die Hintergrundfarbe in einer Tabelle. Das führt beim Drucken z.B. auf einem S/W-Laserdrucker zur Wiedergabe grau in grau.

Die Steigerung der Benutzerunfreundlichkeit ist heller Text auf dunklem Grund.
Wie z.B. ausgerechnet die Hilfetexte bei Fortunecity.de, weiße Schrift auf schwarzen Grund (Body-Background-Color). Will man sich diese ellenlangen Hilfetexte ausdrucken lassen, passiert das gleiche wie bei der italienischen Heldenflagge: weißer Adler auf weißem Grund.

Ich bin auch ein Fan, wie man sehen kann, von dunklen Hintergründen. Aber bei Passagen, bei denen es aufs Lesen ankommt und die evtl. gedruckt werden wollen, verwende ich einen weißen oder mindestens hellen Hintergrund.
Dabei helfen wieder Tabellen. Der Background im Body-Segment ist schwarz. der in der Tabell weiß, wie eben auf dieser Seite hier.
 

 
Layout klauen ?
Es gibt keinen Kopierschutz zum Layout (zu Grafiken und Text ja, und zwar generell - auch ohne Copyright-Vermerk!). Wenn Ihnen also ein Layout gefällt, schauen Sie sich den Source-Code an und stibitzen Sie gute Ideen - 
die Web-Gemeinde wird es Ihnen danken !
 
Zurück zur Übersicht Tips und Tricks