Webdesigner-Tipps zu HTML

1+1=?

„Was wir wissen, ist ein Tropfen. Was wir nicht wissen – ein Ozean.“ Isaac Newton

Erst den Kopf und dann den PC einschalten  

Schreiben Sie nicht einfach so los am PC. Auch wenn es schwerfällt: Benutzen Sie zunächst Papier und Stift und vor allem den Kopf. Was Sie da am Anfang an Zeit investieren, das holen Sie später doppelt und dreifach wieder rein. Testen Sie als nächstes eine Beispieldatei mit Schriftarten, Farben, Grafiken und Layout. Wenn Sie damit zufrieden sind, nehmen Sie diese Datei als Masterdatei, von der Sie Kopien ziehen. Gehen Sie nicht den umgekehrten Weg und programmieren parallel mehrere HTML-Dateien. Erstens verlieren Sie wahrscheinlich irgendwann den Überblick und zweitens ist es viel mühseliger, die Dateien im Nachhinein anzugleichen.

Fortschritte erkennbar machen  

Halten Sie sich nicht zu lange mit der Layout- und Grafikerstellung auf. Das sind sowieso schon ziemlich zeitintensive Arbeitsschritte. Das kann dann sehr schnell zu ersten Frustrationserscheinungen beim Webmaster führen, da nichts richtig vorwärts zu gehen scheint. Wenn Ihre Homepage nicht nur aus Grafiken, sondern auch aus Texten bestehen soll, wenden Sie sich doch erst mal den Texten zu. Vielleicht geht das auf dieser Ebene eher voran.

Bauschilder vermeiden  

Möglichst keine Seiten ins Netz stellen, die noch nicht fertig sind. Weitaus schlimmer sind allerdings Seiten, auf denen lediglich -am besten noch mit riesiger Hintergrundgrafik- vermerkt ist, daß demnächst mal irgendetwas darauf zu sehen sein wird. Die Krönung ist, wenn es sich dabei auch noch um die Eingangsseite handelt.

Auf Themen spezialisieren  

Eine Homepage sollte weitestgehend auf ein Thema beschränkt sein. Das setzt zwar der eigenen Kreativität engere Grenzen, andererseits kann man sich aber auf das Wesentliche konzentrieren und man verzettelt sich nicht so. Ein großer Vorteil ist auch, daß man sich in den Katalogen der Suchmaschinen besser präsentieren kann. Wer interessiert sich denn schon für die private Homepage von XYZ? Hat man sich dagegen z.B. auf das Thema „Weihnachtsschmuck“ oder „Ostfriesenwitze“ spezialisiert, sieht das schon ganz anders aus. Da weiß der potentielle Besucher doch gleich, was ihn erwartet. Das Problem, daß man unbedingt alles auf einer Homepage unterbringen muß, ist heute nicht mehr so aktuell, weil viel mehr kostenloser Webspace zur Verfügung steht. Man könnte seine Homepage also durchaus auf mehrere kleine Projekte mit jeweils eigenem Spezialthema und Design aufsplitten.

HTML-Editoren mißtrauen  

Die meisten HTML-Editoren sind eher mit Vorsicht zu genießen. Was bei Ihnen am eigenen PC noch fabelhaft funktioniert, kann online im Internet durchaus schlecht ankommen. Ein unnötig aufgeblähter Quelltext verlängert dann vielleicht die Ladezeiten. Besonders unangenehm fallen in dieser Hinsicht auch die HTML-Konvertierungen der Büroprogramme auf. Verzeichnisse, die vom Programm angelegt und z.B. mit Grafiken gefüllt wurden, sind u.U. nicht verfügbar. Folglich können die Links nicht mehr funktionieren. Manche Editoren schreiben nur Quellcode für bestimmte Browserversionen und schließen dadurch andere aus. Benutzen Sie problematische Programme möglichst nur in bekannten Systemumgebungen wie auf Ihrem PC oder im Intranet.

Wichtiges an den Anfang  

Wo fangen Sie an zu lesen? Richtig, oben. Daher gehören die wichtigen und interessanten Informationen nach oben an den Anfang und sollten nicht im Textdschungel weiter unten ihr Dasein fristen. denn dort wird sie kaum einer zu Gesicht bekommen, wenn oben nur langweiliges Zeug und textliches Gestammel steht. Sorgen Sie zwischendurch für Überschriften, die die Neugier des Surfers wecken.

Startseite und andere wichtige Seiten nicht überfrachten  

Es ist überall zu sehen und immer öfter eine unangenehme Erfahrung: Mit Fotos, Grafiken, Animationen, Imagemaps, JavaScript und Hintergrundmusik total überlastete Startseiten. Kommen dann noch Werbeeinblendungen und ein externer Zugriff auf Counter dazu, spielt der genervte User schon mal sachte mit dem Abbruch-Button. Wenn der Seitenaufbau eh schon ziemlich lange dauert und der Webmaster meint, nicht darauf verzichten zu können, dann werfen Sie dem Besucher doch schon mal ein paar (Text-)Happen hin, damit er erst einmal beschäftigt ist. Aber nicht nur die Startseite, sondern vor allem auch zentrale Navigationsseiten, auf die relativ häufig zugegriffen wird, sollten Sie nicht überfrachten.

Rechtschreibung beachten  

Eine Seite kann vom Layout und den Grafiken her noch so schön gestaltet sein, aber wenn diese mit Rechtschreib- und Grammatikfehlern gespickt ist, wird es eher peinlich. Eine Kontrolle des Geschriebenen (schon wegen möglicher Tippfehler) und hin und wieder ein Blick in den Duden können nicht schaden. Die Rechtschreibreform allerdings hat einerseits zu neuen Unsicherheiten geführt und deckt andererseits so manche Schwächen zu.

Wichtig: Eine klare Navigation  

Die Homepage sollte nicht mit internen Links überfrachtet werden. Das verleitet den Besucher doch zu sehr zum Hin- und Herspringen innerhalb Ihrer Homepage und er verliert den roten Faden. Bieten Sie eine klare und nachvollziehbare Navigation an. Nichts ist nerviger für einen Besucher als ein hilfloses Herumirren von einer Seite zur anderen.

Vorsicht bei Imagemaps  

Imagemaps dienen der grafischen Navigation. Sie sind zwar manchmal schön anzusehen und nicht so langweilig wie die Textlinks. Sie sollten aber keine Übergröße aufweisen (lange Ladezeiten) und sie sollten einheitlich sein (also nicht jeder Seite eine eigene Imagemap zuordnen). Ein zusätzliches Problem ergibt sich, wenn dem User nur ein Textbrowser zur Verfügung steht (sehr selten) oder wenn die Grafikdarstellung im Browser ausgeschaltet wurde (schon relevanter).

Links erkennbar machen  

Suchen Sie sich Linkfarben aus, die man gut vom normalen Text unterscheiden kann, z.B. einen Blauton für noch nicht aktivierte Links und ein freundliches Rot für schon mal besuchte Links. Behalten Sie die Farbwahl möglichst innerhalb des ganzen Homepage-Projekts bei. Vermeiden Sie Unterstreichungen bei Textstellen, die nicht als Verweise dienen. Das führt sonst zu Irritationen. Achten Sie bei Grafikverweisen unbedingt auf die zusätzliche Angabe des ALT-Attributs.Hier ist ein Beispiel für unglücklich gewählte Linkfarben.

Webseiten: Klein, aber fein  

Eine einzelne Webseite sollte nicht größer als 50 KB sein. Bei der Berechnung sind neben der eigentlichen HTML-Datei alle zu einer Seite gehörenden Grafiken (auch Hintergrundgrafiken) und Sounddateien, falls diese automatisch mitgeladen werden, zu berücksichtigen. Relativierend muß ich hinzufügen, daß alle Dateien, die schon in den Speicher des PC geladen wurden, nicht noch einmal heruntergeladen werden müssen und daher schneller zur Verfügung stehen.

Kleine Vorschaubilder einsetzen  

Wenn es sinnvoll erscheint, sollten größere Grafikdateien nur auf Wunsch des Besuchers nachgeladen werden. Dazu am besten kleine Grafikbilder als Vorschau auf die nachzuladende große Grafikdatei anbieten. Nett ist auch immer eine entsprechende Angabe über die KB-Größe. Benutzen Sie für größere Grafiken auch die Interlaced-Funktion der Grafikprogramme. An dieser Stelle sei auch der Hinweis gestattet, daß es Grafikprogramme gibt, die darauf spezialisiert sind, die Größe von GIF- und JPG-Bildern zu optimieren.

Für Transparenz sorgen  

Es sieht meistens unschön aus, wenn Sie Ihre Grafiken ohne transparenten Hintergrund ins Netz stellen. Vielleicht ist diese Funktion in Ihrem Grafikprogramm nicht auf Anhieb zu finden, aber suchen Sie danach (Hilfedatei!) und probieren sie es aus.

ohne Transparenz: Windrose mit Transparenz: Windrose

Grafiken mit Größenangaben laden  

Bei Grafiken (vor allem bei den etwas größeren) sollten unbedingt Größenangaben mit WIDTH und HEIGHT gemacht werden, damit der umgebende Text nicht durch den weiteren Bildaufbau gestört wird und lesbar bleibt. Die entsprechenden Werte findet man eigentlich in jedem Grafikprogramm.

Auf exotische Schriften verzichten  

Es hat nicht viel Sinn, wenn Sie dem Browser ein ganzes Arsenal von zwar sehr schönen, aber auch nicht sehr verbreiteten Schriftarten, anbieten. Was er nicht kennt, d.h. was auf dem PC nicht installiert ist, das zeigt er nicht an oder zumindestens nicht so, wie der schlaue Webmaster das sich gedacht hat. Verwenden Sie sowieso nicht zu viele unterschiedliche Schriftarten, -größen und -formatierungen.

Verschiedene Bildschirmgrößen berücksichtigen  

Nicht nur für den eigenen 21-Zöller schreiben, sondern auch daran denken, daß einige Nutzer noch ein 14-Zoll-Gerät benutzen und vielleicht die Mehrheit einen Monitor mit 15 Zoll. Auch von daher sind Prozentangaben z.B. bei der Tabellenprogrammierung besser als feste Pixelwerte. Webmaster mit größeren Monitoren haben die Möglichkeit, in der Systemsteuerung von Windows andere Einstellungen der Auflösung vorzunehmen. Damit können dann kleinere Bildschirmgrößen simuliert werden. Auch gibt es kleine Hilfsprogramme für diese Problematik. Der Opera-Browser bietet zudem eine nützliche prozentuale Seitenskalierung an. Ändern Sie auch mal in der Ansicht testweise die Größe der Schrift.

Mehrere Browser installieren  

Unbedingt sollte die Homepage mit verschiedenen Browsern getestet werden. Programmieren Sie nicht nur für die allerneueste Version Ihres Lieblingsbrowsers. Optimieren Sie Ihre Seiten also nicht für irgendeinen Browser, sondern für Ihre Besucher. Wenn es möglich ist, installieren Sie mehrere Browser oder testen bei Freunden. Ich habe z.Z. bei mir von Netscape die Versionen 2, 3 und 4 auf dem PC. Das geht problemlos. Mit dem Internet Explorer leider nicht. Da muß man sich halt für eine Version entscheiden. Zusätzlich ist bei mir noch Opera installiert. Opera ist ganz nützlich, weil es sich ziemlich genau an den HTML-Standard hält. Um die wohl kaum noch vorhandenen reinen Textbrowser zu simulieren, kann bei den Browsern die Möglichkeit der Grafikdarstellung ausgeschaltet werden.

Testlauf off- und online  

Testen Sie nicht nur einzelne Seiten, sondern machen Sie am besten einen vollständigen Testdurchlauf und klicken Sie jeden Link an. Undzwar nicht nur offline, sondern gerade auch, nachdem Sie Ihre Seiten ins Netz gestellt haben. Denn hin und wieder vergißt man eben doch die eine oder andere (auch aktualisierte) Seite hochzuladen. Sinnvoll in diesem Zusammenhang sind auch sogenannte Link-Prüfprogramme und HTML-Validatoren aus der Free- und Shareware-Szene. Ein Online-Test ist auch deshalb von großem Nutzen, weil dabei letztlich festgestellt werden kann, wie schnell die Seiten und Grafiken geladen werden. Und vergessen Sie auch nicht, von ausgewählten Seiten Ausdrucke zu erstellen. Da habe ich nämlich schon manche unangenehme Überraschung erlebt.

Gleiches Format für alle Dateinamen  

Schreiben Sie alle Dateinamen am besten durchgängig klein. Sonst muß man immer höllisch auf die genaue Groß- und Kleinschreibung achten. Natürlich ist das letztlich davon abhängig, mit welcher Art von Server man zusammenarbeitet: NT-Server machen diese Unterscheidung z.B. nicht, UNIX-Server sehr wohl. Mit klein geschriebenen Dateinamen sind Sie immer auf der sicheren Seite. Und wirklich für alle Eventualitäten ist man gerüstet, wenn man die Dateinamen im DOS-Format 8.3 (also 8 Zeichen, Punkt und 3 Zeichen für die Dateierweiterung) abspeichert. Als Sonderzeichen käme allenfalls der Unterstrich _ in Frage.

Komplette URL-Adressen angeben  

Links auf fremde Webseiten immer mit der entsprechenden kompletten URL-Adresse vermerken. Zwar ist diese im Browser sichtbar zu machen (letztlich über den Quelltext), aber spätestens nach einem Ausdruck der Seite wird dieser Hinweis beim User u.U. schmerzlich vermißt werden. Auch auf Ihren Seiten sollten Sie wenigstens auf den wichtigsten Dokumenten die eigene URL-Adresse angeben.

Hot Links pflegen  

Die beliebten und fast auf allen Homepages zu findenden Listen mit Hot Links sollten gepflegt werden: Also, hin und wieder mal nachsehen, ob es die Adresse überhaupt noch gibt und wie sich der Inhalt verändert hat. Nach einem Gerichtsurteil ist der Webmaster durchaus verantwortlich für seine Links auf fremde Seiten. Wird da z.B. – auch ohne Ihr Wissen – irgendwo zum Bombenbasteln angeleitet, kann es gewaltig Ärger geben. Vermeiden Sie zudem die bloße Auflistung von Hot Links. Bieten Sie wenigstens Kurzbeschreibungen an. Ein Link soll schließlich eine Empfehlung sein.

Sinnvolle Angaben für Suchroboter  

META-Anweisungen sind für die Suchroboter wichtig. Manche lesen z.B. die ersten 200 Textzeichen aus und geben diese auch als Ergebnis aus. Wenn da nur Frames-Anweisungen und JavaScript-Code steht, ist das relativ sinnlos. Auch die Titel-Angaben werden von Robotern verarbeitet. Machen Sie da also möglichst sinnvolle Eintragungen.

Kataloge sind relevanter  

Manche Roboter finden die Homepage wohl trotzdem nicht. Eintragen sollte man sich auf jeden Fall bei den Katalogen Yahoo, Dino Online, Web.de. Auch Fireball ist ziemlich relevant. Das Eintragen und auch das Ändern kann relativ mühsam sein. Man muß auch nicht in 999 Suchmaschinen vertreten sein. Auch wenn diverse Anbieter dafür ihre Hilfe anbieten. Konzentrieren Sie sich lieber auf das Wesentliche und das sind vor allem effektive Eingaben für die wichtigsten Suchmaschinen. Überprüfen Sie danach die Angaben in den Katalogen und ändern oder aktualisieren Sie diese gegebenenfalls.

Beim Umzug Adresse hinterlegen  

Falls Sie mal mit Ihrer Homepage auf eine andere Adresse umziehen müssen, hinterlassen Sie auf Ihrer alten Startseite netterweise einen Verweis auf die neue Adresse. Oder sorgen Sie mittels einer META-Anweisung für eine automatische Weiterleitung. Stornieren oder ändern Sie die Angaben in den Suchmaschionen, besonders den Katalogen

Wenn überhaupt: Nur dezente Bannerwerbung  

Die Überfrachtung der Seiten mit Werbung nimmt von Tag zu Tag zu. Selbst private Homepages versuchen durch die Einblendung aller möglichen und unmöglichen Banner den Eindruck zu erwecken, „professionell“ zu sein. Gegen dezente und vereinzelte Werbung ist eigentlich nichts einzuwenden. Aber auf manchen Seiten ist ja der normale Homepage-Inhalt schon gar nicht mehr vor lauter Werbung zu erkennen. Ein Webmaster tut sich damit eigentlich auch keinen Gefallen, wenn seine Seiten nur noch als Sprungbrett für andere Anbieter dienen.

Werbung für sich selbst machen  

Natürlich dürfen und müssen Sie sogar die Werbetrommel in eigener Sache rühren. Machen Sie Ihre Homepage nicht nur den Suchmaschinen bekannt. Es gibt weitere Möglichkeiten: Foren, Mailinglisten, Newsgroups, Gästelisten, Linklisten, Webringe, Ihre URL-Adresse als zusätzliche E-Mail-Unterschrift etc. Für alle Möglichkeiten sollte allerdings gelten: Nicht zu plump und dreist.

Große Tabellen aufteilen  

Denken Sie daran, daß ein Browser die komplette Tabelle erst anzeigen kann, wenn er sie ganz ausgelesen hat. Zu große Tabellen sollten Sie daher besser in mehrere kleine aufteilen. Dann hat der Leser schon was zu tun, während sich die restlichen Tabellen weiter im Hintergrund aufbauen. Das geht am besten mit „blinden“ Tabellen, weil da der Übergang von einer Tabelle zur anderen rahmenlos ist und daher noch weniger sichtbar wird. Diese Seite z.B. besteht aus zwei unterschiedlich großen Tabellen.

Tabellen nicht „blind“ schreiben  

Wenn Sie Schwierigkeiten bei der Erstellung von „blinden“ Tabellen haben, weil Sie vielleicht die Übersicht verloren haben, programmieren Sie die Tabellen doch zunächst mit sichtbarem Rand (BORDER=1). Wenn Sie dann fertig sind, setzen Sie das BORDER-Attribut einfach wieder auf Null.

Frames sinnvoll verwenden  

Übertreiben Sie es nicht mit Frames. Maximal drei sollten reichen. Sonst wird es leicht unübersichtlich. Und Sie sollten die Frames auch durchgängig zwecks besserer Orientierung an den gleichen Stellen des Bildschirmbereichs plazieren.

Fremde Seiten nicht einfangen  

Machen Sie fremde Seiten nicht zum Gefangenen Ihres eigenen Framesets. In Einzelfällen kann das sogar zu juristischen Auseinandersetzungen führen. Auf jeden Fall ist es nicht gerade nett, wenn Sie eine fremde Seite innerhalb Ihres eigenen Framesets öffnen und somit zum Bestandteil Ihrer Homepage machen. Außerdem hat sich der Webmaster der anderen Homepage bei der Gestaltung seiner Seiten ja etwas gedacht und jetzt verhunzen Sie ihm das ganze Layout. Pfui!

Nicht isolieren, sondern vernetzen  

Falls Sie Frames benutzen, dann kann es leicht passieren, daß ein Internetsurfer über Suchmaschinen auf einzelne Seiten Ihres Projektes verwiesen wird. Wenn dort nun keinerlei Verbindung zur übrigen Homepage besteht, weil die Navigationsleiste in einem anderen Frame untergebracht ist, so bekommt der Interessent den Rest der Website nicht zu Gesicht. Machen Sie also die User glücklich und sorgen Sie grundsätzlich auf jeder Seite für eine Möglichkeit, zum kompletten Angebot Ihrer Webpräsentation zu gelangen.

Aktuell bleiben  

Lassen Sie Ihre Website nicht einschlafen. Führen Sie regelmäßig Aktualisierungen durch. Ich gebe zu, daß das nicht immer leicht fallen wird. Was für kommerzielle Internetpräsentationen eine berechtigte Forderung ist, kann bei privaten Homepages einfach nicht erwartet werden. Schließlich soll das ja ein Hobby sein und kein Streß. Trotzdem sollten Sie sich hin und wieder die Zeit nehmen und Ihr komplettes HTML-Projekt auf inzwischen veraltete Inhalte überprüfen. Auch manche Suchmaschine kann sich merken, wenn Seiten öfter geändert werden und kommen dann gerne wieder. Auf jeden Fall dient ein Datum der letzten Aktualisierung (wenigstens das Jahr) auf jeder Seite dem User als nicht zu unterschätzende Information.

Nicht zu viele Fenster öffnen  

Öffnen Sie nicht zu oft ein neues Browserfenster für einzelne Seiten. Der User verliert ansonsten total die Orientierung: Sind die neuen Fenster noch Bestandteil der Homepage? Welche Navigationselemente sollten benutzt werden und wo sind die überhaupt?

Downloads anbieten  

Im Prinzip hechelt der Internetnutzer durch das Netz und versucht, in kurzer Zeit so viele Informationen wie irgend möglich zu sammeln. Sorgen Sie für Ruhe und Sreßabbau. Bieten Sie Downloads von interessanten Bereichen Ihrer Homepage an. Es muß ja nicht gleich Ihre gesamte Webpräsentation sein. Auch Ihre letzte Gartenparty dürfte als Download allenfalls für die Beteiligten interessant genug sein. Wie wäre es aber mit einer gut aufbereiteten Linkliste oder einer anhörbaren Sammlung von Vogelstimmen?

Kontaktmöglichkeiten bieten  

Vergessen Sie unter keinen Umständen die Angabe Ihrer E-Mail-Adresse, damit die Besucher Kontakt mit dem Webmaster aufnehmen können. An prominenten Stellen können Sie auch einen direkten Link setzen. Wird dieser angeklickt, so öffnet sich normalerweise das E-Mail-Programm des Besuchers und dieser kann seine Mitteilung in der schon adressierten Mail ablegen und verschicken. Nützlich sind auch Formulare – natürlich nur bei entsprechender Provider-Unterstützung.

Scripte dezent einsetzen  

Es ist zwar verlockend, seine Seiten mit irgendwelchem Schnickschnack aus dem JavaScript-Bereich aufzupeppen, aber wenn schon, dann sinnvoll und in Maßen. Oder haben Sie schon jemals den x-ten Internet-Taschenrechner benutzt? Und muß denn wirklich die Statuszeile des Browsers für jeden JavaScript-Unsinn herhalten? Die Statuszeile ist nämlich für die Ausgabe von weitaus wichtigeren Informationen des Browsers vorgesehen. Und das funktioniert dann nicht mehr. Und dann noch die ganzen CGI-Dienstleister. Statistiken für den internen Gebrauch sind nützlich, aber wer braucht eigentlich Counter? Gähnend leere Gästebücher sind eigentlich nur peinlich. Chatrooms mit jeweils einem Teilnehmer ebenso. Natürlich gibt es auch ganz Nützliches, aber manch einer scheint den eigenen Mangel an Phantasie durch übermäßigen Einsatz irgendwelcher Fremdscripte ausgleichen zu wollen.

Kommentare im Quelltext einsetzen  

Um den eigenen HTML-Quellcode auch noch später zu verstehen, sollten an wichtigen Stellen Kommentare <!– …Kommentartext… –> eingesetzt werden. Dies kann besonders für Anfänger eine Hilfe sein.

Sonderzeichen kodieren  

Für Sonderzeichen und deutsche Umlaute sollten die festgelegten Zahlen- oder Namencodes verwendet werden. Ersetzen Sie die vier HTML-spezifischen Zeichen < durch &#60; oder &lt; und > durch &#62; oder &gt; und “ durch &#34; oder &quot; und das Zeichen & durch &#38; oder &amp;. Vorzuziehen ist eine nachträgliche Konvertierung der deutschen Sonderzeichen, da der Quelltext ansonsten nicht sehr lesbar bleibt. Von der mühseligen Suchen- und Ersetzen-Funktion in den Textverarbeitungsprogrammen ist eher abzuraten. Besorgen Sie sich lieber auf dem Free- und Shareware-Markt ein kleines Hilfsprogramm für diesen Zweck. Da geht das dann vollautomatisch.

Copyright beachten  

Beachten Sie die Urheberrechte auf fremden Seiten. Klauen Sie nicht wild irgendwelche Fotos oder ganze Quellseiten. Das ist zwar verlockend, kann aber durchaus ein Straftatbestand sein, wenn Sie diese wieder veröffentlichen, am besten sogar noch unter Ihrem eigenen Namen.

Überlange Texte vermeiden  

Und zum Schluß: Schreiben Sie nicht so überlange Texte wie diesen hier. Oder lockern Sie diesen wenigstens mit Grafiken etwas auf. Auch eine Aufteilung auf mehrere kleine Seiten kann sinnvoll sein. Nun gut, ich habe eine kleine Entschuldigung: Erstens biete ich den Text ja auch als Download offline an und zweitens kann er zum Nachlesen auch ausgedruckt werden. Das entfernt uns allerdings wieder ein Stück weit weg vom papierlosen Schreibtisch. Man kann eben nicht alles haben.