1. Gebot: Ich muß leider draußen bleiben

Ihr Besucher benutzt nicht Ihren Lieblings-Browser? Womöglich hat er auch kein Shockwave-Plug-in installiert oder Java deaktiviert? Pech für Sie, wenn er dann nichts zu sehen bekommt und die Website enttäuscht verlässt. Lassen Sie Ihrem Besucher die Wahl - bieten Sie ihm Alternativen. Testen Sie die Seiten mit verschiedenen Browsern. Und überlegen Sie sich vorher, ob Sie die aufwendige Animation überhaupt brauchen.
Java-Menüs und Buttons Sie sind einfach zu pflegen und bieten nette Effekte - aber wenn Ihr Besucher Java ausgeschaltet hat, wird er nichts sehen außer einer grauen Fläche und hat keine Möglichkeit, auf Ihrer Website zu navigieren. Und selbst wenn er Java aktiviert hat, kann es passieren, dass das Menü nicht sofort lädt. Animationseffekte sind auf den ersten Blick nett, nutzen sich aber schnell ab. Ihr Besucher legt weniger Wert darauf, als Sie vielleicht denken.
Buttons mit Hilfe von Java-Applets zu animieren, bedeutet, mit Kanonen auf Spatzen zu schießen. Verwenden Sie hier besser Javascript, das hat den Vorteil, dass die Buttons auch noch funktionieren, wenn der Nutzer Java oder Javascript ausgeschaltet hat - vorausgesetzt, Ihr Skript ist sauber programmiert! Im anderen Fall können Sie sicher sein, dass Ihr Besucher wenigstens in einem mit Ihnen einig ist: im Fluchen über die Fehlermeldungen beim Laden der Seite.
 

2. Gebot: Dum-didel-du

Vor drei Jahren war es noch hip, seine Seiten durch Midi-Musik zu untermalen. Heute ist das nicht nur mega-out und nervt den Besucher, sondern kann auch teuer werden, wenn Sie nicht daran gedacht haben, die fälligen Gema-Gebühren abzuführen. Midi-Sound hört sich außerdem auf den meisten Standard-Soundkarten sehr dürftig an, und Sie können nicht kontrollieren, in welcher Qualität die Musik beim Besucher abgespielt wird.
Auch bei Flash-Animationen wird gern auf Sound-Loops zurückgegriffen, die allerdings meist den Charme einer hängenden Schallplatte entwickeln und eher lästig als unterhaltsam sind.
Wenn Sie auf Sound nicht verzichten wollen, lassen Sie ihn nicht automatisch beim Laden der Seite starten, sondern überlassen Sie es dem Besucher, ob er die Sounddatei abspielen will oder nicht.

 

3. Gebot: Augenpülverchen - Schriften falsch eingesetzt

Der Platz auf dem Bildschirm ist begrenzt. Was liegt also näher, als möglichst kleine Schriften einzusetzen? Da werden Fließtexte in einer 8-pt-Verdana verfasst - wenn Sie das auch tun wollen, liefern Sie die Lupe am besten gleich mit! Texte in dieser Größe sind nicht mehr lesbar und sollten Untertiteln vorbehalten bleiben. Das Minimum ist eine 10-pt-Arial oder Verdana - Serifenschriften wie die Times Roman sollten Sie erst ab 12 pt verwenden. Übrigens: die Verdana wurde extra für den Bildschirm entworfen. Verwenden Sie nach Möglichkeit serifenlose Schriften.
Denken Sie außerdem daran, dass nicht jeder Besucher den kompletten Windows-Fontpack installiert hat. Formatieren Sie grundsätzlich nicht mit nur einer Schriftart, sondern sehen Sie Alternativen vor. (<font face="Verdana, Arial, Helvetica, MS Sans Serif"»)
 

4. Gebot: Gif es fort und bleib mir jpeg:
Falsch verwendete Grafikformate und Bildgrößen

Die gebräuchlichsten Grafikformate im Web sind GIF und JPEG. GIF wird vornehmlich für Grafiken mit klaren Konturen (zum Beispiel Piktogramme, Karten, Texte als Grafik) oder animierte Grafiken eingesetzt. Weil GIF nur 256 Farben darstellen kann, ist es nicht unbedingt für Fotos geeignet. Es sei denn, Sie mögen Moirés und kopfschüttelnde Besucher. Wenn aber nicht, dann nehmen Sie für Fotos JPEG. Das Format ist trickreich: Es setzt darauf, dass das menschliche Auge Unschärfen im Detail nicht wahrnimmt, und zeigt Umrisse um so verschwommener, je höher der Kompressionsfaktor ist. Bei Fotos fällt das nicht weiter ins Gewicht und führt zu einer Reduzierung der Dateigröße. Bei Grafiken mit klaren Konturen und wenigen Farben führt die Verwendung von JPEG zu einem "Ausbluten" der Konturen, außerdem wird die Datei größer.
Beachten Sie bei der Verwendung von Fotos auch, dass der Bildschirm nur 72 dpi darstellen kann. Es bringt also nichts, ein Foto mit 300 oder gar 600 dpi zu scannen, damit die Qualität besser wird. Solche hohen Auflösungen sind nur sinnvoll, wenn die Grafik gedruckt werden soll. Wenn Sie ein mit 300 dpi gescanntes Foto in Originalgröße auf eine Website stellen, erhalten Sie ein riesengroßes Bild mit hohen Ladezeiten. Resize me, please! Denken Sie auch an die Bildschirmauflösung Ihres Besuchers - immer noch ca. 33 Prozent sind  mit 800 x 600 Pixeln unterwegs. Ein Foto sollte daher nicht breiter sein als 400 Pixel. Die meisten marktüblichen Bildbearbeitungsprogramme bieten eine "Resize"-Option an, mit der Sie Bilder verkleinern können.
Wenn Sie eine Bildergalerie online stellen, bieten Sie den Besuchern kleine Vorschaugrafiken. Dazu verkleinern Sie das Originalbild mit Ihrer Bildbearbeitung und speichern diese kleine Version als so genannten "Thumbnail" ab. Setzen Sie dann unter die Vorschaugrafik einen Link, der auf die Originalgrafik verweist.
Achtung: es reicht nicht, die Originalgrafik mit den Parametern HEIGHT und WIDTH im Browser klein zu zoomen! Diese Größenangaben dienen nur dazu, das Laden einer Seite zu beschleunigen, weil der Browser weiß, wie viel Platz er für die zu ladende Grafik reservieren muss.
 

5. Gebot: Verweile doch, es wird so schön - der wartende Besucher

Wissen Sie, wie viel Zeit ein Besucher Ihrer Seite gibt, bevor er weiterklickt? Acht Sekunden - so sagen jedenfalls die "durchschnittlichen Befragten" in diversen Untersuchungen.
Wie lange braucht Ihre Startseite zum Laden? Zwingen Sie Ihren Besucher durch einen Flash-Tunnel oder erschlagen Sie ihn bereits auf der ersten Seite mit riesengroßen Bildern? Dann müssen Sie schon eine Menge zu bieten haben, dass er Ihnen nicht abhanden kommt, bevor ihre ganze Seite überhaupt auf seinem Bildschirm ist.
Aufwendige Intro-Seiten sind mittlerweile out. Man kommt heute gleich zur Sache und bietet bereits auf der ersten Seite Informationen. Das können News sein oder auch Highlights aus Ihrem Programm.
Lange Texte werden am Bildschirm nicht gern gelesen - kürzen Sie, soweit es geht, und bieten Sie längere Texte zum Download an. Damit der Leser weiß, was er lädt, können Sie Auszüge aus dem Text als "Teaser" auf die Seite stellen. Wenn Sie längere Texte anbieten, bieten Sie zusätzlich eine Druckversion.
Und, Achtung: Texte innerhalb von Tabellen brauchen länger zum Laden als Texte außerhalb von Tabellen! Wenn Sie schon eine große Grafik auf die erste Seite setzen müssen, arbeiten Sie mit dem Feature LOWSRC, das Ihnen die Möglichkeit gibt, eine größenreduzierte (am besten in Schwarzweiß gehaltene) Vorschaugrafik zu laden - leider wird das aber nur von Netscape unterstützt. Eine andere Möglichkeit ist, größere Bilder zu "slicen", das heißt, sie in einzelne Quadrate zu unterteilen. Dafür gibt es eigene Tools.
 

6. Gebot: So schön bunt hier!

Farben sind ein wichtiges Stilmittel. Sie helfen, die Corporate Identity eines Unternehmens auszudrücken, Akzente zu setzen und den Charakter einer Site zu formen. Konsequent - wenn auch nicht unbedingt augenfreundlich - umgesetzt haben das Yello und Sixt.
Bei aller Begeisterung - denken Sie bitte daran, dass der Besucher Ihrer Site in erster Linie an Informationen interessiert ist und die Texte lesen will! Und seien Sie konsequent in der Anwendung Ihrer Farben - mischen Sie nicht Pastelltöne und Knallfarben. Berücksichtigen Sie auch, dass es immer noch Grafikkarten gibt, die nur 256 Farben darstellen können.
Rote Schrift auf blauem Grund ist beispielsweise extrem augenunfreundlich. Wenn Sie außerdem ein farbiges Bild als Hintergrund einsetzen, denken Sie daran, die Hintergrundfarbe der Seite auf die gleiche Farbe zu setzen und auf keinen Fall auf die gleiche Farbe wie der Text, sonst sieht Ihr Besucher gar nichts, bis das Hintergrundbild geladen ist.
Sowohl schwarze als auch weiße Hintergründe sind zwar weit verbreitet, aber nicht unbedingt die augenfreundlichste Lösung. Der Bildschirm ist ein selbstleuchtendes Medium, und Farben erscheinen viel intensiver als auf dem Papier. Der Kontrast schwarz auf weiß ist daher auf Dauer anstrengend für die Augen. Besser: Pastelltöne, das Bild auflockern durch Kästen und andersfarbige Navigationsleisten.
Blümchentapete Hintergrundgrafiken sind dann am effektivsten und besten, wenn sie nicht auffallen. Ihre Homepage ist keine Zimmerwand, die tapeziert oder gekachelt werden müsste. Bedenken Sie auch, dass jede Hintergrundgrafik als "Tapete" angezeigt wird - testen Sie unbedingt auch mit einer 1280-x-1024-Auflösung. Die Hintergrundgrafik sollte sich hier nicht wiederholen!
 

7. Gebot: Bewegung

Wenn Sie Bewegung in Ihre Homepage bringen wollen, tun Sie das mit interessanten Inhalten - aber verzichten Sie auf zappelnde GIFs! Sparsam dosiert, können animierte GIFs ansprechend wirken, zum Beispiel eine sich gemächlich drehende Weltkugel, aber generell sollten Sie lieber darauf verzichten. Bedienen Sie sich auch besser nicht bei den einschlägigen Freeware-Archiven. Zum einen langweilen Sie damit Ihren Besucher, der den tollen aufklappenden Briefkasten schon auf hundert anderen Sites gesehen hat, zum anderen riskieren Sie sogar eine Abmahnung von Unisys (Inhaber des LZW-Kompressionsverfahrens, das GIF-Grafiken zugrundeliegt), wenn Sie nicht nachweisen können, dass Sie Ihre GIF-Grafiken mit einer Software erstellt haben, deren Hersteller Lizenzgebühren an Unisys entrichtet hat (was bei Standardsoftware wie zum Beispiel Photoshop oder Paint Shop Pro der Fall ist).
Auch bei Hintergrundgrafiken sollten Sie selbst kreativ werden. Das gleiche gilt für die Verwendung von Designvorlagen. Frontpage-Templates sind schön und gut, aber der Profi erkennt sie auf den ersten Blick. Vor allem wenn Sie sich als Webdesigner einen Namen machen wollen, sollten Sie mit eigenen Designs werben und nicht auf fertige Vorlagen zurückgreifen.
Ja, wo laufen sie denn? Java- oder Javascript-Laufschriften sollten Sie nur für wirklich wichtige Inhalte einsetzen, zum Beispiel brandaktuelle News oder Börsenticker. Und lassen Sie dem Besucher seine Statuszeile - Laufschriften in der Browserstatuszeile sind mega-out und unbeliebt, weil dieser Platz für andere Informationen reserviert ist, wie etwa die Anzeige von URLs, wenn die Maus sich über einen Link bewegt.
Banner-Overkill: Die meisten Besucher lieben Banner nicht sonderlich. Setzen Sie daher möglichst nicht mehr als ein Banner pro Seite ein, und überlegen Sie sich, ob das Banner wirklich animiert sein muss. Wenn das Banner den Besucher nicht verärgert, besteht eine größere Chance, dass er draufklickt. Reservieren Sie einen Bereich Ihrer Seite standardmäßig für Banner - und nur diesen.
 

8. Gebot: Framechaos

Frames oder Nichtframes - das ist die Frage, die die Netzgemeinde seit Jahren bewegt, und immer noch reagieren Besucher mit verhaltener Begeisterung, wenn sie auf Frames stoßen. Sie müssen schon gute Gründe haben, um Frames einzusetzen. Die meisten großen Informationsanbieter kommen ohne Frames aus. Da große Sites häufig mit Redaktionssystemen verwaltet werden, fällt das Argument der einfachen Wartung der Navigationsleiste dort weg.
Dennoch haben Frames ihre Berechtigung, wenn sie sinnvoll eingesetzt werden. Informationen, die auf jeder Seite gleich sind, können so zum Beispiel immer im Blickfeld bleiben, oder auch ein für Banner reservierter Raum, der nicht weggescrollt werden soll. Darüber hinaus verringern sich die Ladezeiten, weil nur noch Teile der Seite nachgeladen werden müssen. Das ist vor allem sinnvoll, wenn Sie größere Grafiken im Navigationsbereich haben.
Frames können außerdem benutzt werden, um sicherzustellen, dass eine Seite immer in einer festen Größe dargestellt wird, unabhängig von der Bildschirmauflösung des Benutzers.
Nehmen Sie dem Besucher nicht seine Scrollbalken weg. Frameborders sehen hässlich aus und sollten nach Möglichkeit weggelassen werden.
Überlegen Sie sich gut, was in Ihre Frames hineinsoll. Packen Sie nicht zu viele Informationen in einen Navigationsframe. Gescrollt werden sollte nur im Hauptframe, nicht in den Navigationsframes!
Wenn Sie Frames einsetzen, achten Sie darauf, dass es im Quelltext der Seite, die das Frameset enthält, einen "noframes"-Bereich gibt, der Besuchern mit alten Browsern einen Link auf eine Alternativseite oder zumindest eine Information bietet. In diesem Noframes-Bereich sollten Sie auch unbedingt Schlüsselwörter und einen Beschreibungstext unterbringen, sonst kann es Ihnen passieren, dass Suchmaschinen als Beschreibungstext für Ihre Seite nur ein "Ihr Browser kann keine Frames darstellen" oder Ähnliches auswerfen.
 

9. Gebot: Wo isser denn? Die Webseite als Irrgarten

Lassen Sie Ihren Besucher nicht hilflos umherirren. Eine durchdachte Navigation ist das A und O jeder erfolgreichen Website. Orientieren Sie sich an den Bedürfnissen des Kunden, nicht an Ihrer Unternehmensstruktur. Testen Sie die Navigation mit unbedarften Anwendern - Sie werden sich wundern, wo Ihre Tester überall hinklicken.
Links müssen als solche erkennbar sein. Wenn Text unterstrichen ist, wird erwartet, dass sich darunter auch ein Link verbirgt. Verwenden Sie unterschiedliche Farben für Links und bereits besuchte Links, damit Ihr Besucher sieht, auf welchen Seiten er bereits war. Verstecken Sie Links nicht ausschließlich hinter Illustrationsgrafiken.
Am weitesten verbreitet ist eine Navigation am linken Bildschirmrand - einfach weil wir gewöhnt sind, von links nach rechts zu lesen. Als Ergänzung bietet sich eine horizontale Navigationsleiste am oberen oder unteren Bildschirmrand an. Immer weiter verbreitet sind auch Aufklappmenüs, die zwar aufwendig in der Programmierung sind, aber für einen aufgeräumten Bildschirm sorgen, der nicht überladen wirkt.
Ostereier suchen: Eine beliebte Variante des nützlichen OnMouseOver-Events: Navigationselemente verraten erst, was hinter ihnen steckt, wenn man mit der Maus darüber fährt. Das ist ein netter optischer Effekt, macht es dem Besucher aber schwer, sich auf der Seite zurechtzufinden. Legitim ist das, wenn Sie zusätzlich eine Alternativnavigation anbieten.
Bei größeren Sites sollten eine Sitemap und eine Suchfunktion nicht fehlen.
 

10. Gebot: Meta-Tags und Suchmaschinen

Heißt Ihre Seite auch "Please title this page" oder "index.htm"? Dann haben Sie Ihre Meta-Tags nicht ordentlich gepflegt. Wenigstens "Title", "description" und "keywords" sollten gepflegt sein, damit Ihre Seite nicht nur in Suchmaschinen entsprechend gelistet wird, sondern auch mit einem aussagekräftigen Seitentitel im Browserfenster des Besuchers angezeigt wird.
Wenn Ihnen mal langweilig sein sollte, werfen Sie eine Suchmaschine an (zum Beispiel altavista.com) und suchen Sie nach der Zeichenkette Mega "Lorem ipsum dolor sit amet, consectetuer adipiscing elit" - Sie werden staunen!
Dieses "Pseudo-Latein" wird von Satzprogrammen oder auch Web-Editoren wie Frontpage dazu verwendet, Dummy-Text zu generieren. Wenn Sie also nicht wollen, dass Ihre Baustellenseiten gefunden werden, verzichten Sie auf diese Dummy-Texte.
 

11. Gebot: Ruhe in Frieden

Sie haben alles beachtet, Ihre Website ist augenfreundlich, ansprechend, übersichtlich - aber es tut sich nichts darauf? Die letzte Änderung war vor sechs Monaten, und Kundenanfragen werden nicht beantwortet? Dann haben Sie verloren.
Das Internet ist ein interaktives Medium, eine Website ist mehr als ein digitalisierter Prospekt. Bieten Sie dem Kunden die Möglichkeit, in Dialog mit Ihnen zu treten! Das Minimum ist eine funktionierende E-Mail Adresse auf jeder Seite des Angebots. Und "News" sind nur dann News, wenn sich dort mehrmals im Monat etwas tut.
Weitere interaktive Möglichkeiten sind Umfragen, Newsletter, Foren, Preisausschreiben, oder auch ein Chat. Geben Sie Ihrem Besucher einen guten Grund, wiederzukommen!

 

Amen

Der Text wurde mit freundlicher Genehmigung von Internet Professionell veröffentlicht.