flexible Layouts mit CSS 4


Websites sollten sich immer dem Benutzer anpassen, so zumindest steht es in vielen Dokumentationen über Benutzerfreundlichkeiten. Aber was ist damit eigentlich gemeint? Welche Anpassung braucht der Benutzer bzw. will er überhaupt haben? Welche ist die Richtige?

Die einfachste Lösung ein Layout für die Website zu erstellen ist mit festen Größenangaben zu arbeiten. Sie ist aber auch am Unflexibelsten, denn das Layout kann sich dann nicht den Bedürfnissen des Betrachters anpassen. Viele heutige Design haben als Maßeinheit für ihr Layout Pixel. Der große Vorteil liegt in der genauen Platzierung von Elementen, wie z.B. Spalten oder aber auch Designelemente wie Hintergrundbilder. Der große Nachteil liegt aber auch gerade in diesen festen Größenangaben. Und hier setzen die flexiblen Design an.

Probleme mit Pixeln und Prozenten

Eine gute Möglichkeit ein flexibles Layout zu entwerfen und trotzdem gewisse Gestaltungsproportionen einhalten zu können besteht darin, die Maßeinheiten EM zu nutzen. Ein EM ist die einfache Größe eine Großbuchstabens. Die Maßeinheit Pixel hat den klaren Nachteil, des eine Spalte die mit 200 Pixel definiert ist immer 200 Pixel breit ist, egal ob der Betrachter seine Schrift vergrößert, weil er einen großen Monitor benutzt oder verkleinert. Nun könnte man aber die Spaltenbreite in Prozent angeben. Auch hier entsteht das gleiche Problem wie bei den Pixeln. Die Spalte bleibt immer z.B. 20% von der gesamten Browserbreite breit, auch wenn man die Schrift vergrößert oder verkleinert. Der Vorteil gegenüber dem Pixel-Layout liegt in der flexiblen Anpassung an die verschiedenen Monitorgrößen. 20% bei einer Auflösung von 1024 * 768 ist deutlich breiter als bei einer Auflösung von 800 * 600.

Layout mit EM

Mein Ansatz ist es nun zwar eine feste Breite wie bei der Pixelangabe zu benutzen, aber diese Breite richtet sich immer nach der Schriftgröße. Wenn also ein Betrachter bei seiner Monitorauflösung von 1280*800 die Darstellung einer Website als zu klein empfindet, dann kann es durch eine schnelle Anpassung der Schriftgröße dieses wunderbar korrigieren. Umgekehrt geht dieses natürlich auch. Ist die Website für 1024*768 optimiert und ein Betrachter besitzt nur 800*600. Dann kann er schnell und meist auch sehr einfach die Schriftgröße seines Browsers ändern und alles ist wieder bestens. In den meisten Browser kann man durch betätigen der Plus- bzw. Minustaste mit gleichzeitigen drücken der STRG-Taste die Schrift des Browsers anpassen.

Wie könnte nun z.B. ein solches 3-spaltiges Layout aussehen?

Als erstes möchte ich die Grundstruktur der HTML-Seite erklären. Dazu erstmal das DOM der Seite

Bei der Identifizierung der einzelnen Container habe ich auf Eindeutigkeit geachtet. Es sollte hoffentlich klar werden was wofür ist. Um eine schnell umsetzbare 3-Spaltigkeit zu bekommen, habe ich die linke Spalte und den eigentlichen Inhalts-Container zusammengefasst. Somit habe ich auch erreicht, dass der Inhalt noch vor den restlichen Spalten im Quelltext steht, was wiederum Suchmaschinen als angenehm empfinden, da das wichtige am Anfang steht.

Das CSS-Grundgerüst

Hier ist nichts weiter überraschendes dabei. Erwähnen möchte ich nur, dass die gesamte Seite in der horizontalen Mitte ausgerichtet ist. Weswegen ich die Eigenschaft text-align auf center gesetzt habe.

Die Gesamtbreite der Seite entspricht hier also 68 Großbuchstaben. Das entspricht ungefähr 120 Zeichen. Um die Seite auch mittig zu platzieren wurde der linke und rechte Außenabstand der Wert auto zugewiesen. Zusätzlich wurde der Text wieder linksbündig ausgerichtet.

Auch die Container head, body und footer enthalten nichts überraschendes. Nur das der body- und der footer-Container mit der Eigenschaft clear und den Wert both für das Aufheben der float-Eigenschaft der vorhergehenden Container zuständig sind.

Nun formatiert man den mittleren Teil. Als erstes wird dieser in 2 Teile getrennt. Der Main-Container wird nach links gelegt und der Right-Container dementsprechend nach rechts. Zusammen ergibt sich eine Breite die gleich ist mit der Gesamtbreite des Page-Containers. Innerhalb des Main-Containers wird wiederum der Platz in 2 Spalten aufgeteilt, so dass diese Gesamtbreite der Breite des Main-Containers entspricht.

Zum Schluss die komplette CSS-Formatierung:

und die Downloads der Dateien:


Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

4 Gedanken zu “flexible Layouts mit CSS