ReDesign – tagSeoBlog.de aufgefrischt

ReDesign – tagSeoBlog.de aufgefrischt

Website reDesign
Website reDesign

Nur eine kleine Nachricht, die endlich mal die Webdesign-Ambitionen dieses Blogs in den Vordergrund rückt. In meinem Einleitungstext habe ich fomuliert: „SEO optimiert Websites für Suchmaschinen – Webdesign optimiert Websites für Menschen.“ Und drei Monaten nach dem Blog-Start habe ich nun das Design etwas angepasst. Aber zunächst ein paar Worte zum bisherigen Design: Im Vordergrund der visuellen Erscheinung stand zunächst die „Wiedererkennung„. Dir orangen Streifen oben scheinen mir in der mir bekannten Blog-Szene relativ unbenutzt. Das zugegeben nichtssagende Flugzeug (das „j“ des Fonts „Webdings“) sitzt da ganz gemütlich drin. Ich denke, dass der erste Schritt „Blog-Optik“ einigermaßen hinhaut. Daher komme ich jetzt zur Phase 2 des Designs: Klarheit und Orientierung. Da hatte das bisherige Erscheinungsbild noch arge Defizite. Insbesondere die Navigation war so übersichtlich wie der Hauptbahnhof von Delhi. Besonders störend war die rechte obere Ecke. Zur Erinnerung hier noch mal zwei Screens – links das alte, rechts das neue Design:

TagSeoBlog reDesign April 2009
TagSeoBlog reDesign April 2009 - links: altes Design und Problemzonen - rechts überarbeitetes Design

Die Problemzonen

An den dreiteiligen Layout (Header und Site-Navigation, links Posts, rechts Post-Navigation) habe ich festgehalten. Es kann die Erfordernisse dieses Blogs gut strukturieren. Auf dem Screen links kann man die Problemzonen des alten Entwurfes erkennen. Zunächst war die Navigation oben völlig unbrauchbar [1], weil optisch viel zu versteckt. Das Ganze wurde rechts durch ein paar verlängerte Streifen begrenzt, die den Blognamen oben rechts unterstützen sollten [2]. Darunter habe ich ein paar Tage nach dem Blogstart dann den Feedburner-Counter gesetzt [3]. Ursprünglich hatte ich der in die Fußleiste angesiedelt. Aber dann schien mir der Counter insbesondere in der Startphase doch für viele interessant zu sein. Kurzum: die rechte obere Ecke war eine grafische Katastrophe. Ich habe die Streifen oben daher unten abgeschnitten und nach rechts absaufen lassen. Das tagSeoBlog habe ich etwas kleiner und grau gesetzt. Dadurch wirkt es viel klarer und angenehmer. Darunter tut nun eine klassische Navigations-Leiste ihre Dienste. Jeder, der über google, youTube oder woher auch immer hierher findet, weiß nun ganz genau, welches die wesentlichen Stichworte sind, um die es hier geht. Die standardisierte Navigationbar ist Usability pur.

In die Sitebar rechts hatte ich vor einiger Zeit eine iGoogle-Spielerei mit meinen Kunstbilder-Details gesetzt [4]. Das brachte irre viel Unruhe. Keine Ahnung, ob das jemals jemand durchgeklickt hat. Egal, es hat die Bilder und Videos links erheblich gestört. Also raus damit. Darunter fand dann mein SEO-Bilder-Tool Platz. Für einen SEO-Blog ist es immer schön, ein oder mehrere Tools anzubieten. Habe ich also auch eines gebaut. Mit dem „Image Check | keyword-Analyse Tool für Bilder-Auswertung BETA“ kann man die Bilder eine Webseite auf ihre „Keyword-Tauglichkeit“ prüfen. Nur der Navigationspunkt in der Sitebar [5] war mehr als unglücklich.

Schlussendlich waren auch die einzelnen Post optisch relativ zerfasert. So habe ich (dusseliger Weise)unter die Überschrift eine grob-gepunktete Linie als eine Art Unterstreichung gesetzt [6]. Wieder so eine Kopfgeburt, die mehr Schaden anrichtet als Sinn stiftet. Folglich ist die Linie nun weg, der Text beginnt gleich nach der Überschrift – so wie es auch eigentlich sein soll. Und am Ende eines Post saß dann immer noch so ein Klumfuß, der an Unübersichtlichkeit kaum zu überbieten war. Tags, Kategorie, Datum, Kommentar-Anzahl – wurschteliges Kauderwelsch [7]. Ich habe daher die überflüssigen Tags an dieser Stelle in die Tonne getreten. Nun sieht man die Kategorie, in der der Post abgelegt wurde, dann das Datum und am Ende die Anzahl der Kommentare.

Die Sitebar zeigt nun neben einem kurzen, wichtigen Hinweis über den Autor nur noch Post-Navigation. Zuerst die „Letzten Beiträge“, dann die „letzten Kommentare“ und Kategorien. Es folgt noch eine kleine Archiv-Übersicht und anschließend ein paar Blogroll-Links.  Die Fußzeile habe ich unverändert belassen. Neben den vier Blog-Katalogen, in denen ich mit dem tagSeoBlog eingetragen bin, gibts einen footer-Link zu meiner Firma DUPLICON. Und fertig is.

Sehr wichtig für die Lesbarkeit ist eine kleine, aber wichtige Änderung: endlich konnte ich mich von dem Blocksatz „justify“ lösen und die Zeilen rechts ausflattern lassen. Schon ewig ringe ich mit mir selbst: während der Blocksatz natürlich insgesamt harmonischer aussieht, macht das unterschiedliche Spacing den Text aber eindeutig schwerer lesbar. Und da es hier in erster Linie um gut lesbaren Text gehen soll, habe ich nun also einen linksbündigen Text, der rechts rumflattert. Naja, mal sehen…

Kurz und knackig – Hauptsache effektiv

Homepage
Homepage

Durch das überarbeitete Design werden nun natürlich andere Baustellen deutlich. Das größte Manko ist dabei sicherlich die Blog-Navigation. Die Kategorien sind Mist und Nichts-sagend. Ich finde meistens meine eigenen Posts nicht mehr, wenn ich sie suche. Aber fürs erste soll es genug sein. Ein kleiner Blog verdient auch nur ein kleines reDesign. Es macht aus meiner Sicht keinen Sinn, sich jetzt tage- oder wochenlang mit dem Erscheinungsbild rumzuplagen. In meiner Jugend habe ich immer die „optimale Lösung“ gesucht – und dann meist nach wochenlanger Arbeit mit völlig widersprüchlichen Entwürfen eine verkopfte Kompromisslösung genommen. Unschlau, uneffektiv und uninteressant. Heute nehme ich mir je nach Projektgröße ein paar Stunden (für Kunden auch mal Tage ;-) ) und ziehe die Sache dann durch. Ich lebe lieber mit eine paar neuen Baustellen, als dass sich monatelang nichts tut.

Webdesign reDesign - tagSeoBlog April 2009
Webdesign reDesign - tagSeoBlog April 2009

Das neue Design wird nun diesen Blog durch die nächsten drei Monate tragen, bevor ich dann irgendwann im Sommer die Erleuchtung in Sachen Navigation haben werde – und die Phase 3 des tagSeoBlog-Designs angehe: die Usability.

Weiterführende Artikel

Kommentare sind geschlossen.