Gutes html: Ratschläge
zum Gestalten von internet-Seiten

(historischer Artikel aus dem letzten Jahrtausend)

Anmerkung: Dieser Artikel bezieht sich auf Gestaltungsregeln, basierend auf den Möglichkeiten des letzten Jahrtausends. Für aktuelles Layout und Design und fachgerechten Umgang mit (x)html empfehle ich die Artikel Projekt erstellen, Texte (ausgezeichnet) schreiben und die Rubrik css-Layout.

Wenn jemand sich anschickt, ein Projekt im internet zu verwirklichen, so sollte er sich zunächst die Frage stellen:
"Was will ich überhaupt,
und was bringt mir das?"
Oder mit anderen Worten, es gilt, sich zu überlegen, was überhaupt das Thema des Projektes ist, was die anzusprechende Zielgruppe.
Immer wieder ist zu überprüfen, ob der Inhalt noch zum Thema paßt.

In der Regel sollen für den Besucher der Seiten Informationen bereitgestellt werden - das ist dessen Erwartungshaltung und ist zumeist auch das Anliegen des Autors. Folglich sollte das Projekt daraufhin optimiert sein:

• Die Navigation im Projekt sollte ergonomisch sein, die Darstellung des Inhaltes unterstützen, sollte vom Besucher nachvollziehbar sein, niemals das Design über den Inhalt stellen.
  
• Der Besucher sollte nicht durch rein dekorative Gestaltungselemente vom Inhalt des Projektes abgelenkt werden - keine vom Besucher nicht nachvollziehbaren Hintergründe, Animationen, animierte Werbebanner, die vom Inhalt der Seite ablenken.
  
• Das Design ist natürlich immer eine Frage des (schlechten) Geschmackes - insbesondere bei internet-Seiten. Wer Spaß daran hat, könnte das Design der eigenen Seite alle paar Monate an den allgemeinen Modegeschmack anpassen, was gerade 'in' ist, was 'hipp' oder 'cool' ist - Verlaß ist dann auf jeden Fall darauf, daß es immer wieder erforderlich sein wird, das komplette Design umzustellen, wenn das auch so bleiben soll.
  Um sich solche Arbeit zu ersparen, empfiehlt sich eine klare, einfache, zeitlose Form. Und am besten, man stellt gleich mehrere Layouts zur Auswahl, weil die Geschmäcker bekanntlich verschieden sind; das geht am besten durch Trennung von Inhalt (xhtml) und Layout (css).
  Gutes Design ist wie ein Spiel:
  Regeln werden aufgestellt, an die sich dann gehalten wird.
  Je einfacher und klarer aber die Regeln sind, um so stärker der Ausdruck.
• Texte sollten unter allen Umständen ohne weiteres gut lesbar sein.
  Es kann ja durchaus vorkommen, daß einmal ältere Leute vorbeischauen oder gar solche, die an Detektiv-Spielen kein Interesse haben.
  Also keine stark strukurierten, kontrastreichen Hintergrundbilder, keine Hintergrundfarben, vor denen sich die Textfarbe schlecht abhebt.
  
• Dem Betrachter sind keinesfalls absolute Schriftgrößen aufzunötigen, weder mit dem font-tag noch mit style-sheets! Der Benutzer eines browsers wird sich schon etwas dabei gedacht haben, wenn er die Standardschriftgröße für sich gut lesbar eingestellt hat.
  Finger weg von style-sheets, wenn durch das Design nur der Besucher terrorisiert wird. Das css soll so eingesetzt werden, daß es durch seine dekorative Wirkung dem Leser hilft, den Inhalt besser zu verstehen, die Struktur der Seite besser zu verstehen, sich leichter zu orientieren.
  Auch eine winzige Schriftgröße für Kleingedrucktes ist unangebracht - das entweder weglassen oder auf eine extra-Seite auslagern.
  
• Sonderzeichen sind zu maskieren, insbesondere auch Umlaute und sz-Ligaturen - Es gibt auch Leute, die einen anderen Zeichensatz geladen haben als der Autor. Ich zum Beispiel habe immer noch nicht herausgefunden, welche Anführungszeichen Leute verwenden, wenn bei mir stattdessen ein Fragezeichen erscheint.
  Was ich auch immer wieder gern vergesse - auch & gehört maskiert, auch in urls im a href-tag, wenn es sich um die Trennung von php-Parametern oder cgi-Paramentern handelt.
  Das Euro-Zeichen sollte besser gar nicht verwendet werden (gibt es nicht auf allen Betriebssystemen - und wenn es unbedingt sein muß dann wenigstens maskieren: €.
• Wenn schon Spielereien und Schnickschnack dargestellt werden sollen, ist das auf eigene Seiten auszulagern, den Besucher nicht damit auf Seiten nerven, auf denen er sinnvolle Informationen erwartet.
  Sogenannte Intro-Seiten, die entweder 5 Minuten geladen werden oder gar nicht funktionieren - und selbst wenn sie funktionieren keine Information enthalten, sind der Schocker für jeden Besucher, insbesondere wenn ein defektes Intro den Zugang zur Information verhindert (zum Beispiel, weil das dazu notwendige Plugin nicht vorhanden ist, und keine html-Alternative angegeben wurde).
• Die wichtigsten Informationen müssen für jeden zugänglich sein - keine Start- oder Navigationsseiten, die nur mit java oder java-script oder gar shockwave-flash funktionieren. Durch ungeschickte oder fehlerhafte Anwendung von html und css kann Inhalt ebenfalls unzugänglich gemacht werden, besonders für Leute, die einen anderen browser benutzen als der insbesondere mit css noch unerfahrene Seitenersteller.
  Auch eine umständliche Anmeldung (login), bevor Informationen gesehen werden, wird Besucher eher verschrecken. Wenn das überhaupt notwendig ist, sollten nicht angemeldete Besucher immerhin ohne weiteres als Gäste gucken können, ob es sich überhaupt lohnt, sich anzumelden.
• Wenn etwas nicht funktioniert, sollte für den Besucher klar sein, warum nicht (entsprechende Meldung sollte statt der Funktion auf der Seite erscheinen). Insbesondere gilt das für plugins wie java, shockwave-flash etc. Für diese soll im object-Bereich eine html-Alternative angeboten werden, die deren Funktion ersetzt beziehungsweise den Inhalt wenigstens erläutert. Funktionelle Komponenten wie Menüs sind ungeeignete Spielfelder für java oder flash.
  Bei java-script und cookies sollte man den Besucher auch nicht erst im Quelltext danach suchen lassen, warum die Seite nicht funktioniert, nur weil dieser es aus weltanschaulichen Gründen für sicherer hält, das nicht zu aktivieren. Der Besucher darf auch nicht dazu genötigt werden, das zu aktivieren, der Seitenersteller hat Alternativen bereitzustellen - oder was einfacher ist, ganz auf cookies und java-script verzichten, um solchen Problemen aus dem Weg zu gehen.
  Der Besucher sollte von der Funktion der Seite her verstehen, daß der Einsatz dieser Hilfsmittel sinnvoll und notwendig ist. Für java-script ist mir bislang keine Anwendung bekannt geworden, die man nicht durch xhtml, css oder serverseitig besser hätte lösen können. Daraus folgt, daß java-script allenfalls rein dekorative Funktionen haben darf, keine funktionellen.
  Die sinnvolle Anwendung von cookies kann im Bereich von sessions liegen, kann aber auch meist durch serverseitige sessions ersetzt werden.
• Überschriften und Menüpunkte sollten zum Inhalt der Seite passen.
  Das ist einfacher gesagt als getan, denn oft fällt einem erst beim anschließenden Nachlesen auf, daß der Inhalt oft gar nicht zur Überschrift oder zum Menüpunkt paßt.
• Bei der Gestaltung der Seiten ist daran zu denken, daß diese mit verschiedenen browsern besucht werden. Sie werden auf Monitoren verschiedener Größe und Auflösung dargestellt.
  browser-spezifischer html-Dialekt ist auf jeden Fall zu vermeiden, wenn überhaupt, darf er die wesentlichen Funktionen nicht beeinträchtigen.
• Zwar kann es die Lesbarkeit von Texten verbessern, wenn die Zeilenbreite begrenzt wird, aber der Autor sollte weder davon ausgehen, daß alle Besucher wie er selbst einen 12-Zoll Monitor mit einer Auflösung von 1 Pixel/Millimeter benutzen noch alle einen Adlerblick wie er mit 12 Jahren haben ;o)
  Andere Nutzer hingegen werden wegen einer großen Bildschirmauflösung oder einer Sehbehinderung große (in Pixeln) Schriftgrößen eingestellt haben - eine Zeilenbreitenbegrenzung ist also nur in Buchstabenbreiten sinnvoll (in css etwa das Maß em), nicht in Pixeln oder Zentimetern.
  Der Nutzer kann auch immer problemlos sein browser-Fenster verkleinern, nicht aber vergrößern.
• Der Besucher ist nicht darüber zu belehren, mit welchem browser, welcher Bildschirm- oder Fenstergröße er die Seite betrachten soll.
  Eine solche Belehrung zeigt dem Besucher nur, daß der Autor unfähig ist, den Inhalt in ordentlichem html zu entwerfen.
• Grelle, ins Auge des Betrachters einbrennende Farben und Farbkombinationen nerven und vertreiben den Besucher.
• html-Editoren können das schnelle Erstellen von internet-Seiten vereinfachen.
  Um jedoch wirklich das zu erreichen, was den eigenen Vorstellungen entspricht und was optimal ist, wird der Autor einer internet-Seite auf Dauer nicht darum herum kommen, sich mit html und css selbst zu beschäftigen und die Seiten mit Text-Editoren zu optimieren beziehungsweise zu erstellen.
  Der Autor sollte sich den html-Text, den sein Editor erstellt hat, unbedingt direkt ansehen, gegebenenfalls kilobyte große Kommentarzeilen entfernen.
  Insbesondere Editoren der Firma microsoft sind dafür berüchtigt, daß sie mehr überflüssigen Kommentartext erzeugen als wirksamen html-Text. Selbst bei letzterem läßt sich oft - für den Betrachter unsichtbar! - ein großer Teil einsparen! Lange Kommentarpassagen und überflüssiger html-Text verlängern die Ladezeit des Dokumentes und frustrieren den Betrachter!
  Ähnlich schlimm sind diese 'du bekommst was du siehst'-Editoren, die oft dazu verleiten, schlecht strukturiertes html zu produzieren - html ist eine Textauszeichnungssprache, mit der Text strukturiert wird und mittels der html-tags werden dem enthaltenen Text schon funktionelle Bedeutungen zugeordnet (Überschriften, Absatz, Liste, Tabellen etc). Diese Zuordnung soll sinnvoll und optimal sein - das funktioniert auch bei guten html-Editoren nur, wenn sie fachgerecht eingesetzt werden.
  Wer unverstandene html- oder css-Bruchstücke irgendwo aus den Weiten des internets sammelt und sie unreflektiert in seine Seite einbaut, ist selbst für deren Fehlfunktionen verantwortlich - oft sind entsprechende Angebote schierer Unfug, der durch wenig Nachdenken oder etwas Sport im freien hätte vermieden werden können.
• 'lustige' 'under construction'-Bildchen oder -Seiten sind inhaltlicher Unsinn.
  Den Besucher interessiert nicht, daß der Autor keine Lust oder Zeit hatte, seine Seite zu einem sinnvollen Abschluß zu bringen.
  Bestenfalls kann der Autor eine extra-Seite spendieren, auf der zu erfahren ist, was noch geplant ist. Auch das ist nur sinnvoll, wenn ebenfalls ein Zeitplan angegeben ist.
• Die Startseite sollte als Datei recht klein sein (insgesamt mit Bildern besser nicht größer als 30 kilobyte) - sie sollte schnell im browser dargestellt sein, damit ein Besucher nicht schon das Interesse verliert, bevor sich die erste Seite überhaupt aufgebaut hat.
• Gegebenenfalls sollten für Suchmaschinen auf der ersten Seite die wesentlichen Inhalte in Textform aufgeführt werden.
  Bei der Verwendung von frames sollte es einen entsprechende noframe-Bereich geben. Besser aber man verzichtet ganz auf frames und nutzt konsequent und sinnvoll css zur Positionierung von Inhalt.
• Das Design der Einzelseiten sollte zusammenpassen, damit sie gleich durch das Design als zusammengehörig erkannt werden - gleiches Hintergrundbild, gleiche Hintergrund- und Textfarbe, gleiche Schrift, gleiche Textgrößen, ähnlicher Seitenaufbau...
• Der Besucher hat weder in allem Recht, noch muß ihm alles Recht gemacht werden.
  Hat der Autor ihn jedoch erst einmal vergrault, bevor er überhaupt begonnen hat, ihn in das Projekt hineinzuziehen, so hat er sein Ziel sicherlich verfehlt.