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.