Das Online-Magazin Diagon Alley bietet alles, was die Herzen von Harry Potter-Fans höher schlagen lässt: neben vielen Infos zu den Büchern und Filmen findet man hier auch diverse Grafiken rund um Hogwarts.

Layout

Ein großformatiges Headerbild mit einer Filmszene aus Harry Potter sowie wie einem Zitat illustriert das Layout, das  in Weiß- und Grüntönen gehalten ist und somit mit den Farben der Grafik harmoniert. Da Harry direkt auf dieser Headergrafik zu sehen ist, weiß der Besucher gleich, um welches Thema es sich hier dreht. Das Grün-Blau im Header wirkt zudem mystisch und geheimnisvoll – genau das Richtige für eine Harry Potter-Fanseite also!

Die klare Aufteilung in eine breite Content-Spalte und eine Navigationsspalte am rechten Rand ist zwar nicht sonderlich innovativ, aber gut: sie sorgt für Übersichtlichkeit – hier muss man nicht lange herumklicken, um sich zurechtzufinden.

Durch die ausreichenden Kontraste ist die Schrift überall gut lesbar.

Wofür es außerdem einen Pluspunkt gibt, ist das Suchfeld, das ganz oben im Menu platziert wurde und somit enorm hilft, wenn man auf der Suche nach einem bestimmten Stichwort ist.

Auch bei unterschiedlichen Auflösungen verschiebt sich nichts im Layout, fein. :)

Einzig das Favicon in Form einer orangen Kugel passt meiner Meinung nach leider nicht zum Rest der Seite, zumindest weiß ich nicht, was es darstellen soll (einen Ball?).

Macht 30 von 35 Punkten.

Coding

Als Software wird hier WordPress eingesetzt, gepimpt mit einigen Plugins; das Layout ist selbst erstellt.

Leider tummeln sich im Quellcode relativ viele Fehler.
So soll die Seite laut Doctype zwar in XHTML 1.0  Transitional geschrieben sein, aber viele der XHTML-Kriterien werden nicht erfüllt: Beim Link-Tag, mit dem das Favicon eingebunden wird, fehlt der ausleitende Slash, ebenso wie bei diversen Zeilenumbrüchen und img-Tags. In XHTML müssen alleinstehende Tags (also solche, die nichts umschließen wie etwa <p>…</p>) immer mit einem Slash versehen werden: <img src=”…” alt=”…” />

Bei der Headergrafik wurde kein alt-Attribut angegeben, und die Verschachtelung der Tags scheint an einigen Stellen nicht ganz zu stimmen. Genau nachlesen könnt ihr die Fehlermeldungen hier.

Was das CSS angeht, so wurden die Styleangaben größtenteils löblich vom XHTML getrennt und in Stylesheets ausgelagert. Die einzige Ausnahme, die ich entdecken konnte, ist die Verwendung des center-Tags.

Der Validator meckert zwar recht viel über das CSS, aber die meisten Angaben beziehen sich lediglich auf Eigenschaften, die in der aktuellen CSS-Version noch nicht vorhanden sind – das ist also nicht schlimm. Nur beim Fettsetzen hat sich ein Fehlerteufelchen eingeschlichen, und zwar in der Datei http://diagonalley.de/wordpress/wp-content/themes/version05/style.css in den Zeilen 41, 52, 434 und 525. Hier wurde “bold” als Wert bei text-transform und font-size angegeben.
Um Schrift fett zu setzen, notiert man: font-weight: bold; text-transform bezieht sich auf die Groß- und Kleinschreibung (uppercase/lowercase) und font-size auf die Größe in em, px, Prozent usw.

Die einzelnen Stylesheet-Dateien sind sauber notiert und eingerückt, was die Lesbarkeit erhöht, und weisen keine überflüssigen Angaben auf.

Hier gibt es 16 von 30 Punkten.

Inhalt

Rund um die Harry Potter-Bücher findet man bei euch wirklich jede Menge Informationen. So werden nicht nur die Handlungen der einzelnen Bände erklärt (wenngleich hier auch erst die drei ersten Bücher verfügbar sind) , sondern es gibt auch ein Lexikon der Charaktere (als ich allerdings anbetrachts des Zitats im Header nochmal nachlesen wollte, was genau es mit Dumbledore auf sich hat, habe ich den nicht im Lexikon finden können).
Die Themen der weiteren sechs Lexika findet man in der Tat nicht überall ;) und so können Harry Potter-Fans hier immer gleich nachschlagen, wenn ihnen etwa ein Zauberspruch fehlt. Leider weisen die einzelnen Lexika noch nicht allzu viele Einträge auf.

Wie ihr zum Domain- bzw. Seitennamen gekommen seid, wird ebenso erklärt wie ihr euch auch als Team vorstellt. Die kleinen Steckbriefe und Fotos machen die Seite persönlich und sympathisch!
Sehr gut gefällt mir eure Idee, die einzelnen Bereiche in der Navigation passend zur Welt von Harry Potter zu benennen – so findet man etwa eine Winkelgasse oder neue Beiträge werden frisch gezaubert. :)

Bei Madame Malkins schließlich bietet ihr jede Menge Avatare, Signaturen Wallpaper und Designs an – da dürfte für jeden Fan etwas dabei sein.

Was ich immer ein bisschen schade finde, ist wenn englischsprachige Plugins nicht angepasst werden. So zum Beispiel beim Kontaktformular oder bei der Navigation am unteren Seitenende (“older entries”).

Ich habe einen toten Link gefunden, und zwar wird auf der Links-Seite ganz unten beim Network statt des Buttons von love-jana.at.tc nur eine Platzhaltergrafik von photobucket angezeigt.

Ein Impressum sowie eine Liste der Credits sind vorhanden – wunderbar.
Und: Diagon Alley hat sogar ein Maskottchen! :)

Hier gibt es 30 von 35 Punkten.

Alles in allem komme ich somit auf 76 Punkte – herzlichen Glückwunsch (und nochmal sorry, dass es so lange gedauert hat mit dem Review)!