Kleinere Arbeiten am Blogdesign
17. September 2007 – 17:09 Uhr
Motto: Was tut man nicht alles – nicht nur – für 100 Punkte?
Ich bin die Tage einmal dem guten Tipp von Roger Graf gefolgt und habe mein Blögchen dem Designbewerter des Designministeriums zum Fraß vorgeworfen.
Das ist nicht ganz akademisch bierernst gemeint, gibt aber doch interessante Aufschlüsse über die Qualität einer Website im Hinblick auf gewisse gestalterische Aspekte und des standardkonform und semantisch sinnvoll strukturierten Unterbaus (HTML und CSS).
Bewertet werden u.a. die Verwendung und der sinnvoll strukturierte Einsatz semantischer HTML-Tags wie Überschriften, Listen, Bockquotes, Label u.a.m.
Weiterhin Beachtung finden die verwendeten Fonts bzw. Schriftfamilien, die eingesetzten Farben hinsichtlich der Farbwerte und der Anzahl der eingesetzten Farben.
Wie werden Stylesheets für welche Medien eingesetzt und referenziert? Werden Abbildungen verwendet und damit die Seiten aufgelockert?
Man erhält ein Prüfergebnis mit z.T. gut nachvollziehbaren Detailergebnissen und eine Punktbewertung. Maximal 100 Punkte sind möglich. Abschließend kann man sich mit einem »Zertifikat« beglücken und damit gegebenenfalls auf der eigenen Seite protzen.
Das tue ich jetzt erst einmal gehörig: 
Für den normalen Blog-Index (die ›Startseite‹) erzielt mein Blögchen:
Für testweise ausgewählte und geprüfte Einzelartikel wie Rückzugsgefechte, Aufgezähltes, … oder Wer Meinung … gibt es ebenfalls:
Im Detail
Bei meinen ersten Testdurchläufen lagen die Ergebnisse irgendwo um 89 bis 93 Punkte, was mich nicht wirklich befriedigte. Wo knapp über 90 Punkte erreicht werden, müssen auch volle 100 Punkte möglich sein!
Die Hauptquelle der Unbill war schnell gefunden: Ich hatte tatsächlich viel zu viele verschiedene Farben eingesetzt (anfänglich hat das Tool 23 Farbdefinitionen gezählt!) und dabei zusätzlich an einigen Stellen nicht aufmerksam genug auf die Schreibweise geachtet. Doppelte Vorkommen von Farben lediglich aufgrund verschiedener Schreibweisen wertet das Tool als unterschiedlich: #F90 und #FF9900 oder #fff und #FFF werden differenziert und gezählt!
Einerseits ist das natürlich irgendwo fehlerhaft, aber es ist durchaus sinnvoll. Denn sauber aufgebaute und standardkonforme Stylesheets sollten durchgehend eine Schreibweise verwenden – empfohlen wird meines Wissens übrigens diejenige in Großbuchstaben und gegebenenfalls in Kurzform: #F90.
Darüber hinaus haben sich im Laufe der Zeit – ein bekanntes Problem bei Stylesheets, an denen über längere Zeiträume zur Verbesserung und Überarbeitung eines Layouts weitergearbeitet wird – kleinere Unpässlichkeiten eingeschlichen. So verwendete ich zwei minimal verschiedene Hellorange-Töne und auch zwei verschiedene Orange-Töne. Jeweils einer davon war zu einem späteren Zeitpunkt für ganz bestimmte Elemente hinzugekommen. Mit etwas größerer Aufmerksamkeit und Konsequenz hätte ich das eigentlich vermeiden müssen.
Also machte ich einen kompletten bewertenden Durchgang durch die Farbdefinitionen im Stylesheet und bin jetzt bei insgesamt nur noch 9 Farben angelangt. Außer der Tatsache, dass die Überschriften neuerdings im schon an anderen Stellen eingesetzten Dunkelrot anstelle des Standard-Orange gesetzt sind, dürfte diese Reduktion jedoch kaum wirklich auffallen.
Ein weiterer Aspekt des Feintunings aufgrund des Prüfergebnisses betraf die Abschaffung zweier Fälle von Inline-Styles (einer überflüssigerweise durch ein Plugin integriert) zugunsten definierter Klassen im Stylesheet. Das sorgt für Ordnung und hält Formatierungen aus dem Quelltext heraus.
An der semantischen Struktur der Quelltextes meines Blogs/Themes hatte der Designbewerter im Grunde nichts auszusetzen – was mich auch gewundert hätte. Das Theme stammt immerhin aus meiner eigenen Werkstatt (es basierte dereinst ganz ursprünglich auf dem ›Kubrick‹) und ich weiß schon so einigermaßen, was ich da tue.
Mein Fazit
Insofern ihr geneigten Leser webdesignerisch veranlagt seid, Interesse an standardkonformen Websites und Blogs habt (wehe, wenn nicht!) und selbst an euren Blog-Themes herumschraubt, solltet ihr einfach mal euren Blog-URL im Designbewerter eingeben und das Ergebnis zum Anlass nehmen, euch einmal genauer mit dem im Prüfergebnis angemerkten Lob und Tadel befassen. Es ist m.E. ein guter Ausgangspunkt für Verbesserungen und Überarbeitungen.
Ihr solltet darauf achten, sowohl den Blog-Index als auch verschiedene Einzelseiten zu prüfen, da diese sich wahrscheinlich bei vielen typisch aufgebauten Blogs strukturell deutlich unterscheiden.
So, jetzt lade ich mir noch mein Zertifikat herunter und bilde mir mächtig was drauf ein …
Und dann widme ich mich heute oder morgen noch einmal meinen Buttons in der Topnavigation.
Dieser Inhalt (Textbeitrag und Fotos) ist unter einer Creative-Commons-Lizenz BY-NC-ND lizenziert.
Im Autohaus wird...
Dir auch einen guten Rutsch! Hokey
Am 17. September 2007 um 19:49 Uhr
Angeber!
Und Glückwunsch. 
Wenn ich etwas besser mit CSS vertraut wäre, würde ich es ebenso machen wie du. Nun, die Sache mit den Farben sollte kein Problem sein – eher eine Fleißarbeit. Aber spätestens bei Inline-Styles (die auch noch durch Plugins begeündet sind – ohnehin, wie ich vermute, eine beliebte Fehlerquelle, die Plugins) muß ich wohl passen.
Ich bin dann schon froh wenn ich über 50 Punkte komme.
Am 17. September 2007 um 22:25 Uhr
In meinem Fall war es das »WP-Grins«, das für die Smilie-Auswahl zuständig ist. Das setzt einen kleinen Style-Block ins Blog, damit der Hand-Cursor beim Mouseover über die Smilies aktiviert wird. ich habe die Anweisung schlicht in mein Stylesheet übernommen und diesen Einzelblock im Plugin-Quelltext gelöscht.
Und dann hatte ich selbst noch ein paar Ad-Hoc-Inlinestyles irgendwann einmal eingebaut, die jetzt auch ins Stylesheet gewandert sind.