Auf dieser Seite habe ich ganz spontan ein paar grundsätzliche Dinge aufgelistet, die beim Erstellen von Web-Seiten beachtet werden sollten. Auch wenn der Artikel bereits einige Jahre alt ist, stelle ich immer wieder erstaunt fest, daß er kaum an Aktualität verloren hat.
Diese Liste erhebt weder Anspruch auf Vollständigkeit noch soll sie "Gesetzeskraft" haben.

Inhalte · Navigation · Präsentation · Grafiken · HTML · Testen
Ein kurzes Wort zu Barrieren

Viele der folgenden Punkte sind sicherlich von meiner persönlichen Einstellung gefärbt, aber im Großen und Ganzen beruhen sie auf meinen Erfahrungen als Web-Entwickler und dem Austausch mit Anwendern und Web-Autoren.

Beginnen wir mit zwei uralten Regeln:

1. Form follows Function -
   die schönste Präsentation nützt nichts, wenn das Teil nicht funktioniert.
2. K.I.S.S. - Keep It Simple and Stupid -
   warum kompliziert, wenn es auch einfach geht?

Seitenanfang

Inhalte

Inhalt (Content) ist das Wichtigste für Ihre Seiten. Nur deshalb kommen die Leute überhaupt zu Ihnen- vor allem, wenn Sie gute, selbsterstellte, originelle Inhalte anbieten!

• Bevor Sie beginnen, brauchen Sie etwas, das Sie (mit)teilen möchten. Denken Sie darüber nach, wer Ihre Besucher sein könnten. Dann sind Sie in der Lage, die Leute korrekt anzusprechen.
• Strukturieren Sie Inhalte, organisieren Sie sie in Rubriken, so daß nur das zusammenhängt, was zusammengehört. Ergänzen Sie Inhalte regelmäßig.
• Mit Links muß man vorsichtig umgehen - Ihre Site sollte nicht mehr Links auf fremde Inhalte als auf die eigenen Inhalte anbieten, eher umgekehrt. Links auf fremde Seiten sollen Ihre eigenen Inhalte ergänzen, erweitern, vertiefen ... Für alles andere gibt es Suchmaschinen.

Ihre Website soll Web-Inhalte beisteuern, nicht fremde Inhalte weiterverteilen. Zu englisch: Contribute, don't distribute

Seitenanfang

Navigation

Nach den Inhalten ist die Navigation das wichtigste Element einer erfolgreichen Webseite. Legeen Sie ihre internen Links so an, daß Besucher sich komfortabel hin und her bewegen können und immer wissen, wo sie sich gerade befinden. Auch das Wiederfinden von bestimmten Inhalten muß möglich sein! Das Layout einer Site sollte nicht linear sein (von A nach B nach C nach D), besser ist es, wenn man jede Rubrik von überall erreichen kann.

• Wenn Ihre Navigation auf Java, Javascript oder exotischen Plug-Ins basiert, muß eine textbasierte Alternative angeboten werden.
• Lange Seiten sollten mehr als ein Menü haben, z.B. eine Leiste oben und eine weitere unten. Zumindest das Scrollen (nach oben oder unten) kann durch Links unterstützt werden (Sprungmarken auf Unterbereiche einer Seite, Link zum Seitenanfang).
• Vermeiden Sie horizontale Scrollbars.
• Stellen Sie sicher, daß alle internen Links funktionieren und keine Sackgassen existieren.
• Externe Links dürfen niemals in Ihrem Frameset "gefangen" werden, "target=_top" ist Ihr Freund.
• Interne Links sollten sich immer im gleichen Fenster öffnen.
• Nicht alle mögen es, wenn mit jedem externen Link ein neues Fenster geöffnet wird (target="_blank"). Überlegen Sie, ob es wirklich notwendig/praktisch ist.
• Kennzeichnen Sie externe Links (z.B. mit einem winzigen Icon), um zu signalisieren, daß man mit dem nächsten Klick die Site verläßt.
• Eine interne Suchmaschine oder eine Sitemap sind sehr gute Hilfen, zumindest ab einer bestimmten Größenordnung.
• Bieten Sie auf jeder Seite einen "Rettungsanker" ("Home", "Startseite") an.

Seitenanfang

Präsentation

Websites sind immer "Under Construction" - derartige Hinweise sind völlig überflüssig und deshalb äußerst irritierend. Umso mehr, wenn man per Klick auf eine derartige Seite geführt wird. Was noch nicht fertig ist, wird auch nicht verlinkt - so einfach ist das.

• Belästigen Sie Ihre Besucher nicht mit "Diensten" wie Uhrzeit, Datum, Wetterbericht, Newsticker, Abfrage des Vornamens, Mitteilung seines Betriebssystems, Browsers, Bildschirmauflösung, Paßwortabfragen und ähnlichen.
• Verzichten Sie auf Hinweise wie "Optimiert für 1024x768, MSIE 7 (Download hier) und Truecolor, Font ist Exotica (Download hier), Schriftgröße bitte auf 'Mittel' stellen, Java am besten anschalten, sonst seht Ihr die schicken Applets nicht." usw. usf. etc. pp ... Oder haben Sie schon mal einen neuen Browser installiert, mehrere PlugIns gesaugt und Ihre sämtlichen Systemeinstellungen umgekrempelt, um eine bestimmte Webseite ansehen zu können? Na also! Stellen Sie lieber sicher, daß Ihre Seiten in den gängigen Browsern und Auflösungen funktionieren.
• Pop-Up-Fenster mit überflüssigen Hinweisen ('Alert') sind extrem lästig und sollten weitgehend vermieden werden. Natürlich gibt es auch sinnvolle Anwendungen für Pop-Ups, doch sollten diese sehr genau überdacht und geplant werden.
  Noch schlimmer sind erzwungene Vollbildschirme, die sämtliche Browserelemente (Menüs, Standardsymbole, Statusleiste usw.) unterdrücken.
• Regel #1 - lassen Sie das Parent-Window in Ruhe! Es ist ok, einen EIGENEN Ablauf in einem neuen Fenster zu starten, solange ich das Ursprungsfenster nicht verändere (Größe ändern, Fullsizen oder gar Schließen(!)). Schließt der Anwender das neue Fenster/Pop-Up, soll er sich haargenau wieder in seiner Ursprungs-Situation befinden.
• Scrollbars - Mittlerweile lassen die sich in einigen Browsers einfärben. Man sollte sich schon etwas Mühe geben, die Scrollbars so anzupassen, daß sie sich in das Gesamtbild einfügen, die Funktionalität aber klar sichtbar erhalten bleibt. Es ziemlich absurd, wenn sich jemand große Mühe gibt, die Scrollbars praktisch unsichtbar zu machen. Scrollbars sind ein funktionaler Bestandteil des Browserfensters, nicht ein Schmuckelement des Seiten-Layouts.
• Java-Applets müssen eine spezielle Funktion haben. Ansonsten - weg damit!
• Kometenschweife, die dem Cursor hinterherflattern? Ärgerlich - weg damit!
• Mauszeiger, die sich ständig verändern? Fadenkreuze auf schwarzem Hintergrund? Überflüssig bis lästig - weg damit!
• Alles, was über den Bildschirm hopst und zappelt und blinkt - weg damit!
• Musik ist immer Geschmackssache. Und beim Lesen längerer Texte oftmals störend. Es muß die Möglichkeit geben, die Musik abzustellen. Noch besser ist es, dem Besucher zu überlassen, ob er Musik möchte oder nicht, also KEIN "AutoLoad".
• Werbe-Banner - kein Kommentar ... Fragen Sie sich einfach mal, was solcher Schrott auf Ihrer Site zu suchen hat. Viele nutzen sog. Werbeblocker, die gängige Banner-Formate sowieso automatisch ausblenden.
• "Tapeten" (Hintergrundgrafiken) sind meistens eher wirr - wenn schon, dann dezent in Farbe, möglichst ohne oder ganz schwacher Textur, auf allen Seiten gleich und immer mit schön viel Kontrast zum Text.
• Apropos Text - auf sehr vielen Seiten ist der Text einfach zu klein, um nicht zu sagen "winzig". Dies ist besonders lästig, wenn sich die Schrift nicht skalieren läßt, weil sie mit absoluten Werten festgelegt ist. Oder kannst Du das hier noch lesen? Ok, Sie vielleicht, aber auch Ihre Mitmenschen?
• Der "blink"- und der "marquee"-Tag sind verboten *ggg*.
• Benutze nur eine (maximal zwei) Schrift-Typen.
• Schreiben Sie keine bunten Texte.
• Geben Sie ihren Texten R a u m und quetschen Sie sie nicht in lauter kleine Kästchen.
• WuSsteN Sie daß DiEse ARt zU scHReibeN mIch iRRe mAchT?
• Machen Sie es dem Besucher einfach, Links von Text zu unterscheiden. Auch wenn im Browser des Besuchers das Unterstreichen von Links abgestellt ist, sollte man sie trotzdem deutlich erkennen können.
• Und Sprache - denken Sie daran, daß Sie Menschen ansprechen. Vermeiden Sie Obszönitäten. Prüfen Sie ihre Rechtschreibung und Grammatik, oder lassen prüfen (gute Freunde oder auch professionelle Webworker machen so was für Sie).
• Pornographie, Gewalt und ähnliches bleiben auf Ihrem eigenen Rechner - nicht auf Ihrer Website.

Seitenanfang

Grafiken

Bilder sind sicherlich bereichernd für eine Website, können sogar ihren "Charakter" prägen. Hier ein paar kurze Hinweise:

• Erstellen Sie ihre eigenen Grafiken. Wenn Sie fremde Grafiken benutzt, beachten Sie Copyrights und erwähnen Sie den Urheber.
• Wählen Sie Grafiken, die Ihre Inhalte unterstützen. Setzen Sie sie sparsam ein.
• Auch Bilder brauchen R a u m - vermeiden Sie Text, der an Bildern klebt.
• Vermeiden Sie große oder klotzige Bilder. Packen Sie nicht allzuviele Bilder auf eine Seite.
• Benutzen Sie webgerechte Formate (gif, jpg, png). Komprimieren Sie ihre Bilder, aber nur soweit, daß die Qualität erhalten bleibt.
• Animationen sind meist größer (in Kb) und oftmals eher nervig. Sie stören beim Lesen. Mehr als eine Animation im Blickfeld ist absolut ätzend.
• Im Quellcode immer "width" und "height" der Bilder mit eingeben, das reduziert die Ladezeit. Vermeiden Sie es, Bilder künstlich zu schrumpfen (also 800x400 als 100x50 auszugeben) - es lädt dadurch nicht schneller und sieht auch noch fürchterlich aus.
• Benutzen Sie die "alt="...""-Attribute phantasievoll, beschreibend - "bild.gif" ist ziemlich blödsinnig. Bedenken Sie, daß dieses Attribut nur der Beschreibung fehlender bzw. nicht angezeigter Bilder dient. Verwenden Sie zusätzlich das vorgesehene "title="...""-Attribut.
• Sogenannte Pre-Loader sind nur sinnvoll, wenn sie nicht zu ewigen Wartezeiten verdonnern. Laden Sie nur die wichtigsten Bilder vor (z.B. Navigations-Grafiken), aber nicht Ihre komplette Bryce-Galerie von Seite 14.

Seitenanfang

HTML

Lernen Sie HTML - aber richtig!
Dazu benötigen Sie nicht allzuviel (neben einer gehörigen Portion Spaß an der Freude und einem vernünftigen Texteditor):

• SelfHTML - http://de.selfhtml.org/
  Das Standardwerk von Stefan Münz. Sie können es auch herunterladen, zusätzlich gibt es ein Forum, wo Sie Fragen stellen können und jede Menge Ressourcen rund um HTML (auch als Buch erhältlich).
• GoldHTML - http://www.karzauninkat.com/Goldhtml/
  Dazu passend die ideale Ergänzung von Stefan Karzauninkat. Auf humorige Art und Weise werden hier 70 gravierende Fehler beschrieben, die man einfach nicht machen muß - Goldene Regeln für schlechtes HTML.

Modernes Webdesign trennt zwischen Struktur und Layout, man benötigt weder Frames noch Korsetts aus x-fach verschachtelten Layout-Tabellen mit Heerscharen von blinden GIFs. Statt dessen erhält man schlanken, übersichtlichen Quellcode, während das Layout aller Seiten zentral über ein Stylesheet (Formatvorlage) kontrolliert wird. Damit wird jedes Redesign zum Quell wahrer Freude.

Verlassen Sie sich nicht auf sogenannte WYSIWYG-Editoren (z.B. Frontpage, GoLive, NetObjectsFusion u.a.). Dies sind hervorragende Werkzeuge, wenn man weiß, was man tut. Ansonsten ist es etwa so, als ob man seine Website von BabelFish "übersetzen" läßt (WorldWideWeb = weltbreites Spinnennetz) ...
Ja, ich weiß - über diesen Punkt ließe sich trefflich streiten. Doch lassen wir es an dieser Stelle einfach mal als meine Meinung stehen, ok? :)

Seitenanfang

Testen

Bevor Sie ihre Seiten hochladen, sollten Sie alles auf Herz und Nieren prüfen.

• Prüfen Sie ihre Quelltext, dafür gibt es hervorragende Werzeuge (sogenannte Validatoren). Funktionieren alle Links? Gibt es Javascript-Fehler? Wie sieht die Seite unter verschiedenen Auflösungen aus? In verschiedenen Browsern?
• Überprüfen Sie vor allem Ihre Navigation - setzen Sie einfach mal ein paar Freunde an die Kiste und beobachte, ob sie mit Ihrem Navigationssystem klarkommen. Ich gehe jede Wette ein, daß Sie diese Beobachtungen sehr aufschlussreich finden werden!
• Laden Sie ihre Seiten hoch und prüfen nochmal sämtliche Links. Beobachten Sie die Ladezeiten - wenn einzelne Seiten zu lange brauchen, lassen sich bestimmt noch Bilder verkleinern, Texte kürzen, Scripte oder Applets rausschmeissen, Code optimieren ...

Seitenanfang

Barrieren

Oftmals wird diskutiert - "Welche Auflösungen muss ich berücksichtigen?", "Warum sollte ich noch alte Browser bedienen?", "Warum soll ich skalierbare Fonts nutzen?" ...

Barrierefreies Web gilt für ALLE.

Ich finde es schon wichtig, daß diese Dinge einfach mal überdacht werden, um den eigenen Blick dafür zu schärfen. Manche Barrieren lassen sich mit sehr wenig Aufwand vermeiden (ohne die Kreativität einzuschränken) - man muß sich nur darüber im Klaren sein.
Was ich nicht teile ist die Meinung, daß man x Versionen erstellen muss, um es "allen recht zu machen". Das stimmt so nicht. Wenn man die verschiedenen Gegebenheiten von vornherein in die Planung einer Website einfließen läßt, kann man einen hohen Grad an Kompatibilität erreichen - mit EINER Version.
Textbrowser und Screenreader sind gewaltig auf dem Vormarsch. Zum einen bei dem schnell wachsenden Anteil von Anwendern mit Behinderungen, zum anderen bei den Info-Freaks, für die nur eins zählt: Information, so schnell und übersichtlich wie möglich.
Ich sträube mich gegen das Denken, daß barrierefreies Webdesign unvertretbar mehr Arbeit sei, oder ein Lust-Killer, oder Einschränkung der Kreativität, oder gar ein Anachronismus.

Meine primäre Ratio ist immer der Content - aber trotzdem möchte auch ich mit meiner Arbeit zufrieden sein, meine ästhetischen Ansprüche verwirklichen. Klar gehe auch ich dabei Kompromisse ein, versuche aber trotzdem, EIN Ziel nicht aus den Augen zu verlieren: Leute nicht auszuschließen, nur weil sie ein anderes Betriebssystem, einen anderen Browser, eine andere Auflösung fahren oder nicht so ausgebufft mit der Technik umgehen können. Oder einfach, weil sie Dinge anders wahrnehmen als ich.
Für mich ist das keine Einschränkung, sondern eine Herausforderung - nicht zu erwarten, daß sich andere auf meinen kleinen Ausschnitt der Wirklichkeit (das, was ich auf meinem Monitor sehe) einstellen, sondern mein Angebot so aufzubauen, daß es von anderen unter allen möglichen Wirklichkeiten (das, was andere auf ihrem Monitor sehen) wahrnehm- und erfassbar bleibt.
Oder: WYSIWODS (What You See Is What Others Don't See) ...

Seitenanfang

Inhalte · Navigation · Präsentation · Grafiken · HTML · Testen
Ein kurzes Wort zu Barrieren