Nach einer Pause geht es nun weiter mit den Reviews: Stephie hat sich mit ihrer Seite nobody-knows.de.ms angemeldet – here we go! :-)

Layout

Dein Layout kommt von der Aufteilung recht klassisch daher: es besitzt eine feste Breite und ist dreispaltig aufgebaut. Während sich links das Menue befindet und rechts Infos wie die letzten Updates oder ein Kalender platziert sind, sitzt der Inhalt in der Mitte. Ein Headerbereich sorgt mit drei quadratischen Fotos aus dem Film “Twilight” für einen visuellen Ausgleich zu dem vielen Textinhalt, den du bietest.
Wirklich innovativ finde ich dein Layout nun nicht, aber es ist dennoch übersichtlich gegliedert und angenehm anzuschauen.

Die graue, serifenlose Schrift lässt sich auf dem weißen Hintergrund problemlos lesen. Dadurch, dass du Rot und Orange als Farbtupfer bei den Überschriften und Links einsetzt, wirken die Texte alles andere als eintönig. Wunderbar. :-)

Bei einer höheren Bildschirmauflösung wird der Hintergrund am rechten Rand leider abgeschnitten, sodass hier ein weißer Streifen entsteht. Da könntest du Abhilfe schaffen, indem du dem body als Hintergrundbild lediglich dieses rötliche Muster zuweist, das dann fortlaufend wiederholt wird. Das jetzige Hintergrundbild würde dadurch überflüssig; den weißen Hintergrund des Inhaltsbereichs kannst du ja via CSS als background: #fff; festlegen.

Während man den jeweils letzten Navigationspunkt einer Navi-Box angeklickt hält, erscheint an der Seite der jeweiligen Box ein vertikaler Scrollbalken (zumindest mit dem Firefox 3.0.5). Das sollte so bestimmt nicht so sein.

Hier gibt es 22 von 35 Punkten.

Coding

Der Quelltext deiner Seite sieht leider nicht allzu schön aus.

Zunächst einmal sitzt die komplette Seite in einem Iframe – ich gehe mal davon aus, dass das durch die Domain *.de.ms bedingt ist.

Desweiteren bindest du zwar – löblicherweise – ein Stylesheet ein, aber nichtsdestotrotz verwendest du wahnsinnig viel Inline-CSS (also solche Angaben zum Style, die als Attribut bei einem Element stehen, beispielsweise
<div style=”float:left; margin-right:10px; margin-bottom:5px”>. Dadurch wird dein Quelltext ziemlich aufgebläht (was die Ladezeiten der Seite beeinflusst) und du hast vor allem viel Arbeit, wenn du etwas am Layout ändern möchtest. Hier musst du dann ja quasi jede einzelne Zeile des Codes auf jeder einzelnen Seite durchgehen und die Angaben ändern – einfacher wäre es, wenn du dem Div hier eine Klasse zuweist und die Eigenschaften dieser Klasse dann im Stylesheet definierst. So musst du später nur das Stylesheet bearbeiten.

Auch im Stylesheet selber kannst du noch Einiges optimieren. Wichtig ist nämlich, dass die weiter unten gemachten Angaben die weiter oben stehenden überschreiben. Du hast zum Beispiel die Überschrift erster Ordnung so beschrieben:
h1{
font-size: 11px;
color: #777777;
text-align: center;
text-transform: uppercase;
background-color: #cccccc;
margin: 0px;
font-weight:bold;
background: #EFEFEF;
}

background-color und background machen beide das Gleiche, und da background: #EFEFEF weiter unten steht, überschreibt es das background-color: #cccccc. Das heißt, diese Zeile (background-color: #cccccc;) kannst du getrost löschen. ;-)

Die Angaben für das Verhalten der Scrollbar (die ohnehin nur im Internet Explorer umgesetzt werden, andere Browser ignorieren sie) führen leider dazu, dass dein Stylesheet nicht valide ist. Das liegt daran, dass das Aussehen der Scrollbalken nicht als Bestandteil der Seite gilt, sondern als ein Teil des Browser. Und davon, das Verhalten des Browser zu verändern, obwohl der User dies vielleicht gar nicht möchte, sollte man im Rahmen der Usability möglichst absehen. :-)

Eine kleine Anmerkung dann noch zu den Hover-Effekten der Links – text-decoration: bold gibt es nicht. Wenn die Links fett dargestellt werden sollen, musst du font-weight: bold verwenden. text-decoration ist nur für das Unter-, Über- oder Durchstreichen zuständig.

Kommen wir vom Stylesheet zum restlichen Code der Seite: hier tauchen ein paar Fehler dadurch auf, dass du gleichzeitig mehrere Elemente mit derselben ID versehen hast. Eine ID darf aber nur ein einziges Mal pro Dokument auftauchen, sonst wäre ihre Einzigartigkeit überflüssig. Wenn du mehrere Elemente auf einmal kennzeichnen möchtest, verwendest du einfach eine Klasse. Das heißt, statt id=”content” schreibst du class=”content”. Im Stylesheet sprichst du das Element dann nicht mehr durch #content, sondern .content an, das ist alles.
Mehr zu IDs und Klassen kannst du hier nachlesen: neontrauma.de/xhtml-css/ids-und-klassen.php

Du verwendest sowohl Divs, als aber auch Tabellen. Auf Tabellen sollte man bei Layouts verzichten und stattdessen alles mit Divs, Listen usw. realisieren – das ist tatsächlich ohne Probleme möglich. Außerdem spart man sich durch Divs auch immens viele Zeilen Code. Die einzelnen Punkte in der Navigation könntest du so zum Beispiel  als ungeordnete Liste auszeichnen.

Gut finde ich, dass du den Quelltext unterteilt und kommentiert hast, sodass man auf einen Blick sieht, wo man sich gerade befindet. :-)

Alles in allem ist der technische Aspekt deiner Webseite also noch stark verbesserungsbedürftig… ich hoffe, dass ich dich mit den vielen Anmerkungen nun nicht vor den Kopf gestoßen habe, aber ich finde, dass man durch solche Hinweise am meisten lernen kann.

Macht 8 von 30 Punkten.

Inhalt

So, jetzt aber endlich zum Herzstück deiner Seite – dem Inhalt.
Hier muss ich dir erst einmal ein großes Lob aussprechen für so viele Texte! :-)

Du achtest auf deine Rechtschreibung und schreibst in einem angenehmen Stil, sodass es wirklich Spaß macht, auf deiner Seite zu stöbern und zu schmökern.

Über die Seite selber erfährt man eine ganze Menge: von der Namensgebung über das aktuelle Layout hin zu Screenshots und Beschreibungen vergangener Layouts. Hier muss ich sagen, dass mir Design No. 11 am besten gefällt, eigentlich sogar besser als das momentane.
Auf der Review-Unterseite hat sich ein kleiner Tippfehler eingeschlichen, da in einer der Überschriften “fertieg Reviews” steht. Kann vorkommen. ;-)

Credits zu den verwendesten Materialen gibst du vorbildlich an – fein! Mich hat es nur ein wenig gewundert, dass du dich bei den Credits auch selber aufführst, etwa bei “Layout & Content (c) by Stephie”. Das passt imho nicht unter die Überschrift “Credits”.

Auch über dich selbst kann man jede Menge lesen: neben einem Steckbrief zeigst du deinen Besuchern auch zwei Beschreibungen, die andere über dich verfasst haben. Das finde ich auf jeden Fall sehr originell. :-)
Was ich irgendwie vermisst habe, wäre ein Foto von dir selber gewesen.
Weiter geht es auf diversen Unterseiten, die beispielsweise verschiedene Persönlichkeitstests oder Auflistungen, wie etwa die von dir gelesenen Bücher, beinhalten.
Bei “Typisch Mädchen” taucht auf einmal ein vertikaler Scrollbalken auf, der ein wenig stört.
Dass du deine Lieblingsdinge nicht einfach nur aufgelistet hast, sondern sie jeweils durch ein kleines Bild illustiert, gefällt mir gut. Allerdings bin ich mir nicht ganz sicher, ob du da nicht teilweise gegen Urheberrechte verstößt (?).
Deine Fotos hast du in mehreren Alben thematisch sortiert und die Thumbnails mit einem schicken Lightbox-Effekt kombiniert – schick!
Was ich ein wenig “doppelt gemoppelt” finde, ist dass du einige der Unterseiten zweimal verlinkt hast: einmal unten auf der “About Me”-Seite, und dann noch einmal in der Navigationsspalte. Hmm.

Du bietest deinen Besuchern nicht nur viel zu lesen, sondern darüber hinaus auch noch etwas zum Mitnehmen und Mitmachen: Icons, Signaturen, Tutorials, ein Icon-Contest, einen Coding-Service für Layouts, und und und. Wow!!
Für so viel Mühe und Zeit, die du in den Inhalt deiner Seite gesteckt hast, gibt es auf jeden Fall viele Punkte!

Macht hier 33 von 35 Punkten.

Insgesamt komme ich somit auf 63 Punkte – ich denke, wenn du das Coding deiner Seite verbesserst, kannst du wesentlich mehr Punkte abräumen. Vorbeischauen werde ich bei dir in Zukunft sicher öfter einmal. :-)

Dein Badge: