Details zum Update – Raster und Kopf

Details zum Update – Raster und Kopf

Statt einen riesigen Text mit Details vollzustopfen, die nur einen Bruchteil der Leser interessieren, pflücke ich das Ganze etwas auseinander. Heute möchte in ein paar Worte zum Raster und zum Kopf der Seite verlieren. Das Grundraster ist nur eine Erweiterung des alten Rasters. Man muss sich vor Augen halten, dass diese Gestaltung einmal für eine Auflösung von 800×600 Pixeln vorgesehen war, was erklärt, wieso in einigen alten Artikeln, die Bilder so winzig sind. Losgelegt habe ich hier einmal mit einer Hauptspalte von 468 Pixeln. Auf dieser alten Bildbreite basiert heute noch das Raster, was schließlich nun aus 18 Spalten mit je 41 Pixel Breite und einem Spaltenabstand von 20 Pixeln besteht. In dieses Raster passen alle alten Inhalte und ich habe genug Spielraum, um alles völlig variable zu platzieren. Keine Allround-Lösung, aber meine Lösung für diese Seite.

Ein Wort zum Grundlinien-Raster. Grundlinien-Raster ist eines dieser Schlagworte, die sich in der Praxis nicht 100% umsetzen lassen. Spätestens wenn Bilder den Float in eine halbe Zeile zwingen, brechen alle folgenden Elemente aus dem Raster. In Frage käme alle Bilder in der Höhe passend zu bemaßen, aber da rechtertigt der Aufwand niemals den Nutzen. Auf dieser Seite passiert zuviel Ungewöhnliches, um ein Grundraster wirklich konsequent durchzuziehen.

Kopfelement

Der Kopf hat hier schon eine sehr durchlebte Vorgeschichte. Selbst bei der vorherigen Version brauchte es 3 verschiedene Ansätze, bevor schließlich gefunden war, was sich ein gutes Jahr bewährt hat.

Kopfelement Version 6

Kopf der vorherigen Version, der damals auch schon mehrfach verändert wurde.

Die alte Version hat für die Startseite selbst gut funktioniert, für eine einzelne Inhaltsseite aber weniger gut. Wenn ich gar eine einzelne Seite individuell gestaltet habe, war der Kopf immer viel zu dominant und wirkte deplaziert. Dies musste ich ändern. Der Kopf sollte so neutral wie nur möglich sein, ohne aber jemals als Kopf ignoriert zu werden. Essentiell war, endlich die Teaser-Bildchen angemessen darzustellen und obendrein musste alles noch so rund wirken, dass es auf jeder Ebene der Seite funktioniert.

Die Größe und Position dieser ganz wenigen Elemente im Kopf so festzulegen wie sie jetzt dargestellt werden, hat praktisch die längste Zeit der Gestaltung in Anspruch genommen. Ich habe irgendwann aufgehört zu zählen, bei welchem Versuch ich nun war. Bis schließlich dies hier zu sehen war:

Kompositionen Version 7

Was übrig bleibt sind wirklich nur Elemente, die ich hier für essentiell halte. Warum dieser Kasten oben links? Gleichgewicht zum Teaserbild und Überbrückung zum Logo. Ohne diesen Kasten entsteht da ein Loch auf der Startseite, dass einfach nicht funktioniert.

Logografik

Zuvor hatte ich das Problem das Kopfelemente auf verschiedensten Hintergründen funktionieren müssen. Dafür brauche ich logischerweise auch mal die Negativ-Version des Logos, vorher eine separate Grafik. An diesem Punkt möchte ich auch betonen, dass hier nur ein echtes 24-Bit PNG in Frage kommt. Gerade für diese Zwecke ist dieses Format perfekt.

Diesmal wollte ich alles richtig machen und habe eine einzige Grafik erstellt. Die beinhaltet alle benötigten Tonwerte, welche dann am Schluss mit CSS in die richtige Position gerückt werden. Klingt komplizierter als es ist. Wichtig ist nur eine einzelne Grafik und ein wechselnder CSS-Wert lassen das Logo auf wirklich allen Hintergründen funktionieren. Unter dem Begriff CSS Sprites findet man dazu endlos viele Tutorials. Statt halt alle möglichen Grafiken separat zu laden, packt man alle in ein großes Bild und positioniert dieses, so wie man es braucht.