Gutes Web-Design

Kurzfassung dieser Seite Linie

Browser-Unabhängigkeit

Das Geniale an HTML ist seine Plattformunabhängigkeit. Schließlich sind im Internet ja auch die unterschiedlichsten Rechner (Workstations unter UNIX bzw. Linux, PCs mit MS-DOS oder Windows, Ataris, Amigas, Macs,...) miteinander verbunden. Setze dieses Konzept nicht aufs Spiel, indem du Elemente in deiner Seite verwendest, die den Betrachter dazu zwingen, ein bestimmtes Produkt einer bestimmten Firma zu verwenden (auch wenn diese Firma das gerne möchte).
Vermeide Seiten der Art "best viewed with Netscape Version x.y" oder "best viewed with MS Internet Explorer Version x.y". Manche Leute meiden Browser, die sich tief ins Betriebssystem eingraben und die man schwer wieder los wird. In den einschlägigen Fachzeitschriften stehen Tricks, wie man Windows 95 bzw. 98 ohne Internet-Explorer installiert.
Vermutlich wird Microsoft eine neue Word-Version ausliefern, die die Installation des MS Internet-Explorer voraussetzt. HTML wird Dateiformat des neuen Word. Microsofts Ziel ist wohl, den HTML-Standard so zu verwässern, dass viele Seiten nur noch mit Microsoft-Produkten lesbar sind.
Betrachte deine Seiten vor Veröffentlichung mit möglichst vielen verschiedenen Browsern und mit älteren Versionen der verbreiteten Browser. So sehen viele Betrachter deine Seiten -weltweit!
Weitere Informationen zu dieser Thematik bei www.anybrowser.org und adf.wifak.uni-wuerzburg.de/browser (Aktion "Für alle Browser tauglich").

Unabhängigkeit von der Bildschirmauflösung

Häufig findet man leider im Web Seiten, die scheinbar an großen Monitoren (21 Zoll aufwärts) entwickelt wurden und nie in kleiner Auflösung betrachtet wurden. Solche Seiten zwingen den Betrachter zum lästigen horizontalen Scrollen.
Betrachte deine Seiten selbst in verschiedenen Bildschirm-Auflösungen (auch 640x480) oder verkleinere das Browser-Fenster. Denke daran, dass deine Seiten auch auf 14-Zoll-Monitoren betrachtet werden!
Vermeide die Frame-Technik. Durch sie wird meist die informationstragende sichtbare Monitorfläche nur unnötig verkleinert. Auch kommt oft die History-Funktion des Browsers ins Stolpern.
Manche Browser können Frame-Seiten gar nicht darstellen. Seriöse Firmen bieten häufig eine NO-FRAMES-Version ihrer Seiten an.
Überlege, ob du Frame-Technik durch Verwendung unsichtbarer Tabellen ersetzen kannst.

Verwendung von Links

Oft werden Web-Seiten nur überflogen (gescannt). Das Auge erfasst dabei als erstes (neben bewegten Grafiken) die Links, da sie farbig markiert sind.
Überlege genau, welche Wörter du als Link verwendest. Die Wörter zwischen <A HREF="..."> und </A> sollten möglichst genau kurz und präzise beschreiben, was den Betrachter nach dem Klick auf den Link erwartet.
Vermeide das HERE-SYNDROM:
Schlecht: "Weitere Informationen über BlabBlaBla finden Sie hier."
Besser: "Hier finden Sie weitere Informationen über BlabBlaBla."
Sicher findest du noch einen besseren Satzbau...
Verwirre nicht durch farbige Markierung von Wörtern, die keine Links sind.

Verwendung von Titeln und Überschriften

Der Titel (<TITLE>) wird in Bookmark-Listen (Favorites) verwendet. Er sollte den Inhalt der Seite kurz und treffend beschreiben, damit man sich anhand des Titels an den Inhalt der Seite erinnern kann.
Der Titel sollte die Seite weltweit eindeutig kennzeichnen. Verwende für deine Homepage nicht den Titel "meine Homepage" oder den Dateinamen. Wenn das jeder täte...
Verwende keine Umlaute (auch nicht maskierte) im Titel.
Es ist eine gute Idee, wenn die Überschrift (<H1>) der Seite sich am Titel orientiert.
Missbrauche keine Überschrift-Attribute zur Textformatierung. Verwende besser das FONT-Tag mit dem SIZE-Attribut. Verwende die Hierarchiestufen der Überschriften in der richtigen Reihenfolge.

Verwendung von Grafiken

Denke an die Bandbreite / Ladezeiten. Grafiken sollten nur einige Kilobyte groß sein. Biete bei größeren Grafiken Thumbnail-Versionen als Links an und gib hinter dem Link die Größe in kByte an.
Ich habe schon Seiten namhafter Firmen gesehen, die einfach ihren Hochglanzprospekt in hohen Auflösung eingescannt und mit Links (MAP) hinterlegt haben, wohl um sicherzugehen, dass das Design über das Web genau so ankommt wie per Papier.
Verwende JPG für fotoähnliche Bilder, GIF für comicähnliche Bilder. Reduziere eventuell die Farbtiefe. Verwende bei GIF das Unterformat "interlaced", dann wird die Grafik während des Ladens erst grob aufgebaut, dann verfeinert.
Verwende das WIDTH- und HEIGHT-Attribut. Dann kann der Browser schon mal den Textteil der Seite aufbauen, während die Grafiken nachgeladen werden.
Verwende Grafiken von Icon-Größe, Trennlinien und Hintergrundbilder mehrfach. Sie werden sie nur einmal aus dem Web geholt und bei Bedarf aus dem Cache-Speicher des Browsers nachgeladen.
Viele Web-Surfer haben die automatische Anzeige der Grafiken abgeschaltet. Verwende das ALT-Attribut des IMG-Tags. Betrachte deine Seiten selbst einmal mit abgeschalteter Grafik.
Zwinge den Betrachter nicht, die Grafiken zu laden, um navigieren zu können.
Verwende keine in Grafik umgewandelten Texte. Diese Unsitte ist gerade bei Navigationszeilen in Frame-technik weit verbreitet. Denke an Blinde und Sehbehinderte, die sich die Seiten mittels Sprachausgabe vorlesen lassen. Suchprogramme finden keine Wörten, wenn sie in Grafik umgewandelt sind.
Verzichte auf bewegte Grafiken (animierte GIFs) zur reinen Effekthascherei.

Korrektes HTML

Manche Browser sind nicht so fehlertolerant wie die zwei verbreitetsten. Verwende HTML nach Spezifikation, sonst riskierst du Darstellungsfehler oder Unlesbarkeit auf manchen Browsern.
Maskiere Umlaute und verwende zu öffnenden Tags auch die schließenden Tags. (Ausnahmen: BR, LI, HR,...)
Achte auf korrekte Verschachtelung. Manche Web-Editoren machen hier Fehler...
Verwende logische Tags nicht zweckentfremdet, also z.B. ein Überschriften-Tag nicht zur Hervorhebung.
Verwende keine Web-Editoren, die kaum lesbaren, schlecht editierbaren, voluminösen HTML-Code produzieren. WYSIWYG und HTML widersprechen sich vom Grundkonzept. Oder willst du dazu beitragen, dass WWW schließlich doch für "world wide wait" steht?

zurück zur Homepage Linie

Erstellt am 9. September 1998