Hallo Gary.
Das Positivste, was ich zu der Seite sagen kann, wäre etwas anhand der Linie von „Wow. Das erfordert viel, viel Mut". Entschuldige bitte.
Mal ganz unabhängig vom Quellcode, dessen unzulängliche Struktur Du am besten in einem langen Eins-zu-Eins-Gespräch mit Cheatah auseinander nimmst: Hast Du die Seite mal in anderen Browsern oder auch nur anderen Viewport-Ausmaßen betrachtet als in nur Deiner eigenen Umgebung? Wirklich getestet?
Wirf mal bitte einen Blick auf diesen Screenshot (~400 KB).
Die Diskrepanz der Hintergrundfarbe der Seite zu den Hintergrundfarben der Bilder. Ok, das tritt nur in Safari auf, weil dieser bislang der einzige Browser mit Unterstützung von Farbprofilen ist, aber nicht mehr lange. Das Auseinander-Ziehen von offenbar zusammen gehörenden Designelementen, wenn man die Ausmaße des Fensters verändert.
Und dann das anscheinend leider Beabsichtigte: Der visuell störende Fliesenhintergrund. Wenn schon Fliesenhintergrund, warum nur in einem Teil der Seite? Warum Navigationspunke auf Bildern, um diese unlesbarer zu machen? Weswegen die komplette Unformatierung dieser Punkte, so dass man die noch als Liste erkennt, wenn man sich denn auf diese konzentriert? Warum scheint für uns Von-Links-nach-Rechts-Leser die Auflistung „Rauchen, Auto, Strom, Urlaub“ so wichtig zu sein, dass sie als erstes kommt? Usw. Etc.
Der Titel der Internetaddresse ist herlich Zweideutig ...
Mal von der Subperformance weggedacht:
Manchmal verliebt man sich in eine Metapher und merkt über all dieser Begeisterung für die ... äh, tschuldige .. vermeintliche eigene Genialität nicht, dass man damit zu weit geht, weil es überhaupt nicht mehr wirkt. Dir reicht offenbar nicht eine kleine WC-Anspielung, nein, es muß die komplette Ausstattung sein, mit aller Attribute. Ok, ich war nie ein Fan der Metapher in der Webseite, auch die nebenan vorgestellte Klorollen-Metapher finde ich störend und ich mochte auch in den späten 90ern die damals verbreitete Webseite-als-Buch-Metapher nicht, aber das ist wohl ein Geschmacksurteil. Nur ...
Design hat m.E. eher die Aufgabe den Inhalt etwas zu unterstützen und etwas in eine emotionale Richtung zu schieben. Das gelingt Dir hier nicht, finde ich. Du gehst zu weit, packst mit allen Bildern viel zu viel rein und schaffst damit ein störendes, visuell ablenkendes Mosaik, ein Durcheinander von nicht miteinander in Relation stehenden Seitenelementen, bei dem man erst nachher darauf kommt, dass da noch Inhalt ist.
Ich würde Dir raten noch mal komplett neu anzufangen. Diesmal umgekehrt, nicht von Außen nach Innen von der Metapher in den der Inhalt als Nachgedanke eingefügt wird, sondern von Innen nach Außen, mit dem Inhalt startend und dann nach und nach aufbauend. Und ich meine das wortwörtlich:
• Erst einfach ein paar Textbeiträge samt Grafik schreiben, die auf der Seite stehen könnten.
• Anfangen, damit diese als HTML auszuzeichnen (Absätze, Links, Listen, Grafiken, Blockquotes, all die reichhaltige Struktur, die HTML einem bieten kann)
• Ganz viel Zeit darauf zu verwenden, diesen Teil lesbar zu machen. Nicht nur typographisch ansprechend, sondern in der Gestaltung sowohl kreativ eigenständig als auch unauffällig, nicht ins Gesicht springend zu gestalten, dass das Lesen leicht fällt. Abstände, Einrückungen, Farbkontrast zwischen Schrift und Hintergrund, Zeilenabstand ... je länger ich mich mit dem Webkrempel beschäftige, nicht nur als potentiell Machender sondern auch einfach nur als Nutzer, desto mehr finde ich, wie wichtig dieser Aspekt ist und wie oft er leider vernachlässigt wird.
• Das Ideal ist es, ein halbwegs uniformes Erscheinungsbild für einzelne Artikel zu schaffen, ein Schema, dass man wieder erkennt. Das menschliche Auge orientiert sich sehr stark an so etwas; man sollte das nicht unnötigerweise unterlaufen. Schon Deine unterschiedliche Positionierung der die Artikel begleitenden ... „Bilder“ finde ich störend und ablenkend.
• Jetzt die Positionierung. Die Spalte mit dem eigentlichen Inhalt in der Breite begrenzen, schon um die Lesbarkeit zu sichern. Dann diese eventuell auf der Seite zentrieren, Abstand schaffen, damit sich nichts eingesperrt anfühlt, Platz schaffen für die Meta-Elemente.
• Meta-Elemente? So bezeichne ich die nicht zum eigentlichen Inhalt gehörenden Elemente. Sieh es unter dem Aspekt „Wo bin ich?“ und „Wo kann ich hingehen?“. Ersteres ist in der Weblog-Szene meist der Titel des Weblogs samt Kopfgestaltung, zweiteres ist das Menü mit eventuellen Marginalsachen wie z.B. Deine Kategorienliste.
• Ersteres ist eh meist eine Grafik, dort kann man sich visuell austoben, dort würde ich Dein WC-Thema hinpacken, an dem Du so hängst, das aber eher abstrakt. Z.B. ein Rechteck für ein Blick in ein Badezimmer nutzen, cartoon-artige Fliessen im Hintergrund, rechts eine Toilettenschüssel, wenn's sein muß. Es ist prägnant beim ersten Blick auf die Seite, schafft eine Identität, stört aber nicht im weiteren Verlauf des Scrollens. Kann auch als Home-Button dienen oder diesen integriert haben.
• Das Menü. Man kann's auch in den Header integrieren, aufgrund der Listenartigkeit und weil viele offenbar Leerraum nicht leer lassen können, wird es oft links oder rechts neben den Inhalt gesetzt. Ich würd es dezent machen, ein leicht geringerer Kontrast, eine Nicht-Einboxierung würde schon reichen. Meine Faustregel ist da: Interessiert man sich für die tolle Architektur eines Gebäudes oder für die Straßenschilder, die auf andere Architektur hinweisen? Menüs sind Straßenschilder, in sich langweilig.
Letztendlich willst Du ein Weblog machen. Du solltest Dich wirklich mal bei anderen Weblogs umgucken. Praktisch steht jeder Designer von solchen Layouts vor den gleichen oder ähnlichen Problemen, wie bestimmte Inhaltselemente am besten angeordnet werden, damit diese intuitiv wirken und/oder wie sie am besten in der vom Seitebesucher bekannten Designsprache einzuordnen sind. Da gibt es haufenweise kreative (und natürlich haufenweise uninspirierte) Lösungen. Manchmal wirkt es sehr einseitig, ok, aber im Laufe der letzten zehn Jahre haben sich durchaus Elemente entwickelt, die dann nicht mehr beliebige Varianten sind, sondern durchaus Lösungen für Probleme. Sich davon inspirieren zu lassen oder gar diverses für eigene Zwecke zu adaptieren ist nicht unkreativ und erst recht keine Schande.
Und ganz abgesehen davon: Es ist wirklich sehr empfehlenswert, wenn Du bei vielen anderen Webseiten mal in den Quellcode guckst und deren Quelltext analysierst, wie manches gemacht wird, was deren best practises im Bereich CSS sind. Das ist eine Hauptquelle des Lernes, moderne Tools wie Firefox' DOM Inspector, Safaris Web Inspector und vermutlich auch Operas neues Dingsbums machen das noch sehr viel leichter. Lernen ist nicht nur Nachfragen im SELFHTML Forum.
Tim