Layout-Raster

Wozu Raster-Elemente?

Viele Nutzerinnen und Nutzer sind mittlerweile nur noch mit Tablets oder Smartphones online. Um dieser Veränderung Rechnung zu tragen, sind Technik und Layout so konzipiert, dass sich die Inhalte an die Bildschirmgröße des Endgeräts anpassen.


Über Container können Inhalte auch nebeneinander auf der Seite angeordnet werden. Ohne Raster sind Inhaltselemente nur untereinander angeordnet.

Redaktionelle Hinweise

  • Wichtige Informationen immer oben auf die Seite setzen.
  • Neue Inhaltselemente können im Raster angelegt werden oder bereits vorhandene Elemente per Drag and Drop in das Raster verschoben werden.
  • Benennen Sie auch Container und stellen Sie den Typ bei Bedarf auf "verborgen" - das erleichtert Ihnen die Übersetzung der Seite.
  • Prüfen Sie, wie die Seite in anderen Ausgabegeräten angezeigt wird (Web/Ansicht).

Wichtig: kein Raster in ein Raster einfügen!

Flexibles Layout

Grundlage ist...

... ein flexibes 16er Raster. Das Raster ermöglicht ein Anpassen der Seite an verschiedene Ausgabegrößen. Mobile Endgeräte, Landscape-, Portraitformat, etc.

Ansichten im Backend

Das über diesem Bild gezeigte Rasterelement

Beispiele Ansicht Frontend

8:8

Typoblindtext

Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen.

Bild: Paavo Blafield

10:6

Bild: Fiona Körner

Typoblindtext

Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen.

6:10

Typoblindtext

Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen.

Bild: Fiona Körner

12:4

Typoblindtext

Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen.

Bild: Presse Uni Kassel

4:12

Typoblindtext

Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen.

Bild: Knut Wiarda

33:33:33

Typoblindtext

Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen.

Bild: Presse_Uni_Kassel

Beispiel Teaser

Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen.

25:25:25:25

Typoblindtext

Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen.

Bild: Sonja Rode

Typoblindtext

Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen.

Bild: Fiona Körner