Testdesign 5

Es gibt ein neues Testdesign. Ziel war es, einen Container mit fester Breite und Höhe sowohl horizontal als auch vertikal zu zentrieren.

Die Methode besteht darin, den Container zuerst um 50% des Viewports nach unten und nach rechts zu verschieben (mittels absoluter Positionierung) und dann über negative Margins in Höhe der halben Containerbreite wieder nach links und in Höhe der halben Containerhöhe wieder nach oben zu korrigieren.

In meinen Browsern auf MacOSX (Safari, Firefox, Opera) klappt das auch prima. Verschiedene Browser auf anderen Systemen bekommen das mit der vertikalen Zentrierung allerdings nicht so ganz hin.

Hübsch geworden ist es trotzdem. Vielleicht finde ich ja noch heraus, wie man das mit der vertikalen Zentrierung in anderen Browsern bzw. auf anderen Systemen auch hinkriegt.

Kontaktformular

Meine Website hat nun ein Kontaktformular. Nach einigen Tests und Verbesserungen scheint es nun gut zu funktionieren. Laufen tut das Ganze über den Formular-Chef - ohne Anmeldung, ohne Installation.

Test-Design 4

Meine kreative Ader hat sich mit einem vierten Test-Design mal wieder ihr Recht verschafft.



Hauptaufgabe war es dabei, den aus sechs Absätzen bestehenden Text in zwei Spalten zu kriegen.

Zuerst habe ich die sechs Absätze einzeln gefloatet und gecleart, was in Firefox, Opera, Safari und IE7 auch prima funktioniert hat. Leider hat IE6 nicht mitgespielt.

So blieb mir letztendlich nichts anderes übrig, als um die beiden Spalten jeweils ein zusätzliches div zu legen und diese, sowie das sie (und die Überschrift) umschließende div, zu floaten.

Nun ja, Hauptsache, das Ergebnis stimmt.

Neues Foto

Ich habe ein neues Foto von Linda und Stefanie auf die Website gestellt.

Die beiden haben nun anstatt der bisher jeweils drei getrennten Seiten eine gemeinsame Seite, wo ich hin und wieder mal ein neues gemeinsames Bild reinstellen werde.

Zwei Website-Verbesserungen

1. Der Footer wird nun auch im IE durchgängig korrekt angezeigt, d.h. ohne zusätzliche Abstände. Das Problem lag an einem IE-spezifischen Konzept namens "hasLayout" und ich habe das Problem gelöst, indem ich dem Footer eine Höhe zuwies.

2. Ich habe den roten Seitenhintergrund etwas aufgehellt. Er sieht jetzt nicht mehr gar so mächtig aus.

Gästebuch deaktiviert

Da mein Gästebuch bei freenet schon seit längerem nicht mehr erreichbar war und es auch nicht so aussah, als ob freenet das in Ordnung bringen kann oder will, habe ich meinen Account dort nun deaktiviert. Somit ist mein bisheriges Gästebuch Geschichte.

Ob ich ein neues Gästebuch von einem anderen Anbieter anschaffen werde, weiß ich noch nicht. Mal sehen.

Sitescore

Ich habe meine Website von Sitescore testen lassen und das ist das Ergebnis (Höchstpunktzahl ist 10):



Ich finde, das kann sich sehen lassen!

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.

Generalüberholung

Meine Website braucht eine Generalüberholung. Frühjahrsputz ist angesagt.

Der Quelltext muss bereinigt werden - zu viele Umbrüche anstatt Absatz- und Listenelemente, zu viele unnötig gewordenen Kommentare. Kleinere und größere Veränderungen, allen voran ein Footer unter dem Textbereich, der den Copyright-Hinweis und einen Link zur Sitemap aufnehmen wird - und mit "clear: both;" versehen wird, damit die gefloatete Subnavigation nicht mehr über den Rand des Containers hinausfließen kann.

Ob sich am Aussehen viel ändern wird? Wir werden sehen.

Sitemap

Ich habe meiner Website eine Sitemap spendiert. Diese ist auf der deutschen und der englischen Startseite verlinkt.

Wer sich von dort aus erst mal einen Gesamtüberblick über die Website verschaffen will, kann das nun anhand der Sitemap tun.

Davon abgesehen gibt es ja auch noch für jeden Hauptbereich eine Einführungsseite, die kurz beschreibt, was der Bereich zu bieten hat.

Webdesign-Spielwiese

Um meine neu gewonnenen Kenntnisse testen zu können, habe ich eine kleine Webdesign-Spielwiese eröffnet. Dort werde ich den selben Inhalt in immerwieder neues CSS verpacken. Was dabei herauskommt, ist über die Seite 'Webdesign' zu erreichen.

Kleine Änderung der Startseiten

Ich habe den Links-Block im Untermenü von beiden Startseiten (d.h. auch der englischen) genommen.

Zum einen hat das ganze das Design gestört. Wenn man die Schriftgröße der Seite erhöhte, floss das Untermenü leicht über den unteren Rand des Containers hinaus. Zum anderen gehören externe Links nicht wirklich in ein Menü.

Den einen oder anderen isolierten externen Link werde ich stattdessen hier auf der News-Seite anbringen.

IE7-Problem gelöst

Meine Website sieht nun auch im Internet Explorer 7 so aus wie sie soll. Kein durchscheinender Hintergrund mehr (habe ich schon vor ein paar Tagen auf simple Weise korrigiert), kein zusammengestauchter Text mehr. Die Lösung zu letzterem Problem war schwieriger zu finden. Aber ein margin statt einem padding, und das Problem war gelöst.

Die Inspiration zu all dem kam von "Little Boxes", dem Buch das ich im vorigen Eintrag erwähnt habe.

Website-Design

Ich habe mal wieder ein bisschen am Design von Sylvia's Home herumgebastelt. Viel hat sich nicht verändert:

Die Hintergrundfarbe ist stimmiger.
Die Links sehen besser aus - vor allem in der Navigationsspalte.
Die Schrift ist einheitlich.

Und das alles, weil ich gerade dieses Buch durcharbeite. Da lernt so ein Autodidakt wie ich mal von Grund auf, wie das basteln einer Website funktioniert und warum eine HTML- bzw. CSS-Datei so aussieht, wie sie halt aussieht.

Stefanie-Bilder

Ich habe zwei neue Bilder von Stefanie hochgeladen. Startet einfach hier und blättert weiter.

Zahlenspiel

Ich habe ein kleines Zahlenspiel für meine Website gebastelt.

Das Spiel ist nicht neu und sicher auf vielen Websites zu finden. Im Gegensatz zu anderen Seiten habe ich zur Umsetzung aber (mangels einschlägiger Kenntnisse) kein Javascript verwendet. HTML hat dafür völlig gereicht. Und der Arbeitsaufwand war gering.

Also, denkt euch schon mal 'ne Zahl von 1 bis 32 und los ...

Stefanie

Vor einigen Wochen kam meine zweite Nichte zur Welt. Ein Foto von ihr findet ihr hier.

Willkommen

Willkommen auf meiner News-Seite!

Es wird hier zwei Kategorien von Einträgen geben.

Website-News, das heißt Meldungen über Neuerungen auf meiner Website.

Außerdem werde ich hier hin und wieder Links auf interessante Seiten im WWW posten.