Auf ihrer Seite mit dem tollen Namen Gedankenschnitt bloggt Joana über ihr Leben und hält für die Besucher einen umfangreichen interaktiven Bereich sowie zahlreiche Grafiken bereit.

Layout

Wer kennt es nicht, dass man seine Gedanken auf einen Notizblock kritzelt und sie so festhält? Das Layout greift den Seitentitel gut auf, indem es einen Notizblock imitiert, kenntlich gemacht durch die Spiralen am oberen Rand. Gefällt mir!
Die restliche Gestaltung hat dann zwar nichts mehr mit einem Notizblock zu tun, hier bestimmen nun abgerundete Ecken und verschnörkelte kleine Pflanzen das Bild, aber das Layout wirkt dennoch harmonisch.

Im Header befinden sich zwei Bilder von Bruce Willis, daneben ein Zitat aus Grey’s Anatomy (“Hiermit verrate ich euch die Wahrheit über die Wahrheit. Sie tut weh, also lügen wir, denn Lügen ist eine Notwendigkeit”).

Die Anordnung der einzelnen Links im Menu finde ich etwas unpraktisch gewählt. Bevor man weiß, auf was für einer Seite man da gelandet ist, um was es geht, wer dort schreibt, stehen im Menu erst einmal Credits, der Linkage-Bereich, die Affiliates und das Ask me. Erst dann kommen die Punkte “History” und “Webmiss”. Das würde ich anders anordnen, gleich als erstes, da neue Besucher sich oft von oben nach unten durch die Navigation klicken und hier erstmal jede Menge Informationen bekommen, die in diesem Moment für sie noch irrelevant und daher uninteresant sind.

Das Rot in der Navigationsleiste tut mir in den Augen weh, während ich die rote Schrift auf dunkelgrauem Grund im Inhaltsbereich nur schlecht lesen kann. Die Counteranzeige, die im Menue ganz unten steht, kann man aufgrund des mangelnden Kontrasts kaum erkennen.
Generell passt die Farbwahl mit Rot und Schwarz aber gut zum Titel der Seite, da man mit einem Schnitt Blut assoziiert.

Bei einer höheren Auflösung entsteht am rechten Bildschirmrand ein grauer Streifen. Da könntest du ganz leicht Abhilfe schaffen, indem du die Hintergrundfarbe der Seite auf Weiß setzt.

Auf einigen Unterseiten tauchen plötzlich waagerechte Scrollbalken auf, so etwa in der Galerie deiner früheren Layouts oder auf der Postkarte-Seite.

Hier gibt es 21 von 35 Punkten.

Coding

Deine Styleangaben sind in validem CSS 2.1 geschrieben – fantastisch! :)

Nur im HTML haben sich ein paar kleinere Fehler eingeschlichen, wie du auf der Validatorseite nachlesen kannst (die du ja bereits bei dir im Footer verlinkt hast).

Was den HTML-Bereich angeht, so könntest du hier noch ein paar Dinge verbessern, indem du die Formatierungsanweisungen allesamt in das Stylesheet auslagerst. Momentan hast du im body-Tag noch die Angaben zu margin und padding stehen und verwendest im Footer sogar das font-Tag.

Ein kleiner Verbesserungsvorschlag zum Thema Klassen und IDs: deine Navigation sitzt in einem Div mit der ID “navi”. Den einzelnen Links innerhalb dieses Divs hast du nun noch die Klasse “navi” zugewiesen, um sie im Stylesheet anzusprechen. Diese Klasse benötigst du aber gar nicht, sondern du kannst einfach angeben, dass alle Links innerhalb des Divs mit der ID “navi” angesprochen werden sollen:

div#navi a {
... }

Außerdem hast du viele Angaben im Stylesheet mehrfach vorgenommen, beispielsweise die Festlegung der Schriftart Verdana. Dank des Vererbungsmechanismus von CSS brauchst du das aber nicht: wenn du einem übergeordneten Element eine Eigenschaft zuweist, wird diese automatisch auf seine Kindelemente vererbt. Sprich, wenn du für den body-Tag eine Schriftart festlegst, gilt diese für sämtliche anderen Elemente.

Macht 15 von 30 Punkten.

Inhalt

Wie schon gesagt: deinen Seitentitel sowie die URL finde ich interessant & gut gewählt!

Mit einem Steckbrief, einer kleinen Fotogalerie, deiner Wunschliste und etlichem mehr stellst du dich deinen Besuchern ausführlich vor – das gefällt mir gut, da man so einen kleinen Einblick bekommt, wer die Person hinter gedankenschnitt.de ist. Das macht deine Seite sehr persönlich.

Auch über die Entwicklung deiner Seite erfährt man etwas und kann sich auch Screenshots der vorigen Layouts ansehen, die du sogar kommentiert hast.

Im Großen und Ganzen schreibst du ordentlich, aber oft auch umgangssprachlich oder mit vielen Abkürzungen (“… mein Zimmer eig weiß/rosa werden sollte, nur iwie blieb es weiß”).

Kommen wir zum Schwerpunkt deiner Seite: dem Bereich für deine Besucher.
Hier bietest du wirklich viel an, sei es ein Reviewservice, Tutorials,ein Postkarten-Wettbewerb, ein Starqualitäts-Voting, ein SotM-Voting, … Leider hat bei all diesen interaktiven Angeboten noch niemand teilgenommen, sodass es etwas leer aussieht. Aber das wird mit der Zeit sicherlich anders werden.
Die Unterseite “Lustiges” bietet einige Witze und Links zu lustigen YouTube-Videos und Webseiten. Musste stellenweise ziemlich grinsen. ;-)

Bei den Tutorials habe ich allerdings ein paar Dinge auszusetzen. ;-)
Bei “HTML für Anfänger” fehlt beim Bild-Code die schließende spitze Klammer; der alt-Tag ist nicht ganz richtig erklärt: er ist nicht dafür da, dass der Text beim Hovern mit dem Mauszeiger als Tooltip angezeigt wird, sondern als Information über die Grafik für den Fall, dass das Bild nicht angezeigt werden kann (etwa, weil jemand einen reinen Textbrowser verwendet oder ein Vorlesegerät). Auch für Suchmaschinen ist dieser Text wichtig. Zum Thema Trennlinien führst du dort das p-Tag auf – das ist aber für Absätze zuständig, Trennlinien macht man mit Hilfe von <hr/>.
Auch gibst du viele Hinweise, um die Formatierungsangaben direkt im HTML vorzunehmen (beispielsweise: border=”0″), das gilt aber als veraltet und stattdessen sollte man dies ausschließlich im Stylesheet festlegen.
Beim Verlinken von Bildern fehlt das ausleitende a-Tag.
Der Link zum Tutorial über den HTML-Aufbau führt zu einer Fehlerseite.
Im Formular-Tutorial schreibst du, “Wenn ihr wissen wollt, wie ihr es hinbekommt, dass das Formular dann an eure EMail Adresse geschickt wird, klickt hier.”, allerdings führt dieser Link nur auf die gleiche Seite, auf der man sich bereits befindet.

Noch umfangreicher als dieser interaktive Bereich fällt der Grafikteil deiner Seite aus: hier können sich deine Besucher mit Layouts, Wallpapern, Icons, Headern und Signturen eindecken. Darüber hinaus bietest du zahlreiche Ressourcen an.
Wow! Da merkt man, dass du viel Arbeit hineingesteckt hast.

Für das Grey’s Anatomy-Zitat hast du leider keine Quelle angegeben, aber ansonsten hast du deine Credits sehr ordentlich aufgeführt. Auch ein Impressum ist vorhanden.

Macht 32 von 35 Punkten.

Insgesamt komme ich somit auf 68 von 100 Punkten!