Seiten über gutes Webdesign, Usability (Benutzbarkeit) und Accessibility (Zugänglichkeit) mit HTML und CSS.
Tipps zu gutem Stil für Webseiten
Guter Stil ist natürlich auch immer eine Geschmacksfrage. Trotzdem gibt es ein paar Dinge, die man wissen sollte. Nicht zuletzt sind dies keine Vorschriften, sondern Tipps, also lesen, verstehen und sinnvoll einsetzen.
Auf dieser Seite:
Guter Stil beim Seiteninhalt (content)
Ein Punkt, der in manchen Diskussionen übersehen wird: erstklassiges Layout und gültiges, nicht browserspezifisches HTML helfen wenig, wenn der Inhalt den Besucher abschreckt. Daher habe ich jeweils eine kurze Liste mit guten Inhalten und schlechten Inhalten zusammengestellt.
Guter Stil für HTML
Trennung von Inhalt und Darstellung
HTML ist eine Textauszeichnungssprache. Mit ihr werden z. B. Überschriften oder Betonungen markiert. Layoutdaten und Darstellungshinweise haben in einer HTML-Datei eigentlich nichts verloren. Dies geht nicht immer vollständig, aber man sollte versuchen, diesem Ziel nahe zu kommen. Damit ist auch die Wahrscheinlichkeit, dass die Seiten auf allen Ausgaberäten funktionieren, am größten.
Valides HTML / CSS
So wie es selbstverständlich ist, dass man sich an die Rechtschreibregeln hält, so selbstverständlich sollte valides HTML (bzw. CSS) sein. Insbesondere weil es viel einfacher automatisch zu prüfen ist.
Kurze, einfache Konstruktionen
Auch wenn einige Menschen Tabellen für Layoutzwecke verteufeln: Wenn dies die kürzeste und einfachste (und nebenbei auch noch mit den meisten Browsern funktionierende) Technik ist, so halte ich dies für den besten Weg.
Je kürzer und einfacher ein Konstrukt ist, um so wahrscheinlicher ist, dass es überall funktioniert. Und zudem ist es auch schneller.
Keine browserspezifischen Erweiterungen
Browserspezifische Erweiterungen können nur manche Besucher sehen. Also verbieten sie sich eigentlich von selbst. Ausnahmen können Erweiterungen sein, die nützlich sind, aber deren Fehlen nicht schadet.
Keine überflüssigen Technologien
Immer den niedrigstmöglichen technischen Standard verwenden. Jede zusätzliche Technologie (z. B. JavaScript) birgt zusätzliche Kompatibilitätsprobleme und zusätzliche Fehlerquellen und sie schränkt die Zahl der Nutzer ein. Also nur einsetzen, wenn damit ein echter Zusatznutzen erreicht werden kann und dabei sicherstellen, dass die Seiten auch ohne diese Technologie funktionieren.
Guter Stil beim Layout
Das Wesen des WWW und die Basis für seinen weltweiten Erfolg ist dies: Jedermann (bzw. -frau) kann sich Webseiten auf jedem beliebigen Ausgabegerät (PC, X-Terminal, PDA, Handy, Fernsehen, ...) ansehen.
Dies bewirkt, dass die angezeigte Seite u. U. mit dem vom Layouter gewünschten Layout keinerlei Ähnlichkeit mehr aufweist. Evtl. beherrscht das Ausgabegerät keine Farben oder keine Grafik - trotzdem muss die Seite "funktionieren", sprich die Information transportieren. Vor diesem Hintergund muss jedes Layout so angelegt sein, dass die Seite auch darstellbar bleibt, wenn wesentliche Teile des Layouts nicht darstellbar sind.
Skalierbares Layout
Das Layout muss sich an die Größe des Browserfensters anpassen. Nehmen Sie als minimale Bildschirmbreite 240 Pixel an (Handy) und als maximale 2400 (großer Monitor). Wenn sich Ihr Layout in diesem Bereich anpassen kann, ist es gut.
Vertikales Scrollen ist kein Problem, aber horizontales scrollen sollte auf jeden Fall vermieden werden.
Modifizierbares Layout
Viele Browser lassen eine Veränderung der Schriftgröße zu. Oder gar den Ersatz Ihres Stylesheets durch ein lokales. Ihr Layout sollte auch mit anderen Schriftarten und Schiftgröße und sogar ohne Stylesheet funktionieren.
Frames, deren Größe sich nicht durch den Anwender ändern läßt, Frames ohne Scrollbar und Zellen mit festen Pixelgrößen, die Text enthalten, verbieten sich damit vollständig.
Auf keinen Fall sollten Sie Techniken einsetzen, die eine Änderung der Schriftgröße verhindern!
Links Erkennbar gestalten
Links müssen nicht zwingend blau und unterstrichen sein. Aber jedes Abweichen hiervon setzt die schnelle Erkennbarkeit herab und sollte deshalb wohlüberlegt sein. Auf alle Fälle sollten Sie (auch für Internet-Laien!) auffällig als Links erkennbar sein, denn nichts ist ärgerlicher, als in einer Sackgasse gelandet zu sein.
Zugänglichkeit sicherstellen
Eine Webseite soll allen zugänglich sein, auch z. B. Menschen mit Sehbehinderungen. Fehlender Kontrast zwischen Text und Hintergund oder zu starke Kontraste in Hintergundbild können die Lesbarkeit eines Textes deutlich herabsetzen. Deshalb sollte das Layout auch den üblichen Richtlinien für Zugänglichkeit (Accessibility) entsprechen.
Urheber © Dr. Joachim Wiesemann
Letzte Aktualisierung: 27.5.2006
Verweise (Links)
- Web Style Guide (englisch)
von Patrick J. Lynch and Sarah Horton (Online-Version des gleichnamigen Buchs)
