Farbenspiel

Während des Redesigns meiner Website bin ich auf eine nützliche Seite gestoßen, die verschiedene Farbtools bietet. Man kann sich auf Basis einer Farbe unterschiedliche Farbschemata anzeigen lassen, die Farbe mit verschiedenen anderen Farben mischen lassen und anderes mehr. Äußerst hilfreich, wenn man nach passenden Farben für eine Website sucht.

Viel Spaß mit diesem Colour Selector!

Dokumentation der Verbesserungen an Sylvia's Home

Den Quelltext habe ich gründlich überarbeitet. Eine Menge überflüssige(r) Quelltext und Kommentare sind rausgeflogen. Außerdem habe ich den Quelltext übersichtlicher strukturiert. Die meisten Style-Angaben habe ich aus dem Quellcode genommen und dafür Anweisungen im CSS erstellt. Der Hauptzweck der ganzen Aktion war, die Website barriereärmer zu gestalten.

Äußerliches:

Die auffälligste Veränderung - abgesehen vom neuen Design - ist der Footer. Dieser wurde mit der Anweisung "clear: both;" vesehen, so dass die gefloatete Subnavigation schön im Container bleibt. Außerdem beinhaltet er neben dem Copyright-Hinweis einen Link zur Sitemap, die dadurch von allen Seiten aus erreichbar ist.

Ich habe auch ein neugebasteltes Favicon eingebunden. Leider mag Safari es nicht anzeigen. Seufz!

Aus dem Hauptmenüpunkt "Gästebuch" wurde "Kontakt". Dort findet man nun neben dem Link zum Gästebuch den E-Mail-Link.

Der Haupttext ist jetzt in Blocksatz gehalten. Das gefällt mir einfach besser.

Optische Verbesserungen:

Ich habe die Schriftgrößen in allen Bereichen erhöht, um die Lesbarkeit zu erhöhen. Zumindest im IE6 wird die Schrift nun auch schöner dargestellt.

Es hat sich herausgestellt, dass kursive Schrift zur Hervorhebung von Textstellen einfach nicht ausreicht. Deshalb werden Textstellen jetzt im Grün der Überschriften hervorgehoben. Derzeit zu sehen in den Beschreibungen auf den Eingangsseiten zu den Unterbereichen.

Überschriften und Links haben jetzt unterschiedliche Farben.

Den Websitetitel im Logo habe ich nun absolut positioniert. Das wirkt sich positiv aus, wenn ein Besucher die Schrift über den Browser vergrößert. Man müsste die Schrift schon extrem vergrößern, um den Logotext noch "aus der Spur" zu bringen.

Usability:

Am Anfang jeder Seite habe ich die Sprachangaben ergänzt, damit ein Screenreader erkennt, welche Sprache er da vorliest. Dasselbe habe ich bei Abschnitten gemacht, in denen ein Sprachwechsel stattfindet.

Die Subnavigation ist jetzt passenderweise in eine ungeordnete Liste verpackt.

Die Rubriken "Aktuelles" bzw. "News" auf den Startseiten sind nun auch nicht mehr fälschlicherweise in Definitionslisten vergraben, sondern wurden in h3- bzw. p-Elemente gesteckt.

Auch alle Absätze habe ich in p-Elemente verstaut.

Für mein Zahlenspiel habe ich mir die Mühe gemacht, die jeweilige Zahlenreihe im Alt-Text zu wiederholen, damit jemand, der das Bild nicht sehen kann, auf den Alt-Text zurückgreifen kann. Damit wird das Zahlenspiel auch für solche Besucher spielbar.

Sylvia's Home mag damit noch nicht ein Vorbild für Barrierefreiheit bzw. -armut sein, aber ich bin sicher, obige Verbesserungen stellen einen großen und wichtigen Schritt in die richtige Richtung dar.

Sylvia proudly presents ...

Es ist soweit! Die Generalüberholung von Sylvia's Home ist abgeschlossen und die neugestylte Site ist seit gestern Abend online. Ich finde, sie sieht jetzt frischer und fröhlicher aus.

Alle HTML-Seiten, die ich bisher getestet habe, validieren- so wie das CSS. Nur der Internet Explorer ist hier und da etwas kreativ in der Darstellung. Aber das lässt sich verkraften. Ich werde bei Gelegenheit versuchen herauszufinden, woran das liegt.

Ich hoffe, dass ich am kommenden langen Wochenende dazu komme, hier zu dokumentieren, was ich am Markup alles verbessert habe. Außerdem muss noch das Gästebuch dem neuen Aussehen angepasst werden.

Alles in allem war es viel Arbeit, aber es hat sich mit Sicherheit gelohnt.

Vorgeschmack auf neues Design

Die Generalüberholung von Sylvia's Home ist bald abgeschlossen. Neben der Überarbeitung der HTML-Seiten konnte ich es nicht lassen, auch ein neues Design auszuarbeiten.

Neben einem neuen Headerbild wird es auch eine neue Farbgestaltung geben. Als kleinen Vorgeschmack habe ich schon mal die Farben von Sylvia's Home News angepasst.