Out of the rectangular box – CSS Shapes bringen Content in Form
Kommentare

Farben, Formen, Buttons…es gibt viele Möglichkeiten, Text hervorzuheben und den Blick des Lesers auf die wirklich wichtigen Informationen zu lenken. Bilder, die von Text umflossen werden, Text, der

Farben, Formen, Buttons…es gibt viele Möglichkeiten, Text hervorzuheben und den Blick des Lesers auf die wirklich wichtigen Informationen zu lenken. Bilder, die von Text umflossen werden, Text, der aus dem Hintergrund heraussticht und dem Leser damit sofort ins Auge fällt – all das sind Gestaltungsoptionen, die bisher hauptsächlich im Print genutzt werden konnten. Für das Web gab es bisher so gut wie nur eine Form: das Rechteck. Hingucker wie abgerundete Ecken und Animationen sind eher Spielereien; wirklich nutzbar, um Elemente hervorzuheben, sind sie meistens nicht. Doch langsam aber sicher kommt die Formenvielfalt auch ins Web – zum Beispiel mithilfe von CSS-Shapes.

Content mit CSS Shapes in Form bringen

Als Webentwickler fühlt man sich manchmal vielleicht den Gestaltungsmöglichkeiten beraubt, die einem der Print bieten könnte. Kein Wunder, ist man bisher doch sehr eingeschränkt gewesen, wie man Text-Elemente auf Websites ansprechend darstellen konnte. Mit rechteckigen Boxen lassen sich eben nur schwer Effekte, etwa den Text in einer bestimmten Form darzustellen, erzielen, zumindest, wenn man nicht in mühevoller Kleinarbeit jede Zeile einzeln einrücken und anpassen will.

Razvan Caliman schreibt in seinem Tutorial Getting Started with CSS Shapes über die Einführung von CSS Shapes, das Webdesignern erlauben soll, Inhalte in nutzerspezifischen Formen umzubrechen – etwas, das in Print-Magazinen schon lange Standardpraxis ist.

Mithilfe von CSS Shapes können Formen wie Kreise, Ellipsen und Polygone manuell definiert werden oder aus Bildern angedeutet werden, um Inhalte hervorzuheben. Wie genau man CSS Shapes nutzt, um die einzelnen Formen zu produzieren, erklärt Razvan Caliman detailliert und mit Code-Beispielen in seinem Tutorial.

Content in Form: Ablenkung oder Hervorhebung?

Zwischen Content-Darstellung in Print und Online gab es bisher einen sehr gravierenden Unterschied: die Gestaltungsmöglichkeiten. Print hat sehr viel mehr Möglichkeiten, den Content in Form zu bringen, etwa, ihn in Gestalt einer Zahl darzustellen oder eine Grafik von ihm umfließen zu lassen.

Bei der Darstellung im Web ist man sehr viel eingeschränkter: man hat seine Elemente und stellt sie in rechteckigen Boxen dar. Experimentelles Layout: Fehlanzeige, weil die Möglichkeiten fehlen.

Content mit Hilfsmitteln wie CSS Shapes in Form zu bringen, könnte das ändern. Text kann damit hervorgeben werden, was zum Beispiel dazu führt, dass der Fokus des Lesers auf die wichtigen Informationen gelenkt wird. Gleichzeitig sorgt ein Layout, das nicht komplett gradlinig ist dafür, dass die Website durch die visuelle Aufbrechung ansprechender für den Leser ist – immerhin gibt es dort mehr zu sehen, als Text, Text und noch mehr Text, der sich hart von allen anderen Elementen abgrenzt.

Doch genau dort liegt auch die Gefahr, den Fokus des Lesers zu verlieren. Dies ist bei manchen Formen sicher wahrscheinlicher, als bei anderen. Lässt man den Content zum Beispiel halbkreisförmig um eine Grafik herumlaufen, fällt es dem Leser schwerer, sich auf den Text – und damit die Informationen – zu konzentrieren, weil der Blick automatisch zum nebenstehenden Bild driftet.

Darstellung Kreisform CSS-Shapes

Screenshot: Darstellung Content an Kreis angepasst

Es ist also eine Frage des persönlichen Geschmacks, ob sich das Umbrechen von Content um oder in einer Form für das eigene Webprojekt anbietet. Es ist in jedem Fall ein Hingucker – zumindest, wenn er sparsam eingesetzt wird, um ein Sattsehen zu vermeiden.

Genauso muss man sich überlegen, wie eine solche Darstellung im Responsive Design funktioniert. Wenn am Ende nur noch einzelne Buchstaben auf dem mobilen Gerät dargestellt werden, wenn der Content sich zwischen zwei Formen befindet, sollte man vielleicht besser auf das Einfügen von Formen verzichten, um eine schlechte User Experience zu vermeiden.

Aufmacherbild: Stones in the water von Shutterstock / Urheberrecht: Nadina

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -