Wie dir beim Stöbern auf Homepages sicher schon einmal augefallen ist, gibt es verschiedene Arten von Layouts: solche mit einem recht kleinen Textfensterchen, was einen eigenen Scrollbalken besitzt; solche, deren Größe sich an die Länge des Inhalts jeweils anpasst, usw. usw.

Hier findest du eine Übersicht über die unterschiedlichen Layouttypen mit ihren jeweiligen Vor- und Nachteilen.

Frameset

Dieser Layouttyp ist mittlerweile vollkommen veraltet und sollte tunlichst vermieden werden.

wie geht’s?

Das Browserfenster wird in einzelne Bereiche aufgeteilt, zum Beispiel links eine „Spalte“ für die Navigation, oben ein Bereich für das Headerbild und der dritte Bereich für den Content.
Wenn der Link- und Contentbereich länger sind als das Browserfenster hoch ist oder auch breiteren Inhalt besitzen, der ein Scrollen in die Horizontale erfordert, erhalten beide Bereiche jeweils eigene Scrollbalken.

Vorteile

• Es muss nur der Bereich des Contents neu geladen werden, da die Navigation auf jeder Unterseite ja die gleiche bleibt.

Nachteile

• viele Scrollbalken
• externe Verlinkung auf einzelne Unterseiten zeigt diese ohne Navigation und andere Bereiche an

Table

Obwohl Tabellenlayouts als überholt gelten und problemlos durch Divs ersetzt werden könnten, finden sie immernoch häufig Verwendung.

wie geht’s?

Es wird eine Tabelle mit beliebig vielen Zeilen und Spalten angelegt, üblicherweise mit einer Zeile für die Headergrafik, einer in zwei Spalten unterteilten Zeile für Content und Navigation sowie einer Zeile für die Footergrafik.
Die Höhe des Contentbereichs lässt sich entweder fest in Pixeln angeben (was sehr unschön ist, da bei kürzerem Inhalt unten ein großer Freiraum bleibt, während bei längerem Inhalt ein zweiter Scrollbalken innerhalb der Tabelle entsteht) oder aber via PHP Include variabel anpassen.

Vorteile

• beim Slicen eines Bildes in Photoshop kann man dies automatisch für’s Web speichern – es wird automatisch ein Tabellenlayout generiert
• wird in den meisten Browsern problemlos korrekt angezeigt

Nachteile

• sehr viel Code → unübersichtlich und lange Ladezeit
• Suchmaschinen erfassen oft nur einen Teil des Inhalts

Iframe

Mittlerweile ist der Trend zu Iframes wieder abgeebbt, man findet sie bisweilen aber dennoch vor.

wie geht’s?

Während die Seite an sich an das Browserfenster angepasst ist und keinen Scrollbalken an der rechten Seite erfordert, befindet sich der Content in einem mehr oder weniger kleinen Bereich/Fensterchen mit einem eigenen Scrollbalken.

Vorteile

• kann recht schick aussehen
• geeignet für kleine Layouts wie etwa bei PopUp-Layouts (s.u.)

Nachteile

• einzelne Unterseiten lassen sich extern nicht korrekt verlinken (es wird nur der Inhalt des Iframes angezeigt, nicht aber Navigation etc.)
• bei längeren Inhaltstexten umständlich durch viel Scrollen
• Suchmaschinen erfassen meist nicht allen Inhalt

Divs

Dies ist die aktuellste und empfehlenswerteste Art, ein Layout zu coden.

wie geht’s?

Einzelne Ebenen, die sich jeweils pixelgenau positionieren lassen, beinhalten die einzelnen Elemente wie Navigaton, Content, Grafiken etc.

Vorteile

• suchmaschinenfreundlich
• ermöglichen Barrieefreiheit
• schlanker Code (insbesondere, wenn CSS eingesetzt wird)

Nachteile

• korrekte Darstellung in den einzelnen Browsern macht zum Teil Probleme und erfordert „Frickeln“ (vor allem das Floaten im IE)
• WYSIWYG-Editoren stellen Div-Layouts in ihrem Ansichtsmodus oft nicht korrekt dar -→ einige Erfahrung im Umgang mit HTML erforderlich (okay, das zählt eigentlich nicht unter „Nachteile“… *g*)

PopUps

Eigentlich stellen sie keinen eigenen Layout-Typ dar, da sie meist auf Iframes basieren. Aber der Vollständigkeit halber…

wie geht’s?

Die eigentliche Seite öffnet sich durch Klicken auf einen „Enter“- oder sonstigen Button in einem PopUp-Fenster.

Vorteile

• schicke kleine Layouts möglich

Nachteile

• PopUps nerven oft, da sie an Werbung erinnern
• werden zum Til durch PopUp-Blocker am Öffnen gehindert