Moin, moin…
hier meine kleine Kritik:
Die Seite wirkt aufgeräumt und schlicht. Gut so. Dein Code ist allerdings recht grausam. ;)
Aber schauen wir uns das einmal im Detail an:
1. Zeilenumbrüche
Dein Code beinhaltet recht viele Zeilenumbrüche, an Stellen, an welchen sie unnötig sind. Der Doctype allein braucht drei Zeilen, obwohl er in eine passt. Darunter sind noch einmal zwei oder drei Zeilen frei. Entfernst du solche unnötige Umbrüche, welche auch keine verbesserte Übersicht im Code bringen, sparst du Bandbreite. In der Masse zahlen sich solche Optimierungen aus (bei gut besuchten Seiten), aber auch jeder, der mit seinem Handy/Smartphone unterwegs ist oder noch auf DSL-Light oder gar ISDN zurückgreifen muss, der freut sich darüber.
2. Einrückungen
Dein Code beinhaltet keine Einrückungen. Diese verursachen zwar wiederrum ein wenig Bandbreite, aber die hast du ja oben gespart und kannst sie hier einsetzen, um deinen Code übersichtlicher zu gestalten. Das hilft dir gerade bei größeren Projekten die Übersicht zu behalten. Eine einfache Regel ist: Jedes Kindelement ist ein Tab weiter eingerückt als sein Elternelement. Wie das genau gemeint ist, kannst du dir an Hand des Quelltextes dieser Seite anschauen:
Messdiener St. Jakobus und St. Martin • Home
3. Validität
Dein Code ist syntaktisch nicht korrekt, wie dir dieses Tool hier zeigt:
http://validator.w3.org/check?uri=h...(detect+automatically)&doctype=Inline&group=0 Korrigiere diese Fehler!
4. Barrierefreiheit
Barrierefreiheit kommt immer mehr in Mode und das ist auch gut so. Es hilft, dass sich auch sehbehinderte Menschen im Internet bewegen können. Sehbehindert kann dabei bedeuten, dass die Person blind ist und z. B. einen Screenreader benutzt, aber auch, dass sie nur eingeschränkt sehen kann, weil sie zum Beispiel nur schlecht sieht oder bestimmte Farben nur sehr schlecht erkennen kann, geringe Kontraste können dann stören.
Allein schon der Anstand und die Rücksicht auf solche Menschen bringt ein paar Regeln mit. Wichtig ist die korrekte Auszeichnung des Codes. Eine Überschrift wird mit <hx></hx> (x für die Zahl der Ordnung) ausgezeichnet. Dies sieht man bei dir leider nicht, denn du hast gar keine Überschrift. Deine Kopfgrafik wird als Hintergrundbild eingebunden. Das kann man zwar machen, allerdings beinhaltet sie doch wichtigen Inhalt, oder? Nämlich deine Überschrift. Gut wäre also folgender Code:
Code:
<h1><img src="pfad/zum/bild.png" alt="Moritz Morgenstern"></h1>
Wichtig dabei ist das alt-Attribut, denn es ermöglicht auch Nutzern mit Screenreadern zu wissen, welche Information das Bild beinhaltet.
Zur korrekten Auszeichnung gehört auch dazu, dass man eine Navigation mittels <ul>, also einer Liste darstellt und nicht in einer Tabelle. Tabellen sind für tabellarische Daten da. Für nichts anderes!
Es gibt sicher noch mehr zu erklären, aber das soll erst einmal reichen. Wenn du noch Fragen hast, dann einfach fragen. Wir helfen gerne…
