Jetzt geht es meiner Erkältung schon wesentlich besser (Oder war es doch »nur« Heuschnupfen, ich kann das oft nicht auseinander halten), somit bin ich in der Lage, ein paar ausführlichere Worte über das neue Layout zu schreiben.

Grundidee

Eigentlich habe ich nur aus Neid rebootet. Weil ich die ganzen einspaltigen Layouts so toll fand, die um mich herum gesprießt sind: Ralles Zwischenversion des Netzbuches fand ich toll, Erics Einspalter mit den riesigen Headlines und natürlich einige Tumbleblogs.

Es sollte also ein Einspalter werden, doch gleichzeitig mussten schon ein paar Meta-Informationen mit ins Spiel, die normalerweise in einer Seitenleiste untergebracht werden. Wohin also damit? Viele Einspaltendesigner packen den ganzen Kram ja inzwischen ganz unten in eine relativ separate Box, wo er nicht stört. Möglich, aber doof. Ich wollte den Kram einerseits stets präsent, andererseits aber möglichst Platz sparend platziert wissen. Also griff ich auf die Klapp-Idee zurück.

Dass die Schrift generell groß sein sollte und das gesamte Layout elastisch, ergibt sich ganz logisch aus den Überlegungen über größere Auflösungen bei Flachbildschirmen und der Unmöglichkeit, im Jahre 2006 noch auf feste Pixelwerte zu setzen.

Die Grundidee des Layouts entstand komplett im Kopf und sieht auch jetzt in der endgültigen Version fast genauso aus, wie ich mir das vorgestellt hatte. Es gab übrigens keine Zwischenversion als Photoshop- oder Illustrator-Zeichnung. Ich habe alles direkt in das CSS-File geschrieben. Meine Werkzeuge sind Textwrangler und Firefox Live-CSS-Edit.

Knackpunkt Aufklappstreifen

Der größte Hingucker/Aufreger ist natürlich die Idee mit den klappfähigen Meta-Informationen. Ich habe sie im HTML- und CSS-Text liebevoll »Blogtoys« genannt. Und um es gleich vorweg zu nehmen: Es gibt hier keine perfekte Lösung, die sowohl JavaScript-Nutzer als auch -Verweigerer zufrieden stellt.

Das Problem liegt vor allem in der Tatsache, dass das JavaScript, welches die Streifen überhaupt erst dynamisiert, erst dann ausgeführt wird, wenn die Seite fast vollständig geladen ist. Dies hatte zur Folge, dass bei jedem Seitenaufruf alle Streifen für etwa 2 bis 3 Sekunden aufgeklappt waren, bevor das JS sie zuklappen konnte. Unglaublich hässlich. Eine JS-Funktion, die in der Lage ist, bereits direkt nach dem Laden des DOM-Baums ein Skript auszuführen, funktionierte leider nur instabil und unvorhersehbar.

Somit musste ich schweren Herzens die Blogtoys per CSS standardmäßig zuklappen, und somit alle JavaScript-losen Surfer aussperren. Doch einen kleinen Kompromiss fand ich trotzdem: Per :hover-Pseudoklasse kommt man auch an die Funktionen der Blogtoys dran – wenn auch etwas umständlich und hakelig.

Nun stört mich nur eines: In den zwei oder drei Sekunden, in denen die Seite noch nicht vollständig geladen ist, klappen die Streifen bisweilen trotzdem noch auf – abhängig davon, wo der User gerade mit seinem Mauszeiger herumstreift. Ich bin mit dieser Lösung noch nicht 100%ig happy – mal sehen, ob sich da noch was Besseres findet.

Inhaltliche Vereinfachung

Ich habe generell ein wenig zusammengedampft, denn eigentlich geht es hier doch nur um ein privates Blog. Da ich keine eigene Firma gegründet habe und auch sonst keine potenziellen Auftraggeber beeindrucken muss, konzentriere ich mich nun auf das Wesentliche: Text und Bild. Die portalig angehauchte Startseite ist gewichen und auch der Podcast ist nun wieder ausgegliedert. Ich bin hier ja seit langem nicht mehr so aktiv, wie ich es mal war. Mal sehen, ob ich in Zukunft überhaupt noch Zeit dafür finde. Ebenfalls gestrichen: coComments (Nutzt keiner) und Favatare (Zu instabil und klein). Ich halte mich jetzt wieder an die allseits beliebten Gravatare, weil sie so schön gebräuchlich sind. In Zukunft also beim Kommentieren bitte Eure E-Mail-Adresse nicht vergessen, auch wenn sie keine Pflicht ist.

Mir geht die allgemeine Völlerei in den Weblogs ein wenig auf die Nerven. Links und rechts zugeknallte Leisten mit hunderten von Listen, Thumbnails, aggregierten Informationen, Badges, Mitgliedschaften, usw. Wunderbar. Doch wer nutzt diese Informationen wirklich? Die Leser des Blogs? Oder sind das alles wichtige Services für den Autor, damit er sein Blog wie ein Magazin wirken lassen kann? Dabei ist das Unsinn: Ein Blog ist ein Blog, und das ist gut so! Je weniger der Blogger von seinen eigentlichen Texten ablenkt, desto klarer werden seine Aussagen wahrgenommen. Oder wollen die alle nur davon ablenken, dass sie gar nicht interessant schreiben können?

Typografie, Layout, Farben

Die neue Prägnanz ist letztlich ein beliebig langes vertikales Band mit horizontalen Akzenten. Zeilenlänge und Zeilenabstand sind optimal lesbar gewählt und skalieren prinzipiell stufenlos mit, wenn der User den Schriftgrad an seine Bedürfnisse anpasst. Als Lauftext habe ich die Lucida Grande gewählt, weil sie als Mac-OS-X-Systemschrift am Bildschirm optimal lesbar ist. Windows-User erhalten als Ersatz die »Lucida Sans Unicode«, die ebenfalls ein sauberes Bild abgibt und dank des MS-Office-Paketes auch relativ verbreitet ist. Für Überschriften kommt die Georgia in ihrem formschönen regular-Schnitt zum Einsatz

In der Normalansicht beträgt die Spaltenbreite ca. 450 Pixel, der Standardschriftgrad ist mit (berechneten) 14,133px ungewöhnlich groß gewählt. Doch hier wird die Zukunft zeigen, ob nicht gerade das angemessen sein wird.

Keine Experimente bei der Farbe: Das Prägnanz-Grün #090 ist die einzige farbliche Auszeichnung der Website und kommt in Überschriften, Hyperlinks und vielen grafischen Elementen zum Einsatz. Die Wahl einer einzigen Farbe mag zwar eintönig und unspannend wirken, es erhöht jedoch eindeutig die Prägnanz der Optik und schafft außerdem spielend den visuellen Übergang zur alten Website.

Keine Frage, praegnanz.de bleibt praegnanz.de: Auch mit dem radikal neuen Layout kann man die Website ohne Probleme identifizieren. Das liegt vor allem an der Farbe und der weiteren Verwendung des Fonts Georgia regular für Überschriften. Was sich verändert ist die Fokussierung auf den eigentlichen Inhaltsbereich, eine Vertikalisierung der gesamten Wahrnehmung und deutlichere Größenkontraste in der Typografie.

Schlussworte

Jede Änderung eines Designs kostet Gewöhnung. Auch ich bin noch nicht in die neue Prägnanz hineingewachsen. Und natürlich wird es noch an vielen Stellen Anpassungen, Ergänzungen und Korrekturen geben. Es ist ein Prozess. Aber irgendwo muss man ja mal anfangen. Das alte Design war an sich nichts besonderes – ein Blogdesign unter vielen. Nur das Gras und der konsequente Einsatz von Grün machte es ein wenig besonders. Doch das Grün werden wir alle während und nach der Fußball-WM eh nicht mehr ertragen können, und außerdem kann ich es nicht verantworten, wenn alle coolen Webdesigner mit neuen, frischen Ideen an meinem fast 2 Jahre alten Design vorbeiziehen!

Und so ein radikaler Wechsel des Grundgerüsts tut manchmal extrem gut. Nur wer radikal ist, kann gewisse Grundideen und Prinzipien deutlich machen. Ich hoffe, dies ist mir gelungen! Und ich muss sagen: So langsam macht es Spaß, hier zu schreiben und Kommentare zu lesen.