Ich habe jetzt den alten Alpenplaner nicht mehr sonderlich genau im Kopf, aber diese Seite ist auf alle Fälle insgesamt sehr angenehm anzusehen und ansprechend gestaltet. Da alles zu loben, würde den Rahmen sprengen.
Zwei Kleinigkeiten hätte ich in diesem Bereich aber trotzdem zu bemängeln:
1.: Die Abstände zwischen Überschriften und Inhalten auf der Startseite. Die Überschrift "Update" ist vom darunter stehenden Datum "29-01-2009" weiter weg als vom Text "Die 15 neuesten Kommentare [...] mit CTRL-F5 neu laden". Die Überschrift "Relaunch" hängt ungefähr mittig zwischen dem Datum, das zu ihre gehört und dem Text über ihr. Das ist ziemlich unübersichtlich, besonders weil die Abstände nicht einheitlich sind und nicht deutlich machen, was zueinander gehört.
Kurz: Freiraum um das Datum kleiner oder Abstand der Überschriften nach oben größer machen.
2.: Den Fuß der Seite finde ich etwas merkwürdig. Entweder sollten die runden Ecken unten und der glatte Abschluss oben sein statt umgekehrt oder diese umgekehrte Variante sollte als Hintergrund zu "© AlpenPlaner 2009" dienen (oder sich darunter anschließen), zusätzlich zur aktuellen Version.
Ich habe hier mal schnell zusammengeschustert, was ich meine:
Fuß A
Fuß B
Zum Code:
Zum größten Teil wirkt er einigermaßen ordentlich, aber du verwendest definitiv doppelt so häufig
div wie notwendig wäre.
Code:
<div id="navigation">
<ul id="tab">
[...]
</ul>
</div>
Das ist auf keinen Fall notwendig.
Hier kann ich zwar sehen, was wozu dient:
Code:
<div id="apchoose">
<div class="cont_choose">
<div class="cont_choose_left"><img [...] /></div>
<div class="cont_choose_right">Auf welche Bergaktivität hast Du Lust?
<form id="spots_filter" [...]>
[...]
</form>
</div>
</div>
</div>
aber du könntest z.B. einfach das Bild selbst floaten anstatt ein
div drum herum zu legen und das
form stylen anstatt ein Extra-
div dafür zu verwenden (letzteres gilt auch für die Suche).
Die Layout-Tabelle unter der Überschrift "Willkommen" ist vollkommen fehl am Platz.
Die Überschriftenstruktur an sich ist zwar stimmig, aber durch
Code:
<h1 id="logo"><a href="http://www.alpenplaner.ch/"></a></h1>
hat deine Überschrift keinen Inhalt. Hier könntest du einfach das Bild, versehen mit einem sinnvollen alt-Text, direkt einbinden.
Andere direkt eingebundene Bilder wären hingegen vielleicht als Hintergrundbilder besser oder brauchen wenigstens einen sinnvolleren alt-Text. Der alt-Text ist das, was angezeigt werden soll, wenn eine Grafik nicht angezeigt wird. Du verwendest ihn stattdessen, um den Inhalt der Grafik zu beschreiben bzw. gibst einfach den Dateinamen wider. Mal abgesehen von der Tatsache, dass man deine Seite sowieso nicht benutzen kann, wenn die Grafiken deaktiviert sind (weil z.B. die Navigation komplett unsichtbar wird), irritiert dann auch der alt-Text.
Beispiel: Deine Überschriften fangen alle mit Grafiken an, die den alt-Text "point" haben. Ohne Grafiken liest man also
point Willkommen
Alpenplaner.ch: Willkommen auf [...]
point Kommentare
[Datum ist nicht zu sehen, weil weiße Schrift auf weißem Grund]
Die 15 neuesten Kommentare [...]
point Update
etc...
Offensichtlich wäre es hier besser, entweder einen alt-Text wie • (Bulletpoint), · (Mittelpunkt) o.Ä. zu nehmen oder einfach die Grafik als Hintergrundgrafik einzubinden.
Der Validator hat noch fünf Kleinigkeiten zu bemängeln:
[Invalid] Markup Validation of http://www.alpenplaner.ch/ - W3C Markup Validator
Fazit: Sehr schönes und ansprechendes Design mit nur zwei ganz kleinen Mängeln (wobei die Sache mit dem Fuß noch Geschmackssache ist).
Nicht ganz so schöner Code, aber auf dem richtigen Weg. Divs reduzieren (dran denken, dass man alle Elemente auch direkt stylen kann, ohne ein div drumherum legen zu müssen), die letzte Layout-Tabelle rausschmeißen und alt-Tags sinnvoll einsetzen.
