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 800x600 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.
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:
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.
2 Kommentare
Auch wenn’s nur bedingt zum Artikel gehört: Ich finde die aktuelle Farbwelt (weiß, schwarz, grau, rot?) zwar nicht schlecht. Die Versuche mit dem alten Gold, die ich zwischenzeitlich mal gesehen habe, fand ich aber schöner. Hatte mehr … Eigenes.
Gelb hat ein etremes Problem im Web, besonders wenn man es so “pur” einsetzt. Ich habe wirklich alles geshen: zu wenig Kontrast, zu Grünliches, zu Dreckiges nur nicht, was vorgesehen war. Dies ist ein Problem, was ich bisher nicht wirklich in den Griff bekommen habe, ebenso wie der Kontrast einiger Effekte, z.B. das Datum auf der Blogspalte des Titels. Mein Monitor zu Hause ist richtig dunkel eingestellt um ein absolutes Schwarz für Spiele zu erreichen. Damit sehe ich kaum mehr das jeweilige Datum auf der Titelseite.
Rot erschien mir erstmal als sichere Bank. Ist ein Kontrast, der selbst auf mies kalibierten Displays immer funktioniert. Heißt ja nicht, dass es immer so bleiben wird. Arbeite ja auch noch das CSS auf, um solche Details einfachst ändern zu können.
Vorschau:
HTML ist in Kommentaren zugelassen. Erlaubt sind die HTML-Tags:
<a href>, <i>, <p>, <strong>, <em>, <ul>, <ol>, <li>, <blockquote>.
Alle themenfremden oder persönlichkeistverletzenden Beiträge werden gelöscht, also immer schön sachlich argumentieren.
schrieb: