dciwam.de / checkliste / index

Checkliste zur Webseitengestaltung

Da viele Fragen in den Gruppen der dciwp*-Hierarchie und der Gruppe <dciwam/> häufig auftreten, wurde eine Checkliste zusammengestellt, mit der du grundsätzliche Fehler vermeiden kannst. Die Kenntnis dieser Checkliste sollte Voraussetzung sein, wenn du in diesen Gruppen postest. Diese Checkliste ist die FAQ der Gruppe <dciwpm/>.
Für jede Newsgroup exisitert eine Charta, die du ebenfalls gelesen haben solltest.


Inhaltsverzeichnis überspringen


Inhaltsverzeichnis

  1. Brauchbares (X)HTML
    1. (X)HTML-Validator
    2. CSS-Validator
    3. Tidy
    4. ALT-Attribute
    5. Unter verschiedenen Browsern angeschaut?
    6. Schon unter einem Textbrowser angeschaut?
    7. Zugänglichkeitsrichtlinien für (X)HTML-Seiten
    8. Meta-Tags
    9. Hyperlinks überprüft?
    10. Kontaktmöglichkeit vorhanden?
  2. Hilfreiche Angaben zur Website
    1. Adresse der Homepage
    2. Inhaltsbeschreibung
    3. Benutzt du...?
  3. Hilfreiche Seiten
    1. Einstieg-Seiten
    2. FAQ zum Thema Webseitengestaltung
    3. Ergonomie
    4. Zugänglichkeit
    5. Doctypes
    6. Meta-Tags
  4. Kritische Meinungen zu ...
    1. ... Frames
    2. ... Countern
    3. ... Sinn und Unsinn von Banner-Werbung
    4. ... Copyrights (Umgang mit Urheberrechten)
    5. ... Disclaimer
    6. ... Links
    7. ... "Optimiert für..."
    8. ... Flaggen als Sprachauswahl
  5. Entstehung dieser Checkliste
  6. Kontakt

1. Brauchbares (X)HTML

Vor allem wenn du deine Site mit FrontPage oder einem anderen WYSIWYG-Editor erstellt hast, solltest du die Site auf brauchbares (X)HTML überprüfen. Dies ist nicht die Aufgabe der Newsgroup.

1.1 Hast du dein (X)HTML validiert?

Der Validator von W3C zeigt dir, welche Fehler deine Homepage enthält. Die Ergebnisse solltest du in die Lupe nehmen und dann Schritt für Schritt die Fehler beseitigen.

Alternativ kannst du auch den Validator von WDG verwenden, der auch alle Seiten deiner Webseite auf einmal prüfen kann. Man sagt, dass die Fehlermeldungen dort verständlicher seien.

1.2 Benutzt du CSS? Wenn ja, hast du deine Site mit dem CSS-Validator geprüft?

Der CSS-Validator überprüft auf der Seite nochmal konkret die CSS-Regeln. Dabei wird auch auf die CSS-Angaben im <head>-Bereich geachtet. Selbst wenn du die CSS-Datei extern durch <link> lädst, wird diese Datei geprüft. Dabei werden Verbesserungsvorschläge gemacht.

WDG bietet ebenfalls eine Alternative zur Validierung von CSS an:

Letztendlich solltest du testen, ob deine Website auch ohne CSS auskommen kann. Das kann bei älteren (Text-)Browsern durchaus passieren, dass deine Website plötzlich nicht mehr lesbar ist. Weitere Informationen findest du unter Punkt 1.5 bzw. 1.6.

1.3 Hast du Tidy benutzt?

Tidy ist eine Art "Codeaufräumer", entwickelt von W3C-Mitbegründer Dave Raggett. Du musst, nachdem du dir dieses kleines Tool heruntergeladen hast, nicht mehr ins Internet, um deine Site nach Fehlern zu überprüfen.

Tidy ist eine feine Sache - solange es nicht um XHTML geht. Da ist es sich nämlich mit dem W3C-Validator nicht immer einig.
Ausserdem ist das Programm Tidy in dem Freeware-Homepage-Editor 1stPage bereits enthalten. Es ist auch möglich, Tidy als Zusatzmodul (Plugin) für den HTML-Editor Phase 5 zu installieren.

Nichtdestotrotz besteht hier keine Pflicht, Tidy zu benutzen. Denn es dient nur zur "Fehler-Reinigung" vor der letzten Instanz zur Benutzung des W3C-Validators.

1.4 Hast du bei Bildern das ALT-Attribut sinnvoll gesetzt?

1.5 Hast du deine Website unter verschiedenen Browsern getestet?

Vor allem dann, wenn du Wert auf strikte Trennung von Markup und Layout legst und intensiv mit CSS arbeitest, solltest du deine Website auf verschiedenen Browser testen. Du wirst erstaunt sein, wie groß die Darstellungsunterschiede sein können. Teste deine Seiten mindestens in den aktuellen Versionen folgender Browser:

Auch auf dem Netscape Communicator 4.x sollte man heute noch testen, vor allem wenn man eine kommerzielle Seite betreibt, die einem großen Benutzerkreis zugänglich sein soll.
Ältere Browser-Versionen unterstützen viele Elemente, vor allem aber viele CSS2-Eigenschaften, gar nicht oder falsch, sind aber trotzdem noch verbreitet. Als weitere Testmöglichkeit gibt es einen Emulator, mit dem Du Deine Website unter verschiedenen älteren Browsern betrachten kannst:

Um CSS, besonders bei älteren Browsern, vor diversen fehlerhaften Implementationen zu verstecken, empfiehlt sich ein Blick auf diese Seite:

1.6 Hast du deine Website unter einem Textbrowser angeschaut?

Es gibt nicht nur grafische Browser, sondern auch sogenannte Textbrowser. Es sind Client-Programme, die keine Grafiken darstellen können, sondern nur reinen Text. Somit dienen diese Browser hauptsächlich für Blinde und Sehbehinderte.
Einer von denen ist Lynx, welche man im Internet für die Betrachtung testen kann:

Du kannst auch alternativ Lynx auf deinen Rechner herunterladen:

1.7 Berücksichtigst du die Zugänglichkeitsrichtlinien für Web-Inhalte?

1.8 Hast du die Meta-Elemente überprüft?

Und wieder ein Validator, der die Meta-Elemente im <head>-Bereich der (X)HTML-Seite überprüft. Meta-Elemente enthalten zusätzliche Angaben zum Dokument für Webserver, Webbrowser oder Suchroboter. In einem Meta-Element steht, unter welchen Schlüsselwörtern deine Site erreichbar sein soll, welche Sprache sie enthält, dein Copyright und noch vieles mehr. Meta-Elemente kann man auch für Weiterleitungen verwenden.

1.9 Hast du deine Hyperlinks überprüft?

Nichts ist schlimmer als nicht funktionierende Hyperlinks.

1.10 Kontaktmöglichkeit vorhanden?

Vielleicht will jemand mehr über deine Hobbies erfahren... darum solltest du Kontaktmöglichkeiten anbieten. Dies kann ein mailto:-Link oder ein Feedback-Formular sein. Im Feedback-Formular sollten allerdings keine unnötigen Dinge abgefragt werden. Bei privaten Pages braucht man wirklich keine Telefonnummer anzugeben, um mit dir in Kontakt zu treten.

Wenn du als Kontaktmöglichkeit Email-Adressen verwendest, dann vergewissere bitte, dass diese auch entsprechend gekennzeichnet sind, so in der Form: mailto:xxx@yyy.tld. Das heisst, dass die Email-Adresse auch richtig als Text dargestellt wird.

Websites mit Formularen haben für Nutzer den Vorteil, dass sie ohne großen Aufwand gleich einen Text verfassen und schnell abschicken können. Falls du eins brauchst, dann empfehlen wir dir, den unten genannten Vorschlag zu benutzen:

Ein externer Formular-Anbieter, der für den privaten Gebrauch kostenlos ist und deswegen für alle, die keine internen Formular-Möglichkeiten haben, sehr empfehlenswert.

Der optimale Weg ist aber, wenn beide Kontaktmöglichkeiten auf einer Website vorhanden sind, so dass man auf die unterschiedlichen Bedürfnissen eingehen kann.


Zum Inhaltsverzeichnis


2. Hilfreiche Angaben zur Website

2.1 Adresse

In der Form <http://mein.host/meine-site/>
Ausserdem ist es angebracht, die Adresse sowohl im Betreff als auch besonders im Text zu nennen ist. Zusätzlich zu der Adresse im Betreff (hier ohne http://-Präfix) solltest du bitte einen Kurztext angeben, um namensgleiche Threads zu verhindern und eine spätere Suche zu erleichtern.

2.2 Beschreibung

Den Inhalt gut beschreiben, damit man weiß, was du überhaupt mit deiner Site "erreichen möchtest". Z.B. viele Urlaubsfotos aus Hawaii, für alle, die dort mal hin wollen... oder so ähnlich.

2.3 Benutzt du...

Falls du einer von diesen o.g. Techniken benutzen möchtest, solltest du bitte darauf explizit hinweisen und gegebenfalls eine Alternative anbieten, für denjenigen, die diese Techniken nicht benutzen können oder möchten.


Zum Inhaltsverzeichnis


3. Hilfreiche Adressen

3.1 Klassische, empfehlenswerte Einstieg-Seiten

3.2 FAQ zum Thema Webseitengestaltung

3.3 Informationen zur ergonomischen Gestaltung von Webseiten

3.4 Informationen zur Zugänglichkeiten von Webseiten

3.5 Informationen über Doctypes

3.6 Wissenwertes über Meta-Tags


Zum Inhaltsverzeichnis


4. Kritische Meinungen zu ...

4.1 ... Frames:

4.2 ... Countern:

4.3 ... Sinn und Unsinn von Banner-Werbung:

4.4 ... Copyrights (Umgang mit Urheberrechten):

4.5 ... Disclaimer:

4.6 ... Links:

4.7 ... "Optimiert für..."

4.8 ... Flaggen als Sprachauswahl:


Die Beurteilung einer Website ist im Allgemeinen eine zeitaufwändige Angelegenheit und geschieht auf freiwilliger Basis. Daher sollte jemand, der um Kritik an einer Website gebeten hat, fairerweise auch bestätigen, dass sie/er eine solche Beurteilung gelesen hat. Dieses kann per E-Mail erfolgen. Folgediskussionen über Kritikpunkte sollten jedoch öffentlich in dciwpm. erfolgen, da auch andere Mitleser daraus lernen könnten.


Zum Inhaltsverzeichnis


5. Entstehung dieser Checkliste

Diese Checkliste ist entstanden, weil immer wieder die gleichen Fehler gemacht werden. Es gibt Mittel, mit denen jeder die Site selbst vorab prüfen kann, um festzustellen, ob Fehler enthalten sind. Anhand dieser Checkliste kann man die wichtigsten Mängel finden - und berichtigen. Das ist einfacher und schneller, und die Diskussion der Site konzentriert sich dann mehr auf Inhalt und Gestaltung.

Wir hatten uns das Ziel gesetzt, eine Liste zu erstellen, in der alle wichtigen URIs aufgeschrieben sind.
Nun wird hoffentlich nur noch bei (einigermaßen) fehlerfreien Seiten um Kritik gebeten.

Die Idee dazu hatte: Björn Höhrmann (bjoern@hoehrmann.de) http://bjoern.hoehrmann.de
Initiiert von: Heinrich Gremmig (bpascal@gmx.net)
Ergänzt von: Boris Bischoff (boris@lagunenzauber.de)  
Chris Kaschig (ckaschig@gmx.de) http://www.kaschig.de
Thomas Witzel (thomas.witzel@planet-interkom.de)  
Gérard Schneider (g.schneider@dciwam.de)
HTML-Format: Matthias Ronge (matthias.ronge@freenet.de)
Überarbeitet von: Martin Nier (info@martiz.de) http://martiz.de
Unterstützt von: Michael Jendryschik (michael@jendryschik.de) http://jendryschik.de
Sybille Kahl (sybille.kahl@gmx.ch) http://www.sille.ch
Lydia Lalopolis (lalopolis@uni.de)

Zum Inhaltsverzeichnis


6. Kontakt

Hier hast du die Möglichkeit, mit dem derzeitigen Verwalter der Checkliste per Mail oder Formular Kontakt aufzunehmen:


Zum Inhaltsverzeichnis

Zum Seitenanfang

URL: http://dciwam.de | Letzte Änderung: 19.05.2009 | G. Schneider | Kontakt