Besser Layouten mit CSS3-Layouttechniken
Kommentare

Das Webdesign wird immer anspruchsvoller, gerade, was das Layout angeht, immerhin muss auch auf ein Responsive Design geachtet werden. CSS bietet Webdesignern zahlreiche Möglichkeiten, wie sie Content

Das Webdesign wird immer anspruchsvoller, gerade, was das Layout angeht, immerhin muss auch auf ein Responsive Design geachtet werden. CSS bietet Webdesignern zahlreiche Möglichkeiten, wie sie Content auf einer Website präsentieren können – wenngleich es bereits zwischen CSS 2.1 und CSS3 gewaltige Unterschiede gibt, wie Inhalte in Form gebracht werden können. In ihrer Session Besser layouten mit Multicolumn, Flexbox und CSS-Shapes auf der International PHP-Conference und WebTech-Conference 2014 zeigte Florence Maurice, welche neuen Layoutmodule CSS3 gebracht hat und wofür sie eingesetzt werden können. 

Anforderungen an Layouttechniken

Web-Content hing lange hinter PrintContent zurück, was die Möglichkeiten der Gestaltung anging, denn es gab nur eine Form: das Rechteck, mit dem standardmäßig Blockelemente untereinander dargestellt werden. Doch die Anforderungen an das Layout und die Layouttechniken hat sich mit der Weiterentwicklung des Webs geändert. 

Gerade flexible Layouttechniken, die sich in einem Responsive Design einbinden lassen und mit denen man Elemente nebeneinander darstellen kann, sind gefordert. Die klassischen Probleme, mit denen Webdesigner zu kämpfen haben  – etwa gleich hohe Spalten, Sticky Footer, eine flexible Leerraumverteilung und die vertikale Kontrolle – unterstreichen diese Anforderungen. Zudem braucht man mehr gestalterische Freiheit und idealerweise sind die Techniken auch noch intuitiv und einfach zu benutzen.

CSS3 macht den Unterschied

Betrachtet man die Möglichkeiten, die Webdesignern in CSS 2.1 zur Verfügung standen mit denen, die CSS3 bieten, wird schnell klar, dass CSS3 einen gewaltigen Fortschritt mit sich gebracht hat. Zwar bieten die Layouttechniken in CSS 2.1 bereits ein gewisses Maß an Flexibilität, aber Techniken wie Float, position: absolute, display: inline-block und display: table benötigen häufig viele Tricks und Spezialwissen, um sie für das Projekt passend einzusetzen. Zudem gibt es keine universelle Technik, mit der sich alle Gestaltungsprobleme lösen lassen; man muss in jeder Situation neu entscheiden, welche Technik angewendet werden sollte.

CSS3 hat demgegenüber den Vorteil, dass es zwar mehr Eigenschaften gibt, sie aber klarer definierte Aufgaben haben und so zu flexibleren Lösungen für das Projekt führen können. In ihrer Session stellte Florence Maurice vier verschiedene Layouttechniken vor, die Webdesignern mehr Gestaltungsspielraum bieten und dabei auch typische Print-Gestaltung ins Web übertragbar machen: Flexbox, Grids, Multicolumn und CSS-Shapes.

Flexbox und mehr

So können mit Flexbox bereits viele der gängigen Layout-Probleme gelöst werden, etwa dadurch, dass sich Elemente flexibel anordnen lassen und Spalten automatisch gleich hoch sind. Auch die Breiten können flexibel definiert werden. Grits funktionieren ähnlich wie Tabellenlayouts, allerdings mit dem großen Vorteil, dass alle Elemente frei angeordnet werden können und sich auch in Responsive Webdesign einbinden lassen. Allerdings muss dabei bedacht werden, dass sich Grids derzeit noch in der Entwicklungsphase befinden und noch nicht für den produktiven Einsatz geeignet sind.

Um Print-like-Features ins Web zu übertragen, lässt sich zum Beispiel Multicolumn verwenden, womit Spaltensatz im Web dargestellt werden kann, indem entweder die Anzahl der Spalten oder ihre Breite vorgegeben werden können. So wird etwa das Problem, dass einzelne Spalten auf großen Displays zu lang sind, gelöst; zudem ist Multicolumn ohne Mehraufwand für Responsive Webdesign geeignet.

CSS-Shapes ermöglicht den nichteckigen Textumfluss und bietet mit Kreis, Ellipse und Polygonen verschiedene Möglichkeiten, Elemente in Form zu bringen – kann dadurch aber schnell zur Ablenkung führen.

Ein Problem, das alle genannten Layouttechniken gemeinsam haben, ist allerdings der bisher noch nicht ausgereifte Browser-Support. In Chrome, Firefox und Safari funktionieren die meisten der Techniken zwar bereits recht problemlos; beim Internet Explorer wird meist mindestens Version 10 vorausgesetzt, um sie implementieren zu können.

Das müssen Webdesigner natürlich bedenken, wenn sie an der Präsentation ihres Contents arbeiten. Nicht immer ist der Einsatz der CSS3-Layouttechniken ratsam – stattdessen kommt es auf das Zielpublikum des Projekts an, aber auch auf die Rolle, die das Feature im Projekt spielen sollen. Mit der richtigen Strategie und im richtigen Moment lässt sich aber Web-Content durch Layouttechniken wie CSS-Shapes, Flexbox und Multicolumn aber bereits deutlich aufwerten.

Aufmacherbild: old cracked brick wall background von Shutterstock / Urheberrecht: robert_s

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -