Meine Website-Checkliste

Code-Qualität

  • Die Seite benutzt einen korrekten Document Type.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

  • Sie gibt ein Character-Set für die korrekte Darstellung von Sonderzeichen an.

    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

  • Sie beinhaltet nur valides (X)HTML.
  • Die Site setzt auf CSS-P (CSS-Positionierung) anstatt auf Tabellen-basierte und verwendet im Allgemeinen für jede Art von Layout CSS.

Trennung von Design, Inhalt und Logik

  • Das Layout wird komplett über eine oder mehrere ausgelagerte CSS-Dateien definiert.

    <link rel="stylesheet" href="/styles/content.css" type="text/css" media="screen, projection" />

  • Alle dekorativen Grafiken (d.h. ohne explizite Bedeutung für den Inhalt) werden so weit wie möglich via CSS dargestellt.

  • Kommt Javascript zum Einsatz, wird dieses ebenfalls in externe Dateien ausgegliedert.

    <script type="text/javascript" src="/js/scripts.js"></script>

Allgemeine Zugänglichkeit / Accessibility

  • Bei beschreibenden Grafiken ist das »alt«-Attribut gesetzt und aussagekräftig.

  • Text-Größen werden in relativen Einheiten angeben (em, Prozent), so dass der Benutzer diese mit seinem Browser verändern kann.

  • Das Layout darf auch bei sehr hoher Schriftgröße nicht auseinanderbrechen. Richtwert: Internet Explorer auf »sehr groß« bei einer Bildschirm-Auflösung von 1024x768 Pixeln

  • Der eigentliche Content befindet sich so nah wie möglich am <body>-Tag

  • Formulare sind mit den Tags <fieldset>, <legend> und <label> benutzerfreundlich gestaltet.1

  • Links sind in der Regel selbstbeschreibend.

Zugänglichkeit für bestimmte Ausgabemedien, Geräte, etc.

  • Die Site »funktioniert« in allen gängigen Browsern.2

  • Die Site »funktioniert« auch dann, wenn Stylesheets und/oder Grafiken ausgeschaltet sind.3

  • Auch mit Text-Browsern ist die Site einwandfrei zu benutzen.4

  • Spezielle Layout-Formatierungen für den Seiten-Ausdruck sind vorhanden.5

  • Jede Seite verfügt über angemessen umfangreiche Meta-Daten.

Usability

  • Links sind als solche deutlich erkennbar und heben sich vom restlichen Fließtext ab.

  • Bereits besuchte Links werden anders dargestellt als noch nicht besuchte.

  • Es gibt von jeder Seite einen Link
    1. zur Startseite.
    2. zu einem Kontaktformular.
    3. zur Such-Funktion bzw. zur Sitemap (soweit erforderlich).
    4. zum Impressum.

Server-Einstellungen, Handling

  • Die Fehlerseite »404« (Datei nicht gefunden) existiert und ist aussagekräftig.6

  • URLs der Website ergeben auch allein betrachtet Sinn, lassen sich leicht merken wie eintippen und den Inhalt der Seite erahnen.

    Schlecht (URL zur Der-Alte-Seite des ZDF):

    http://www.zdf.de/ZDFde/inhalt/7/0,1872,2050279,00.html

    Besser: (URL zu den Tatort-Seiten der ARD)

    http://www.daserste.de/tatort/faelle.asp

  • Ist die Website mit und ohne »www.« erreichbar? Erfolgen serverseitige Weiterleitungen von Zusatz-Domais auf die Haupt-Domain?

  • Die Site weist ein »favicon« auf.7

Diese Punkte basieren auf der Web Standards Checklist von Russ Weakley auf maxdesign.com.au.

Auf einen Blick