Das Internet wurde ursprünglich zur Übermittlung von ASCII-Texten konzipiert. Durch die Entwicklung des WWW wurden allmählich größere Anforderungen an die grafische Gestaltung gestellt.

Der systematische Gebrauch von Leerräumen zwischen Textabschnitten kann die Lesbarkeit und Verständlichkeit von Texten entscheidend verbessern. Wichtig ist, dass der vertikale Zwischenraum eine Funktion erfüllt.

Überschriften werden in Html mit <h1> bis <h6> zugeordnet das sind die Absatzformate “Überschrift 1″ bis “Überschrift 6″. Die Eigenschaften der Überschriften-Ebenen werden im Stylesheet gesetzt. Zweite Überschriftenebene, Einzüge, Ränder und enge Spaltenbreiten sind Gütezeichen der Typografie. Als zusätzliches Gliederungselement kann das Aufrufen einer neuen Webseite eingesetzt werden. Die Textlänge einer Seite soll in etwa einer Minute gelesen werden können. Faustregel: nicht mehr als 6 Bildschirmseiten auf einer Webseite.

Horizontale Linien als Trennungen sind nicht notwendig und stören den Lesefluss. Besser sind Zeilenumbrüche und Einzüge.

Ränder machen das Lesen angenehm. Ein linker Rand hilft dem Auge, die Anfänge der Zeilen zu finden. Je breiter der Rand, desto stärker wird die Textspalte hervorgehoben. Linker und rechter Rand werden mit Hilfe von Tabellen erzielt: Der Text steht in der mittleren Spalte. Empfehlenswert ist ein relativer Rand von 10% bis 20% der Fensterbreite. 25% – 65% – 10% ist eine günstige Aufteilung. Achtung: Der Text fließt je nach Bildschirmauflösungen unterschiedlich breit! Für die Verwendung von absoluten Spaltenbreiten ist 380 Pixel für die Textspalte günstig, der Textfluss bleibt auf diese Weise unabhängig von der Bildschirmauflösung, rechter und linker Abstand sind von der Bildschirmauflösung abhängig.

Lange Textzeilen erschweren das Auffinden der nächsten Textzeile. Im Idealfall sollte jeder Abschnitt aus Zeilen mit 10 – 12 Wörtern bestehen. Achtung: Da die Benutzer die Standardschriftgröße des Browsers ändern können, hat der Designer keine Kontrolle über die Anzahl der Wörter pro Zeile. Die meisten User verwenden allerdings immer die Standardeinstellungen ihres Browsers.

Mehrfacher Spaltensatz ist grundsätzlich ein günstiges Mittel, kürzere Zeilen zu erhalten. Der Text darf aber nicht so lang sein, dass man beim Lesen zurückscrollen muß!

Zentrierter Text ist nur für bestimmte Effekte (kurze Dokumente) empfehlenswert. Beachte, worauf sich die Zentrierung bezieht! Bei Verwendung mehrerer Spalten (oder Frames) ist Zentrierung von Text in einer Spalte meist sinnlos, ebenso bei Verwendung von unterschiedlich breiten Abständen rechts und links.

Einzüge signalisieren den Übergang zwischen zusammenhängenden Absätzen. Verwende drei bis fünf feste Leerzeichen als Einzug. Absätze nach einer Überschrift oder vertikalem Leerraum erhalten keinen Einzug.

Designer verwenden keine durch Blickfangpunkte ausgezeichnete Listen. Listenzeilen werden eingezogen, mit Leerraum versehen, wichtige Elemente (Zeilenanfang) werden fett ausgezeichnet.

Weiters ist es empfehlenswert, die Dateinamen klein zu schreiben und auf eine konsequente Verwendung einer einheitlichen Extension zu (html) achten.

Die Startdatei eines einfachen Internet-Projektes sollte default.htm (Windows-Server) oder index.html (UNIX-Server) heißen. In diesem Fall braucht der Dateiname nicht mit der URL eingegeben zu werden. Außderdem ist für Webdesigner dann klar, welche Datei die Startdatei ist.

Konventionen für den Quellcode

Um den Quellcode gut lesbar zu halten, sind folgende Konventionen empfehlenswert:

Die Bild-Dateien für eingebundene Bilder und die Zieldateien von Hyperlinks müssen mit relativen Pfaden – soweit sie sich auf Dateien des eigenen Projektes beziehen – eingegeben werden.

Es ist unbedingt nötig, die Ordner- und Datei-Struktur eines Projektes am lokalen Computer gleich zu halten wie am Server. Für Bilder empfehle ich dringend einen Ordner images innerhalb eines Projektes, in dem die Bilder abgespeichert werden. Ein Verweis auf den Ordner Eigene Bilder oder Eigene Dateien kann nur zu Problemen führen, da diese Ordner am Server nie zur Verfügung stehen.

Wenn eine Bild nicht angezeigt wird oder ein Link nicht funktioniert, genügt ein Blick in den Quellcode dieser Seite im Browser. Hier kontrolliert man, ob die relativen Pfade richtig gesetzt sind. Bei einem fehlerhaften Link genügt oft ein Blick in die Statusleiste des Browsers, wenn man mit der Maus über den Link fährt. Hier sieht man sofort, ob ein Pfad-Problem vorliegt. Allerdings ist vorausgesetzt, dass man über die Dateistruktur des eigenen Projektes auch Bescheid weiß.

Werden Bilder nicht richtig angezeigt oder führen Links ins Leere, kontrolliert man zuerst die relativen Pfadangaben.

Bilder
Rechter Mausklick auf das nicht angezeigte Bild, Eigenschaften ansehen: sind Dateiname und relativer Pfad richtig? Befindet sich das Bild im angegebenen Ordner?

Links
Beim Drüberfahren über einen Link mit der Maus wird in der Statusleiste des Browsers das Ziel angegeben. Hier man kontrollieren, ob der Link richtig gesetzt wurde, vorausgesetzt man hat einen Überblick über die Ordnerstruktur des eigenen Projektes. Im Quelltext sind dann die Angaben zu korrigieren: meist sind die Fehler zu Beginn auf unklare Ordnerstrukturen zurückzuführen.