Checkliste zur Webseitengestaltung

Für jede Newsgroup exisitert eine Charta, die man durchgelesen haben sollte, bevor man in der Gruppe postet. Dies gilt auch für die Chartas der d.c.i.w.p.*-Hierarchie und der Gruppe d.c.i.w.a.m., insbesondere dann, wenn kritische Meinungen zu (X)HTML und Webdesign der angekündigten Homepage in d.c.i.w.p.* gewünscht werden.


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 zur Gestaltung
    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..."
  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. 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 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-Tags überprüft?

Und wieder ein Validator, der die Meta-Tags im <head>-Bereich der (X)HTML-Seite überprüft. Meta-Tags sind u. a. Anweisungen für Suchmaschinen. In einem Meta-Tag steht, unter welchen Schlüsselwörtern deine Site erreichbar sein soll, welche Sprache sie enthält, dein Copyright und noch vieles mehr. Meta-Tags 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: 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.


Nach oben


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. Dingern benutzen, dann solltest du bitte darauf explizit hinweisen und gegebenfalls eine Alternative anbieten, für denjenigen, die solche Dingern nicht handhaben bzw. besitzen können oder nicht möchten.


Nach oben


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


Nach oben


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..."


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 d.c.i.w.p.m. erfolgen, da auch andere Mitleser daraus lernen könnten.


Nach oben


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) http://www.lagunenzauber.de
Chris Kaschig (ckaschig@gmx.de) http://www.kaschig.de
Thomas Witzel (thomas.witzel@planet-interkom.de) http://www.frontpatch.de
HTML-Format: Matthias Ronge (matthias.ronge@freenet.de)
Überarbeitet von: Martin Nier (m.nier@gmx.net) http://martiz.de
Unterstützt von: Marc Brockschmidt (marc@marcbrockschmidt.de) http://www.marcbrockschmidt.de
Michael Jendryschik (michael@jendryschik.de) http://jendryschik.de
Sybille Kahl (sybille.kahl@gmx.ch) http://www.sille.ch
Lydia Lalopolis (lalopolis@uni.de)

Letztmals aktualisiert: 14.04.2002


Nach oben


6. Kontakt

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


Nach oben