Bevor ihr ein Layout praktisch umsetzt, sind einige grundlegende Dinge zu klären. So solltet ihr euch zunächst einmal für die Art des Layouts entscheiden. Prinzipiell gibt es hier drei Möglichkeiten.
• Fixiert
• Flexibel
• Elastisch
CSS ermöglicht Layouts mit festen oder flexiblen Abmessungen. Bei den festen Layouts wird üblicherweise mit Maßangaben in Pixel gearbeitet. Flexible Layouts basieren hingegen auf prozentualen Werten. Beide Layoutvarianten haben dabei durchaus ihre Vor- und Nachteile.
Feste Layouts verwendet man meistens dann, wenn Grafiken layoutbildend eingesetzt werden sollen. (Wobei es auch hier durch den Einsatz von CSS-Hintergrundgrafiken durchaus Ausnahmen gibt). Kommt es bei den Layouts auf eine pixelgenaue Positionierung der Elemente an, greift man für gewöhnlich ebenfalls zur festen Positionierung. Bei dieser Layoutform wird meistens zumindest die Breite des Layouts auf eine feste Pixelanzahl festgelegt. Diese Breite zielt dann üblicherweise auf bestimmte Bildschirmauflösungen.
Anders sieht die Sache bei flexiblen Layouts aus. Hier gibt man keine feste Breite an. Das Layout richtet sich hier dann nach der Breite des Browserfensters.
Bei solchen Layouts wird dann beispielsweise die Breite in Prozentwerten angegeben. Passt ein Benutzer die Größe des Browserfensters an, verändert sich auch die Größe des Layouts.
Dank moderner CSS-Eigenschaft gibt es mittlerweile übrigens auch noch eine andere Layoutvariante, nämlich das sogenannte responsive Layout. Hier verändert sich das Layout so, dass es beispielsweise auf einem Smartphone völlig anders als auf einem Desktop-Rechner aussieht. Hier auf PSD-Tutorials.de wurde beispielsweise mit einem solchen Layout gearbeitet. Ruft man die Seite am Desktop mit einer "normalen" Browserfenstergröße auf, ergibt sich folgendes Bild.
Schiebt man das Fenster jetzt allerdings zusammen, verändert sich tatsächlich die Anordnung der auf der Webseite vorhandenen Elemente.
Der Aufwand für die Erstellung eines responsiven Layouts ist vergleichsweise hoch. Schließlich muss die Bildschirmgröße des Besuchers ermittelt und ihm dann ein passendes Layout präsentiert werden. Und dieses passende Layout müsst ihr eben für die unterschiedlichen Bildschirmgrößen tatsächlich entwickeln. Ein Besucher, der eure Webseite also mit einem großen Monitor aufruft, bekommt beispielsweise ein dreispaltiges Layout präsentiert. Ruft ein anderer Besucher eure Webseite hingegen mit einem Smartphone auf, wird ihm ein einspaltiges Layout angezeigt.
Vor- und Nachteile der Varianten
Bevor ihr ein Layout umsetzt, müsst ihr euch überlegen, welche der genannten Layoutformen ihr einsetzen wollt. Ich möchte euch dazu kurz zeigen, welche Vor- und Nachteile feste Layouts haben.
• Designvorlagen lassen sich hier sicherlich am einfachsten umsetzen.
• Orientiert man sich an Standardauflösungen, gibt es kaum Probleme bei der Darstellung der Webseite.
• Die Layouts sind leicht verständlich zu vermitteln. (Dieser Vorteil kommt euch natürlich zugute, wenn ihr als Webentwickler einem Kunden ein Layout erklären wollt).
Die festen Layouts haben allerdings auch Nachteile.
• Aufgrund der festen Maße sind sie unflexibel, passen sich also beispielsweise auch sehr kleinen oder großen Bildschirmen nicht an. Oftmals wird viel Platz verschwendet.
• Sie unterliegen hinsichtlich der Barrierefreiheit einiger Einschränkungen.
Auch die flexiblen Layouts haben Stärken und Schwächen. Zunächst zu den Vorteilen.
• Die Layouts passen sich automatisch der Fenstergröße der Browser an.
• Die Besucher können somit sehr großen Einfluss auf die Darstellung der Webseite nehmen.
Nachteile gibt es aber auch hier.
• Ihr als Entwickler könnt die Ergebnisse nur schwer kontrollieren. Layoutvorgaben lassen sich also nur bedingt umsetzen.
• Die Seiteninhalte müssten aufwendig angepasst werden.
• Bei großen Bildschirmen kann es mit der Darstellung kurzer Texte „unschön“ werden, da diese dann oftmals nur in einer Zeile stehen. (CSS bietet hierfür aber entsprechende Eigenschaften wie min-width).
Eine weitere Layoutform stellt einen Mittelweg zwischen festen und flexiblen Layouts dar. Dabei handelt es sich um die sogenannten elastischen Layouts. Deren Hauptmerkmal ist die Maßeinheit em. (Neuerdings kommt auch immer mehr rem in Mode. Im Unterschied zu em orientiert sich rem immer am Root-Element, nicht wie em am übergeordneten Element).
Bei diesen Layouts sind Breite und Höhe flexibel. Das Design der Seite skaliert dabei proportional zur Größe des Browserfensters. Diese Gestaltungsform ist auf der einen Seite sicherlich am komplexesten, wenn es um die praktische Umsetzung geht. Das liegt schlicht und ergreifend daran, dass man im Vorfeld sehr genau wissen muss, wie sich die Elemente bei einem sich verändernden Browserfenster verhalten. Verwendet werden elastische Layouts vor allem für Webseiten, auf denen viele Fotos und Videos angeboten werden.
Die Vorteile elastischer Layouts:
• Der zur Verfügung stehende Platz wird optimal ausgenutzt.
• Die Inhalte werden proportional immer so groß wie möglich angezeigt.
Aber natürlich haben elastische Layouts durchaus auch ihre Nachteile.
• Die Gestaltung dieser Layouts ist sehr komplex.
• Auch die Umsetzung stellt sich alles andere als einfach dar.
Die Qual der Wahl
Ihr müsst euch also entscheiden, welche der genannten Varianten ihr verwenden wollt. Wenn ihr noch ganz am Anfang eurer HTML/CSS-Entwicklung steht, würde ich euch zunächst zu einem festen Layout raten. Wer bereits fortgeschrittene Kenntnisse auf dem Gebiet der Webentwicklung hat, sollte hingegen direkt mit responsiven Layouts arbeiten. Hier seid ihr auf der richtigen Seite, unabhängig davon, mit welchem Endgerät eure Webseite letztendlich aufgerufen wird.
