Sie befinden sich hier: Thema: Gestaltung Artikel: Seitenlayout

Seitenlayout

Der Entwurf

Das Seitenlayout sollte einheitlich sein, damit der Wiedererkennungswert der einzelnen Seitenelemente wie Aussehen und Navigation gegeben ist. Denn wer möchte sich, nachdem er auf der nächsten Seite angelant ist, fragen, ob er noch auf der selben Website, oder oder sich schon auf einer anderen befindet! Niemand wird rätseln wollen, wie er zu navigieren hat, nur weil Sie sich für eine andere Navigation auf einer neuen Seite entschlossen haben!

Wichtig für ein Seitenlayout sind unter anderem die Höhe und Breite der Seiten wobei eine Breite eher wichtig ist. Die Darstellung der Seiten richtet sich nach der Auflösung, die der Betrachter der Seiten an seinem Computer eingerichtet hat. Viele User haben zwar schon einen 17 Zoll Monitor, aber eben noch nicht alle. Und eine Bildschirmauflösung von 800 mal 600 Pixeln ist noch am gebräuchlisten. Hieraus ergibt sich unter Benutzung eines Browsers eine max. sichtbare Breite von 768 Pixeln und eine Höhe von 458 Pixeln (ohne zu scrollen!). Wobei der Benutzer es noch gewohnt ist, bei längeren Seiten nach unten zu scrollen. Ein scrollen nach rechts empfinden viele als unvorteilhaft. Die Seiten sollten aber auch nicht zu lang sein.

Benutzt man für das Seitenlayout Tabellen, so können diese entweder mit einer festen Größe in Pixeln (z.B Spalten mit insgesamt 768 Pixeln!), in Prozent (relativ zur Browserfensterbreite!), oder einer Mischung davon angegeben werden. Da bei einer Angabe in Prozent die Seite sich dem Browserfenster anpasst, erhält man mal mehr, mal weniger Inhalt, allerdings werden leere Bereiche im Browserfenster vermieden. Ein flexibles Layout ist jedoch nichts für Jedermann. Eine Lösung kann hier die Kombination von fester Größe in Pixeln und einer Angabe in Prozent, innerhalb der selben Tabelle sein. Wobei man z.B die Spalte mit der Navigation pixelgenau definiert und die danebenliegende Spalte mit dem Fließtext mit einer prozentualen Angabe versieht.

Man sollte allerdings nie erwarten, daß jeder Surfer die Seiten so sieht, wie derjenige, der diese mit viel Mühe erstellt hat. Denn jeder User hat einen anderen Monitor, mit einer anderen Auflösung. Außerdem kann jeder in seinem Browser die Fensterbreite und die Schriftgröße anders einstellen.

Häufig liest man auf Websites „Optimized for IE4, 1024 x 768“. Dies bringt aber wenig. Selbst wenn inzwischen 17-Zoll-Monitore zum Standard geworden sind. Nicht jeder Surfer verfügt über diesen Standard, außerdem sind oftmals nur 800 x 600 Pixel Bildschirmauflösung eingestellt. Dieser Standard wird eher an neuen Rechnern als am Durchschnitt errechnet.

Verschiedene Möglichkeiten:

Cascading Stylesheets:

Um ein stabiles Seitenlayout zu erreichen, kann man Tabellen oder auch CSS-Stylesheets verwenden. Stylesheets können mittlerweise von fast jedem Browser gelesen werden, aber diese interpretieren sie unterschiedlich. Zum Thema CSS-Stylesheets und Schriftformatierung mehr auf der Seite Stylesheets.

Wie Sie Ihre Seiten mit einer externen CSS-Datei (ausschließlich für den Druck!) gestalten, um einen korrekten Ausdruck zu erhalten, erfahren Sie hier: Druckoptimiert!

Frames:

Es gibt auch die Möglichkeit, HTML Seiten in sogenannte Frames zu unterteilen. Dabei bleiben einzelne Bereiche später im Browser fest bestehen, andere werden durch aufruf eines Linkes neu eingelesen. Wobei man z.B den linken Frame, der die Navigation enthält mit einer festen Pixelgröße fixiert, aber den rechten Frame, in den die Seiten eingelesen werden skaliert (passt sich damit der Fenstergröße an!). Die Bildlaufleisten dürfen für Bereiche, in den unterschiedlich große Seiten eingelesen werden nicht deaktiviert werden, sonst sperrt man Anwender mit einer kleineren Auflösung aus. Gestaltet man die einzulesenden Seiten mit Tabellen, so bestimmt man die Tabellenbreite mit 100 %, sodaß sie immer den kompletten Frame ausfüllen! Frames sind einerseits beliebt, garantieren aber leider nicht das, was sie versprechen. Nicht jeder Browser liest die Seiten fehlerfrei ein. Suchmaschinen interpretieren Frames sehr unterschiedlich. Der Meta-Tag „Schlüsselwörter“ bringt bei Frames den Nachteil, daß diese in den feststehenden Bereichen der Seite nur einmal vorkommen. Hingegen werden sie ohne Frames immer wieder auf den einzelnen Seiten neu ausgelesen, was einige Suchmaschinen höher bewerten.

Wenn man mehrere Seiten in den Suchmaschinen hat, ergibt sich noch ein ganz anderes Problem. Ist die Startseite z.B die Indexseite mit dem Frame, so erscheint diese und alle anderen Seiten in der Suchmaschine nacheinander aufgelistet. Wenn ein User jetzt z.B die Unterseite „hobby.html“ anklickt, so erhält er im Regelfall diese Seite, allerdings ohne das Frame. Eine Navigation ist nun nicht mehr möglich. Hier kann man nur mit einem Javascript abhelfen, daß beim aufrufen der „hobby.html“ Seite automatisch die Indexseite mit dem dazugehörigen Frame einliest.

Tipp: internes Javascript: Binden Sie das folgende Javascript in den Head-Bereich der im Frame anzuzeigenden HTML-Seite z.B: „hobby.html“ ein. Ich gehe davon aus, daß das Frameset „index.html“ heißt. Nachteil: Das geladene Frameset beinhaltet nur die Dateien, die immer beim Start der Site zu sehen sind. Der Surfer muß also über die Navigation zu der, vorher in der Suchmaschine ausgesuchten, gewünschten Seite.

<script language="JavaScript">
<!--
if (parent.location==
window.location){
parent.location=
"index.html";
}
//-->
</script>


Tipp: externes Javascript: Wie oben, nur in eine extra javascript.js Datei, die mit allen HTML-Dateien verlinkt wird!

/Lädt Frame mit index.html. Danach kann man auf geünschte Seite(n)!!!
if (parent.location==
window.location){
parent.location=
"index.html";
}


Leider werden Frames immer öfter dazu benutzt, um fremde Seiten in das eigene Frameset einzubinden. Dies ist nicht nur unfair, sondern auch rechtlich bedenklich! Wenn Sie dies verhindern wollen, benutzen Sie folgendes Javascript.

Tipp: internes Javascript: Um zu verhindern, daß man Ihre Seiten einfach in ein Frame laden kann, ohne das Sie davon eine Ahnung haben, geben Sie folgendes Javascript in den Head-Bereich der HTML-Seiten ein:

<script language="JavaScript">
<!--
if (parent.location!=
window.location){
parent.location=
window.location;
}
//-->
</script>


Tipp: externes Javascript: Wie oben, nur in eine extra javascript.js Datei, die mit allen HTML-Dateien verlinkt wird!

// verhindert das Laden von HTML Seiten in fremde Frames
if (parent.location!=
window.location){
parent.location=
window.location;
}

Oder man entwirft eine komplette zweite Version seiner Website ohne Frames. Dann braucht man noch eine andere, angepasste Startseite (index.html), von der man auf die beiden Versionen seiner Homepage verweist.

Man sollte sich schon sehr genau überlegen, ob man Frames einsetzt. Wiegt man die Vor- und Nachteile gegeneinander ab, so wird man bei komerziellen Sites wohl eher darauf verzichten. Der Trend geht im allgemeinen jedenfalls dahin. Man kann mit Tabellen, Stylesheets und anderem ebenso interessante Highlights setzen.

Tabellen:

Mit Tabellen hingegen läßt sich relativ leicht arbeiten. Hat man einen Editor mit der Möglichkeit im Layoutmodus WYSIWYG-Editoren (What you see, is what you get!) - arbeitet man nicht ausschließlich im HTML-Quellcode, sondern hat direkt das zu erwartende Layout vor Augen. So muß man erstens, nicht alle HTML Befehle auswendig lernen, andererseits hat man den Vorteil, sich nicht alles vorstellen können zu müssen. Denn wenn man Tabellen verschachtelt, dann kann es leicht vorkommen, daß das was man sich in seinem geistigen Auge vorstellt, sich nur sehr schwer in der HTML-Quellcode Ansicht realisieren läßt. Denn die einzelnen Zeilen und Spalten sind dann mühselig zu suchen. Bei Verschachtelungen wird es dann nahezu unmöglich, schnell zu arbeiten. Zwar gibt es immer noch Puristen, die jeden HTML-Tag selbst schreiben, um ihn kontrollieren zu können. Aber dies kann man bei den WYSIWYG-Editoren, in einem separaten Quellcode-Fenster, auch.

Vorher ist besser als Nachher:

Bevor man sich an das eintippen von Quellcode oder Text in eine HTML begibt, sollte man sich zuerst einmal um das spätere Aussehen seiner Homepage kümmern.

Am besten zeichnet man sich auf einem Blatt Papier auf, wie die Seite aussehen soll. Mann benutzt hier am besten Pixelangaben. Also die Breite von 768 x Höhe 458 Pixeln. Wobei die Höhe auch nachher unwichtig werden kann, da man ja scrollen kann!.

Nun zeichnet man sich zunächst ein Raster auf, mit dem man die Seite unterteilt. Linker Bereich für Navigation, oben rechts für Logo und darunter rechts für Text und Bilder. Will man bestimmte Bereiche, dieser drei Grundbereiche unterteilen, so malt man sich vieleicht zunächst, in einer anderen Farbe, in diesen Bereich eine zusätzliche Tabelle ein. Entweder man erstellt später direkt - in einem Stück -, die Tabelle, die das gesamte Layout ermöglicht, oder man stellt die Tabellen ineinander. Somit erhält man schon einmal ein Grundgerüst. Logos und Bilder lassen sich plazieren. Textbereiche lassen sich definieren und in Breite und Höhe einstellen. Jetzt kann man sich schon einmal mit anderen Einzelheiten der Website befassen.