Zum Inhalt springen

Grid-Layouts: Endlich, ein Raster!

Rachel Andrew bei einem Vortrag über CSS Grid. Quelle: aneventapart.com

Ich habe mir in meinem Berufsleben angewöhnt, bei Website-Projekten Design und Programmierung möglichst „aus einer Hand“, also von ein und derselben Agentur einzukaufen.

Der Grund liegt auf der Hand: Die reinen Designagenturen kommen oft aus dem Werbe- oder Print-Sektor. Ihre Webdesigns sind wunderschön, oft opulent und begeistern alle Betrachter. Bis zu dem Moment, wo der Web-Entwickler sie sieht. Dann heißt es: Dies geht nicht, das ist nicht umsetzbar, wie soll jenes überhaupt funktionieren? Am Ende sind alle gefrustet: Die Designer, weil sich ihre schönen Entwürfe nicht umsetzen lassen, der Entwickler, weil er als Spielverderber dasteht, und ich als Kunde, weil ich diese Bruchstücke wieder zusammenfegen muss und entscheiden soll, wie es nun gemacht wird.

Was in Print funktioniert, geht im Web noch lange nicht. Diese Erfahrung ist immer wieder zu machen. Denn all die schönen Designs, die sich an einem Spaltenraster orientieren, müssen sich ja mit HTML und CSS erst mal darstellen lassen. Das Problem dabei: In InDesign kann ich ein Designelement wie zum Beispiel einen Infokasten einfach frei auf der Seite positionieren und weiß immer auf den Millimeter genau, wo er sich im Verhältnis zur Seitenbreite und -höhe befindet. Beim Webdesign geht genau das nicht, aus mehreren Gründen:

  1. Websites haben kein vordefiniertes Ende. Die Seite ist unten zu Ende, wenn es keinen Inhalt mehr darzustellen gibt.
  2. Bei der Positionierung kommt es auf die Bildschirmauflösung an: Ein hochauflösender 4K-Monitor wird mein Design völlig anders darstellen als eine zehn Jahre alte 17-Zoll-Möhre mit 1280 Pixeln Auflösung.
  3. Nicht jedes Ausgabegerät ist ein Computermonitor. Wie wird mein Designelement eigentlich auf Smartphones, Tablets oder Phablets dargestellt?

Hier kommt das neue CSS Grid-Layout ins Spiel. „Grid“ heißt ja ins Deutsche übersetzt nichts anderes als „Raster“ und genau das ist es: Grid teilt den zur Verfügung stehenden Platz in unterschiedliche Rastersegmente ein, die dann unabhängig voneinander mit Content befüllt werden können.

Ein Grid-Layout

In diesem Beispiel, das ich dem sehr empfehlenswerten Artikel von Jeremy Osborn entnommen habe, wird deutlich, was gemeint ist: Grid teilt meine Seite in eine Art Koordinatensystem ein, und wenn ich die Koordinaten einzelner Blöcke kenne, kann ich separat bestimmen, was mit diesen Layout-Blöcken zu geschehen hat. Zum Beispiel, dass sie grün oder gelb hinterlegt werden sollen.

Es ist nicht weniger als eine Revolution im Web-Design: Zum ersten Mal kann im Rahmen dieses Koordinatensystems eine Seite zweidimensional geplant werden. Anders gesagt: Indem ich die Seite rastere und für jedes Element eine Position relativ zu den anderen Elementen definieren kann, verschafft mir Grid die Möglichkeit, in bestimmtem Rahmen endlich Elemente auf einer Seite positionieren zu können wie in einem Print-Layout.

„It’s all just lines!

Rachel Andrew

Die britische Web-Entwicklerin Rachel Andrew, die als Expertin auf dem Gebiet der CSS-Entwicklung gilt, hat während eines Vortrags in Orlando treffend bemerkt, dass Grid für viele Menschen „aufregend, verwirrend und gruselig“ erscheint. Aber sie sieht vor allem die Vorteile: „You have choice for the first time!“

Aus ihrer Sicht gilt: Nicht bange machen lassen! Wenn man die Grundlagen von CSS verstanden habe, nämlich welche Eigenschaften von Elementen im Code an eingebundene Elemente „weitervererbt“ werden, dann gelte: „It’s all just lines!“

Rachel Andrew hat übrigens auch eine hilfreiche Website mit vielen nützlichen Beispielen für Grid-Layouts zusammengestellt. Das folgt ihrem Motto: „Making the Web available for everyone, that’s exciting!“

Published inContent StrategyDigitalesMedien

Sei der Erste der einen Kommentar abgibt

Schreibe einen Kommentar

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