HTML – aber richtig!

Inhalt

1. Einleitung

Ich habe in letzter Zeit viele Webseiten besucht und wurde bei den meisten heftig enttäuscht. Anscheinend weiß kaum jemand, was gültiges (valides) HTML ist und wozu es gedacht bzw. nicht gedacht ist. Viele Seiten waren bunt und grell, benutzten proprietäre Eigenschaften (browserspezifische Anweisungen, JavaScript, Shockwave-Flash) oder waren durch ungünstige Farben fast nicht oder gar nicht lesbar. Einige könnten von blinden Menschen wegen der Frames nicht besucht werden. Dabei ist es so einfach, gute Webseiten zu schreiben.

Die erste Frage, die man sich dabei stellen muss, ist nicht: „Wie will ich mich darstellen?“, sondern:

2. Was will der Besucher?

Wer eine Website aufsucht, möchte sich vor allem informieren, und das meist schnell. Er möchte wissen, worum es hier geht, was ihm das bringt und wie er Kontakt aufnehmen kann, und dann erst interessiert er sich vielleicht noch für weitergehende Informationen. Wie beim Erstkontakt zwischen Menschen ist der erste Eindruck dabei entscheidend – und viele Webseiten-Schreiber scheinen sich die allergrößte Mühe zu geben, diesen zu vermasseln.

Eine Studie hat festgestellt, dass Seiten – insbesondere Startseiten –, die nicht binnen 30 Sekunden geladen sind, von den meisten Besuchern als uninteressant eingestuft werden. Das gilt auch und gerade für Internet-Benutzer, die nur über ein analoges Modem mit 28.800 bps verfügen. Unsere Seiten dürfen also (auch incl. Bildern usw.) nicht so groß sein, dass die Ladezeit wesentlich über diese Galgenfrist hinaus geht – von Ausnahmen und großen Bildern, auf die vorher aber hingewiesen wird, abgesehen. Dazu später mehr.

Viele, insbesondere professionelle Web-Benutzer, schalten schon aus Sicherheits- und Privatheitsgründen einige Funktionen ihres Browsers ab, vor allem Java, JavaScript und oft auch die Annahme von Cookies. Wenn wir diese Menschen erreichen möchten, müssen unsere Seiten also (auch) ohne diese Zusatzfunktionen vollständig benutzbar und vor allem gut lesbar sein.

Eine weitere Gruppe sind Behinderte. Insbesondere sehbehinderte und blinde Menschen, die das Web nutzen, werden durch einige Funktionen, die für uns vielleicht ganz nett aussehen, schlicht ausgesperrt. Sehbehinderte Benutzer sind nicht gerade dankbar, wenn Schriftgröße 8 pt fest eingestellt ist und sie daran nichts ändern können, während blinde Benutzer im allgemeinen einen Textbrowser verwenden und ziemlich sauer werden, wenn man ihnen die wichtigsten Informationen nur in Frames, Bildern oder gar Shockwave-Flashs präsentieren will.

Es gibt Möglichkeiten, mit denen wir unsere Seiten für beide vollständig lesbar gestalten können, und zwar ohne, dass wir irgendwelche speziellen Links anbieten oder Funktionen einbauen müssten. Auch darauf gehe ich noch weiter ein.

Und dann gibt es noch Besucher, die eigentlich fast noch wichtiger sind als menschliche Benutzer: Die Robots der Suchmaschinen. Denn die Suchmaschinen sollen uns ja viele neue Besucher bringen, deswegen müssen wir sie wie „Großkunden“ behandeln – besonders „freundlich“, oder, besser gesagt, wir müssen unsere Seiten so gestalten, dass sie damit auf keinen Fall irgend welche Probleme haben. Wenn Suchmaschinen-Robots eine Seite nämlich nicht lesen können, wird diese Seite bei einer entsprechenden Stichwort-Suche mit den jeweiligen Suchmaschinen nicht gefunden. Suchmaschinen können beispielsweise keine Frames und keine in Flash eingebundene Texte lesen. Auch auf Suchmaschinen werde ich noch explizit eingehen.

3. Gültiges (X)HTML & CSS

HTML, XHTML und CSS sind Standards, die vom W3-Consortium festgelegt wurden. Während des so genannten „Browser-Kriegs“ in den Jahren von 1998 bis ca. 2000 haben insbesondere die Firmen Microsoft und Netscape in ihre Browser „Internet Explorer“ und „Netscape Navigator“ zusätzliche Elemente und Eigenschaften eingebaut, die jedoch nicht standardkonform waren. Wer diese Elemente verwendet, sperrt die Benutzer des jeweils anderen bzw. ganz anderer Browser schlicht aus, oder die Seiten sehen dann nicht mehr so schön aus.

Noch heute gibt es viele selbst ernannte „Webdesigner“, die mit ihren Browser-Weichen oder ihrer „browserabhängigen Programmierung“ von Webseiten protzen. Das ist alles Unsinn! Die beste Methode, möglichst viele Browser zufriedenzustellen und damit möglichst viele Benutzer zu erreichen, ist und bleibt die Verwendung von validem, also dem W3C-Standard entsprechendem HTML.

Die aktuellen (Stand: 07/2002) Versionen sind HTML 4.01 und XHTML 1.0, wobei XHTML eine neue Form von HTML ist, die strenger als das „alte“ HTML Inhalte und Gestaltung trennt. Für die Gestaltung werden dann normalerweise Cascading Style Sheets (CSS) verwendet. Damit kann man in einer einzigen Datei (oder in mehreren Dateien) definieren, wie die Inhalte bestimmter Elemente gestaltet werden sollen.

Wir dürfen dabei nicht vergessen, dass die Elemente nur ein Gestaltungsvorschlag an den Browser sind. Diese Vorschläge kann der Browser beachten oder ignorieren (er darf sie nur nicht falsch interpretieren, wie es beim Netscape 4.x mit CSS gelegentlich passiert). Der Benutzer kann seinen Browser auf eigene Schriftgrößen und -farben, Hintergrundfarben und weiteres selbst einstellen; er kann das Laden von Bildern unterbinden oder das Abspielen von Musik, Videos und Animationen abstellen. Als Schreiber einer Webseite sind wir nie endgültig Herr über das Aussehen der Seite, das dürfen wir nie vergessen! „Webdesigner“ verwechseln oft Grafikdesign oder Desktop Publishing mit Webseitengestaltung und machen damit einen der größten Fehler.

Wichtig ist auch, dass wir uns nicht auf eine bestimmte Ausstattung an Hard- und Software beim Besucher verlassen. Seiten, die auf Deinem PC zu Hause ganz toll aussehen, können auf einem anderen Computer schlicht unbenutzbar sein, wenn der Besucher eine andere Ausstattung hat. Wir kennen nämlich nicht nur den Browser des Besuchers nicht; wir wissen auch nicht, was für einen Monitor und welche Auflösung er eingestellt hat, wie viele Farben das Gerät darstellen kann, welches Betriebssystem er benutzt (könnte auch ein Atari sein!), ob er an einer Standleitung, an DSL, ISDN oder einem Analog-Modem hängt, ob er überhaupt einen PC hat oder vielleicht einen Notebook oder sogar einen Handheld mit einem langsamen Handy-Modem dran. Wir wissen nicht, ob er eine Soundkarte hat und welche Plug-Ins zu seinem Browser installiert sind. Wollten wir uns die Mühe machen, unsere Seiten all diesen verschiedenen Möglichkeiten anzupassen, dann müssten wir vermutlich mindestens 100 Versionen jeder einzelnen Seite schreiben.

Deshalb heißt die Lösung: Wir schreiben nicht nur standardkonformes (X)HTML, sondern wir schreiben unsere Seiten auflösungsunabhängig, benutzen nur die grobe Farbtabelle mit 255 Farben, halten unsere Einzelseiten relativ klein und lassen den Benutzer vor dem Laden großer Dokumente oder Bilder sowie von Plug-In-abhängigen Dateien, Sound- und Videodateien und ausführbaren Programme immer selbst entscheiden.

4. Fehler, die (nicht nur) Anfänger machen

Typische Fehler, die ich immer und immer wieder sehe, auch bei großen Firmen:

Die Schriften sind oft viel zu klein gewählt, die Texte sind unlesbar oder man bekommt Augenschmerzen.
Schrift- und Hintergrundfarbe korrespondieren nicht oder sind sich zu ähnlich, so dass man auch hier beim Lesen Augenschmerzen bekommt.
Es werden Schriften eingesetzt, die beim Besucher nicht unbedingt vorhanden sind, statt sich auf wenige, aber übliche Schriften oder Schriftarten zu beschränken. Macht zwar normalerweise nichts, aber da zeigt sich der „Webdesigner“, der dem Besucher vorschreiben will, was er installieren soll.
Dreispaltiges „Portal-Design“ macht die Seiten total unübersichtlich.
Riesige Bilder werden bereits auf der Startseite platziert und erfordern unverschämt lange Ladezeiten, bevor man überhaupt mal etwas zu sehen bekommt.
Shockwave-Flashs werden bereits auf der Startseite platziert und ohne Vorankündigung geladen. Dabei geht meist ein störendes Fenster auf, in welchem man aufgefordert wird, das entsprechende Plug-In herunterzuladen, sofern man es nicht schon installiert hat.
Navigation funktioniert nur über JavaScript, statt korrekterweise über HTML-Links. Wer (zum Beispiel aus Sicherheitsgründen) JavaScript abgestellt hat, kann auf solchen Seiten nicht navigieren.
Nicht Standard konformes JavaScript, wenn man es denn schon mal eingeschaltet hat, kann so manchen Browser zum Absturz bringen. Unter Windows nimmt der Browser dann schon mal gern das ganze Betriebssystem mit, unter Linux und ähnlichen Systemen kann immerhin die grafische Benutzeroberfläche mit abstürzen.
Werbe-PopUps oder sonstige zusätzliche Fenster, die ungefragt geöffnet werden, verunsichern insbesondere Netz-Neulinge – und alle anderen nerven sie einfach nur. Dem kann man insbesondere begegnen, indem man als Besucher JavaScript abschaltet, denn meist werden diese Fenster damit aktiviert. Noch besser: Man besucht solche Seiten gar nicht erst.
Insbesondere auf kommerziellen Seiten wird der Besucher oft mit Bergen von Cookies zugeschüttet, und man ist oft mehr mit Cookies-Wegklicken beschäftigt als damit, die Seiten zu lesen.
Werbebanner an den unmöglichsten Stellen. Es mag ja sein, dass man damit ein paar Cent verdienen kann, aber wenn eine Seite nur noch so vor Werbebannern strotzt und man die eigentlichen Informationen – sofern überhaupt welche vorhanden sind – nicht finden kann, ist das wenig sinnvoll.
Java-Applets - aber ich habe schon länger keine mehr gesehen. Zumindest diese Unsitte scheint nun so langsam ausgerottet zu sein.

5. Wie mache ich es richtig?

Strukturiere sowohl die einzelnen Seiten als auch die ganze Site von vorn herein. Teile Themen auf verschiedene Dateien auf, lasse einzelne Dateien nicht zu groß werden. Verwende bei größeren Sites Unterverzeichnisse. Baue die Strukturen so auf, dass Du sie später ohne größere Probleme erweitern kannst.
Verwende valides (X)HTML und CSS. Die beste Methode, valide Seiten zu schreiben, besteht darin, sie wirklich selbst in einem Texteditor (nein, nicht „MS-Word“) zu schreiben, statt sie in einem so genannten „HTML-Editor“ zu „designen“. Was diese Programme produzieren, ist oftmals einfach nur zum Reihern. Ich kenne keinen HTML-Editor, dessen Ergebnisse ohne Fehler durch einen standardisierten HTML-Validator gehen, und die meisten bauen auch noch grauenhaftes JavaScript mit ein.

(X)HTML und CSS sind übrigens keine Programmiersprachen. Es handelt sich um offene („offen“ im Sinne von: jeder darf es wissen) Standards, und es gibt einige gute Anleitungsbücher. Wer kein Geld für Bücher ausgeben will: Es gibt auch gute Anleitungen im Web.

Verzichte auf Schikanen wie JavaScript, Java, Flash, Cookies etc. entweder von vorn herein – das ist die einfachste Methode – oder, wenn es denn unbedingt sein soll, biete dem Besucher vorher eine alternative Möglichkeit an, die Seiten auch ohne diesen Kram zu lesen.
Schreibe dem Besucher keine Schriftarten oder Schriftgrößen vor. Schriftarten definierst Du am besten im CSS und bietest dabei zu jeder Schrift eine allgemein gültige Alternative wie „serif“ oder „sans-serif“ mit an. Schriftgrößen definiert man entweder gar nicht oder nur relativ.
Zwinge dem Benutzer keine großen Dateien oder proprietären Dateiformate auf. Große Dateien oder Dateien in Formaten, die nicht unbedingt jeder lesen kann (Word-Dokumente, Excel-Sheets, PDF, ausführbare Programmdateien, Bilder, Videosequenzen, Musikdateien usw.) kannst Du zwar anbieten, solltest dem Besucher aber durch Anwahl eines Links die Wahl überlassen, ob und wie (http oder ftp) er die Datei auf seinen Rechner laden möchte. Übrigens: Es ist nicht ratsam, mit Raubkopien erstellte Dokumente ins Netz zu stellen – der Hersteller der Software könnte aufmerksam (gemacht) werden ;-)
Bei Bildern bietet es sich besonders an, jeweils eine (mit einem Bildbearbeitungsprogramm) verkleinerte Version auf die Seite zu setzen und diese mit einem Link auf die hoch auflösende Version zu unterlegen.
Weniger ist meist mehr! Viele zappelige Bilder, grelle Farben und andere Effekte lassen die Seiten schnell verspielt, aber nicht seriös aussehen. Überlege, wen Du erreichen willst!
Fülle Deine Seiten mit Inhalten. Das freut nicht nur die Besucher, sondern vor allem auch die Suchmaschinen, die dann schön viele Suchbegriffe finden. Das lässt Deine Seiten im Ranking steigen.
Mehrsprachige Seiten mit gut funktionierenden Sprachweichen (auf jeder und nicht nur auf der Startseite) haben bei Suchmaschinen besonders viel Erfolg, aber bedenke den zusätzlichen Arbeits- und Übersetzungsaufwand!
Vermeide reine Link-Seiten, schreibe möglichst immer Kommentare zu den Links bzw. schreibe Links am besten in Fließtext. Sorge vor allem dafür, dass nicht nur Du auf andere (gute und valide!) Seiten linkst, sondern dass auch andere gute, valide und gut besuchte Seiten auf Deine Seite linken. Das erhöht das Ranking in den Suchmaschinen massiv!
Trage Deine Seiten nicht in jede beliebige Suchmaschine ein, sondern wähle sorgfältig aus. Die guten Suchmaschinen (insbesondere Google) finden Deine Seiten bei guter Verlinkung sowieso von alleine.
Ganz wichtig: Halte Deine Seiten aktuell. Für die Termine vom letzten Jahr interessiert sich kein Mensch. Lade die Seiten bei jeder kleinsten Änderung neu auf den Server, dann merken die Suchmaschinen, dass sich auf dieser Site etwas tut.
Stelle nur fertige Seiten, keine „Baustellen“ oder „Beta-Versionen“ ins Netz. Baustellenseiten gehören nur auf Deinen lokalen PC. Beta-Versionen gehören in ein verstecktes, nicht verlinktes Unterverzeichnis auf dem Webserver, zu welchem Suchmaschinen keinen Zugang haben und dessen Adresse nur ausgesuchte Leute erfahren. Es sieht nicht sehr einladend aus, wenn auf einer Site monatelang ein Baustellenschild steht.

6. Domainanmeldung, Domain- und Webhosting

Die Domain-Anmeldung bei der DENIC (für .de-Domains) bzw. bei der jeweils zuständigen Registrierungsstelle macht Dein Provider für Dich. Aber Achtung: Provider ist nicht Provider!

Vermeide billige Massendomainhoster, such Dir lieber einen kleineren Domainhoster in Deiner Nähe, dem Du auch mal über die Schulter schauen kannst. Ja, das kostet mehr, aber das ist es auch wert! Denn: bei einem Massendomainhoster liegen Deine Domain und Deine Seiten auf einem Server mit vielleicht 10.000 anderen Domains zusammen, während Deine Site beim lokalen Provider auf einem Server mit vielleicht maximal 100 Präsenzen liegt. Auch das werten die Suchmaschinen als Qualitätsmerkmal aus!

Abgesehen davon heißt „billig“ beim Domain- und Webhosting eben „billig“. Dazu gehört, dass die Anbindung meist schlecht ist, was bedeutet, dass auch jemand mit einer fetten Standleitung „ewig“ auf die Seiten warten kann. Und es bedeutet, dass es öfter mal größere Ausfälle geben kann. Für eine Site ist es tödlich, wenn sie jeden Monat für mehrere Stunden nicht erreichbar ist – am „besten“ genau dann, wenn die Suchmaschinen-Robots sie gerade abgreifen wollen …

Wähle einen Provider, bei dem Du nicht nur einfach HTML-Seiten ablegen kannst, sondern weitere Funktionen zur Verfügung hast (das ist bei Massendomainhostern durchgehend nicht der Fall). Dazu gehört beispielsweise die Kontrolle über die Dateien robots.txt (die für Suchmaschinen wichtig ist) und .htaccess, mit der man den Zugriff auf bestimmte Dateien oder Unterverzeichnisse einschränken kann.

Dazu gehört aber auch, dass Du das Logfile („Tagebuch“) Deiner Präsenz selbst abrufen und auswerten kannst und damit nicht auf unzuverlässige „Counter“ (von denen ich im übrigen sowieso abrate) angewiesen bist. Das Logfile gibt Dir ausführlich Auskunft darüber, welche Seiten wie oft von wo aus aufgerufen wurden, wie viele Abbrüche es gab (das deutet zum Beispiel auf zu große Dateien oder Anbindungsprobleme hin), oder welche Links eventuell nicht mehr funktionieren. Es zeigt Dir aber auch, von woher Hackerangriffe kamen und ob sie erfolgreich waren (es gibt immer welche – es kommt nur drauf an, dass der Provider den Server dicht gemacht hat).

Außerdem ist es eine nette Option, wenn Dir der Provider statt des immer noch üblichen, ungesicherten FTP-Zugangs einen SSH-Zugang einrichten kann. Damit ist es nämlich im Gegensatz zu FTP Dritten nicht möglich, Dein Passwort während der Übertragung desselben zum Server mitzulesen.

Des weiteren ist es für einen guten Provider selbstverständlich, dass er immer die aktuelle Version der Webserver-Software mit allen aktuellen Sicherheitsmaßnahmen verwendet. Optimalerweise läuft der Server unter Linux oder einem verwandten System und sitzt hinter einer gut konfigurierten Firewall.

Zum Schluss möchte ich noch auf einen wirklich genialen Aufsatz verweisen, der erklärt, warum man die Gestaltung seiner Seiten zumindest derzeit besser nicht einer Werbeagentur überlässt. Have fun!