Startseite >> Programmieren : HTML : WWW : Tipps :

Design-Guide für HTML und Websites

Wer sich mit einer Web-Seite im Internet präsentiert sollte Grundregeln beachten. Nur wenn eine Seite professionell wirkt, wird sie auch gelesen und regelmäßig wieder besucht. Dieser Artikel nennt die wichtigsten Kritierien, die eine Site erfüllen sollte und gibt Tips zur Umsetzung.

(erschienen in der Zeitschrift Chip, irgendwann 2002 - einige Informationen aus diesem Artikel können inzwischen überholt sein)

Die Programmierung einer Homepage für das World Wide Web ist nur die halbe Miete. Das Konzept und die Inhalte müssen stimmen.

Immer noch stellen zu viele Web-Gestalter das Aussehen vor den Inhalt. Klar – eine Website soll optisch ansprechen. Doch in erster Linie muß sich das Aussehen am Inhalt und an den Bedürfnissen des Leser orientieren. Verzichten Sie deshalb auf langatmig ladende Grafiken und auf AufmacherSeiten. Die halten den Leser auf der Suche nach Informationen nur auf. Denn 42 Prozent der Surfer sind in erster Linie auf der Suche nach Information im Web. Das sagt eine Studie der Marktforscher von Pricewater Coopers.

Inhalte zeigen

Erliegen Sie nicht dem alten Trugschluß, man müsse Informationen verstecken, damit der Leser Spaß beim Suchen

hat. Die Zeit hierfür will sich niemand nehmen. Beantworten Sie deshalb gleich auf der Eingangsseite diese Fragen:

Was bietet Ihre Site?

Wer sind Sie?

Was macht Ihre Seiten so einizgartig?

Am besten versorgen Sie die Leser gleich mit ersten klaren Informationen und Links zu Ihren Inhalten – so machen es auch die Portale: Gleich am Eingang gibt es aktuelle Kurzmeldungen und die Querverweise.

Verstecken Sie Ihre Links nicht hinter dicken Client Side Image Maps. Quetschen Sie diese auch nicht in einen unübersichtlichen Text. Besser: Versehen Sie die Links mit informativen Texten, erklären Sie kurz, was sich hinter welcher Verbindung verbirgt. Die Leser werden es Ihnen danken, indem Sie schnell auf eines Ihrer Links klicken und dann weiterlesen.

Auf die Struktur achten

Achten Sie darauf, dass Ihre Website klar strukturiert ist. Da bieten sich zwei Modelle an. Kleine Sites werden sternförmig aufgebaut. Alle Unterseiten sind direkt von einer Eingangsseite aus erreichbar und linken dorthin wieder zurück. Da kann sich niemand verirren. Außerdem ist der Aufwand minimal, um eine Seite hinzuzufügen und wieder wegzunehmen.

Mehr Aufwand wird es allerdings, wenn Sie umfangreiche Informationen auf vielen Seiten ins Web stellen wollen. Hier greifen Sie auf ein hierarchisches Prinzip zurück. Dieses erinnert an die Verzeichnis- und Dateianordnung auf Ihrer Festplatte: Von einer Hauptseite aus kann der Web-Surfer auf eine Rubrik-Unterseite zugreifen, die ihrerseits wiederum Unterseiten enthält. So lassen sich Themenbereiche zusammenfassen und der Leser hangelt sich in dieser Struktur von Information zu Information immer weiter in die Site hinein. Bilden Sie diese Struktur auch in den Verzeichnissen Ihres Servers ab. Jede neue Rubrik landen in einem eigenen Ordner.

Für perfekte Navigation braucht jedes Dokument braucht einen Link auf die nächst höhere Seite wie auch auf die Homepage. Gerade der Link auf die Hauptseite ist wichtig: Denn er bildet den letzten Rettungsanker für verirrte Leser. Zudem weist er allen Surfern, die eine Site per Suchmaschine erreichen den Weg zur Hauptseite.

Wichtig in diesem Zusammenhang ist auch: Starten Sie nicht auf jeder Seite ein neues Gestaltungsexperiment. Bauen Sie jedes Dokument nach einem einheitlichen Schema auf. Das wichtigste: eine Navigationsleiste gehört immer an dieselbe Stelle. So findet der Surfer auf einen Blick alle wichtigen Elemente, um sich auf Ihren Seiten zu informieren.

Wenn Grafik, dann richtig

Wenn Sie Grafiken auf Ihrer Homepage zeigen, dann achten Sie darauf, dass sie so wenig Platz brauchen wie möglich. Generell stehen die beiden Formate GIF und Jpeg zur Verfügung. GIF ist ideal für Navigationselemente und alle Grafiken mit großen einfarbigen Flächen – Bildschirmfotos, Organigramme oder einfache Präsentationsbilder sind gutes Futter für GIF. Jedoch vermag das Format nur Bilder mit maximal 256 Farben darzustellen. Alles andere fällt in die Zuständigkeit von Jpeg. Nutzen Sie hier beim Speichern der Grafiken die Möglichkeit, verschiedene Kompressionsfaktoren auszuprobieren. Wählen Sie hierbei den Faktor, der den geringsten Platzverbrauch bei der besten Qualität bietet.

Ideal ist es, wenn sich Grafiken auf mehreren Seiten wiederholen. Denn dann muß der Browser das Bild nur einmal übertragen, packt es dann in seinen Cache und kann es von hier aus immer wieder abrufen.

Wichtig für Besucher mit Textbrowsern sind die ALT-Parameter im Image-Tag. Informieren Sie den Surfer damit, was sich hinter dem Bild verbirgt:

<img src="info.gif" alt="Unternehmensdaten im Bild">

So kann ein Leser der beispielsweise mit Lynx unterwegs ist, entscheiden, ob er das Bild laden will oder nicht. Außerdem erscheint der Inhalt des Alt-Parameters sobald man mit der Maus über das Bild fährt. Auch eine Gelegenheit, weitere Informationen an den Mann zu bringen.

Maximal zwei Frames

Frames dienen oft als Navigationshilfe für eine Homepage. Alle anderen Versuche, mit Hilfe von Frames raffinierte Layouts zu zimmern, scheitern an der mangelnden Flexibilität dieser Technik. Hierfür verwenden Sie besser Tabellen.

Wenn Sie Frames für Navigationszwecke einsetzen, teilen Sie die Seite in einen schmalen oder flachen Frame von nicht mehr als 150 Bildpunkten Breite oder etwa 100 Pixel Höhe. So bleibt immer noch genug Raum für die Inhalte. Legen Sie die Größe in absoluten Werten fest. Im Quelltext würde das so aussehen:

<html>

<head><title>Eingangsseite</title></head>

<frameset cols="100, *">

  <frame src="frame_navi.html" name="navdoc">

  <frame src="frame_welc.html" name="inhalt">

</frameset>

</html>

Hier definierten Sie zwei senkrechte Frames, von denen einer 100 Pixel breit ist. Der zweite Frame nimmt den restlichen Platz ein.

Wenn Sie mit Frames arbeiten, achten Sie auf den richtigen Umgang mit externen Links. Versehen Sie diese immer mit dem Parameter target = _top. Verzichten Sie darauf, Seiten von anderen Servern in Ihre Frame-Struktur einzubauen. Das sieht nicht gut aus und ärgert den Leser. Und das Unterbringen fremder Seiten in den Frames funktioniert auch nicht mehr überall. Manche Web-Site-Betreiber haben inzwischen Programme geschrieben, die ihre Homepage automatisch aus Frames befreien.

Saubere Links

Arbeiten Sie mit Links. Sie sind das Rückgrat des World Wide Web. Links passen in Texte, in Menüs und hinter Bilder. Aber das beste Link nützt nichts, wenn es nicht funktioniert. Probieren Sie deshalb jedes Link aus, bevor Sie es auf Ihre Seiten übernehmen. Am besten tippen Sie die Adresse vorher in ihren Browser ein und sehen nach, ob die Seite erscheint. Wenn alles klappt, kopieren Sie den Link aus dem Adressfenster Ihres Browsers direkt in den Quelltext oder in den Hyperlink-Dialog Ihres Editors. Vergessen Sie auch nie, vor den Link ein korrektes http:// zu setzen.

Wenn Sie interne Links einbauen, setzen Sie auf relative Adressierung. Dabei verwenden Sie eine Schreibweise, wie Sie bei der Navigation in Verzeichnissen zum Einsatz kommt, also "..", um ein Verzeichnis nach oben zu wechseln. Ein Beispiel: Sie setzen einen Hyperlink im Dokument http://www.foo.bar/info/daten/umsatz.html auf das Dokument http://www.foo.bar/info/marketing/presse.html. Das Link muß dann so aussehen. <a href="../marketing/presse.html">Presse</a>.

Sie weisen also den Browser an, erst ein Verzeichnis nach oben zu wechseln und dann in das Verzeichnis marketing zu sehen. Dort angekommen wird die Seite presse.html abgerufen.

Vorteil dieser etwas komplizierten Methode: Sie haben es leichter, wenn Sie Ihre Seite umstrukturieren. Dann lassen sich ganze Verzeichnisbäume umräumen, ohne dass die internen Links neu geschrieben werden müssen. Dasselbe gilt, wenn Sie mit Ihrer Site auf einen neuen Server umziehen.

Sorgfalt mit Stylesheets

Cascading Stylesheets lösen viele Probleme bei der Gestaltung von Webseiten. Doch falsch eingesetzt, schaffen Sie mindestens ebenso viele neue Probleme. Der Haken liegt in der Kompatibilität zwischen dem Internet Explorer und dem Netscape Navigator. Denn die beiden Browser haben unterschiedliche Auffassungen von Stilvorlagen. Werfen Sie deshalb vor dem Einsatz von Stylesheet-Anweisungen einen Blick auf die Kompatibilitätsliste unter http://webreview.com/wr/pub/guides/style/safegrid.html. Einen weiteren Blick ist die CSS-Test-Suite wert: http://www.w3.org/Style/css/Test/.

Testen Sie Ihre mit Stylesheets aufgebauten Seiten möglichst auch mit einem alten Browser. Das Design muß dann zwar nicht unbedingt schön aussehen, sollte aber zumindest noch lesbar erscheinen.

Stille über alles

Das World Wide Web ist als Medium für Sound und Musik nur begrenzt geeignet. Internet-Radio und Klangexempel von Musikern sind noch ganz nett. Aber unerträglich für den Surfer sind die selbst aufgenommenen WAV-Dateien mit "Willkommen auf meiner Homepage" oder endlos vor sich hinklimpernde MIDI-Dateien. Die WAV-Files sind zudem noch wahre Bandbreitenfresser. Selbst kurze Jingles brauchen paar 100 Kbyte. Störend sind unaufgeforderte Klänge allemal. Man denke nur an den, der im Büro surft oder nebenbei telefonieren will. Lassen Sie Ihren Lesern Ruhe.

Java sparsam

Es ist verlockend, hübsche Java-Applets einzubinden und möglichst noch eine kleine Shockwave-Animation auf die Homepage zu klemmen. Doch hier sollten Sie sich zurückhalten. Java-Applets kosten Übertragungszeit und sollten nur dann zum Einsatz kommen, wenn sie wirklichen Nutzwert bringen. Auch Plugin-pflichtige Inhalte sollten nur auf Ihrer Homepage stehen, wenn es anders nicht geht. Denn nicht jeder Surfer hat eine komplette Plugin-Ausstattung an Bord und will ein paar Megabyte herunterladen, nur um Ihre Site zu sehen.

Auf den Quelltext achten

Wer von Hand HTML programmiert, braucht sich keine Sorgen machen: Er wird schlanken und schnellen Code ohne viele Schnörkel schreiben. Doch auch bei der Programmierung von Hand gibt es Problemstellen. Besonders viele Daten entstehen, wenn Sie in Tabellen mit verschiedenen Schriftarten arbeiten und dabei das -Tag benutzen. Denn Sie müssen dieses Tag in jeder Tabellenzelle neu setzen, zum Beispiel:

<table>

<tr><td><font face="Arial">Zelle1</font></td><td><font face="Arial">Zelle2</font></td></tr>

<tr><td><font face="Arial">Zelle3</font></td><td><font face="Arial">Zelle4</font></td></tr>

</table>

Bei üppigen Tabellen ergibt das einen großen, unübersichtlichen Datenhaufen. Besser, Sie nutzen Cascading Stylesheets:

<style type="text/css">

td {  font-family: "Arial"}

</style>

<table><tr>

<td>Zelle1</td><td>Zelle2</td>

<td>Zelle3</td><td>Zelle4</td>

</tr></table>

Mit diesem Stylesheet legen Sie fest, daß alle Tabellenzellen generell in Arial-Schrift gezeichnet werden. Zählen Sie nach: Sogar inklusive der Stylesheet-Definition ist der zweite Code kürzer als die erste Fassung. Nachteil: Alte Browser mit Versionsnummern unterhalb der 4 kommen nicht mit den CSS zurecht.

Auch wer mit einem HTML-Editor wie Netobjects Fusion arbeitet, sollte das Ergebnis immer noch einmal kontrollieren. Viele Editoren neigen dazu, viel zu häufig das Font-Tag zu setzen. Untersuchen Sie den Quellcode auf solche Redundanzen und werfen Sie überflüssiges hinaus.

Schließlich sollten Sie sich Selbstdisziplin auferlegen und sauberes HTML programmieren. Denn mit der Zeit schleichen sich Marotten ein: Eine Tabellenzeile besteht dann nur aus <td>-Tags ohne abschließendes </td>, <p> ist zum Platzhalter für das Absatzende degradiert. Das funktioniert auch -- so lange bis man Cascading Stylesheets einbaut. Denn die benötigen sauber geschriebene Tags mit Anfang und Ende, also <p> und </p>. Wenn Sie das nachträglich ändern müssen, bürden Sie sich viel Arbeit auf und schaffen Fehlerquellen.

Kleinigkeiten für die perfekte Site

Oft entscheiden Details über Erfolg und Misserfolg einer Homepage. Wenn Sie diese Tipps beachten, haben Sie das meiste richtig gemacht:

- Bauen Sie gleich auf die Eingangsseite ein Link mit Ihrer E-Mail. So können sich Leser an Sie wenden, wenn es Probleme gibt oder sie Anregungen und Kritik haben.

- Bringen Sie ein Datum der letzten Änderung an prominenter Stelle unter. Dann weiß der Leser gleich, ob sich seit dem letzten Besuch etwas Neues getan hat.

- Schreiben Sie Neuigkeiten auf die Eingangsseite: Wenn Sie beispielsweise einen neuen Text auf Ihrer Site unterbringen, packen Sie einen Link auf die Homepage. Am besten richten Sie einen Bereich "Neuigkeiten" ein.

- Verzichten Sie auf überflüssige Gimmicks wie Javascript-Boxen, die den Leser darauf hinweisen, dass er nun die Seite verlässt.

- Achten Sie auf die Rechtschreibung und prüfen Sie möglichst monatlich Ihre Links.

- Besuchen Sie möglichst oft selbst Ihre Site. Oft bemerkt man Fehler erst nach Tagen.

- Vermeiden Sie externe Links auf der Eingangsseite. Schließlich sollen die Leser nicht sofort wieder verschwinden. In allen anderen Dokumenten sind diese Links erlaubt.

- Nutzen Sie die Meta-Tags. Damit helfen Sie Suchmaschinen. Die wichtigsten Metas sind:

<meta name="description" content="Kurze Beschreibung des Inhaltes">

<meta name="keywords" content="Stichwort1, Stichwort2, Stichwort3, Stichwort3">

<meta name="Language" content="German, Deutsch, de">