Awards

Bessere Seiten = bessere Awards

Ich werde häufig gebeten, Websites zu begutachten und Tips oder Hilfestellung zur Verbesserung anzubieten.
Um zumindest ein paar Anhaltspunkte zu bieten, habe ich ganz spontan ein paar Dinge aufgelistet, die beim Erstellen einer Website beachtet werden sollten. Diese Liste erhebt weder Anspruch auf Vollständigkeit noch soll sie "Gesetzeskraft" haben. 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 drei 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?
3. Contribute, don't distribute -
   Deine Website soll Web-Inhalte beisteuern, nicht fremde Inhalte weiterverteilen.

Inhalte

Inhalt (Content) ist das Wichtigste für Deine Site. Nur deshalb kommen die Leute überhaupt zu Dir - vor allem, wenn Du gute, selbsterstellte, originelle Inhalte anbietest!

• Bevor Du beginnst, brauchst Du etwas, das du (mit)teilen möchtest. Denke darüber nach, wer Deine Besucher sein könnten. Dann bist Du in der Lage, die Leute korrekt anzusprechen.
• Strukturiere Deine Inhalte, organisiere sie in Rubriken, so daß nur das zusammenhängt, was zusammengehört. Ergänze Deine Inhalte regelmäßig.
• Mit Links muß man vorsichtig umgehen - Deine Site sollte nicht mehr Links auf fremde Inhalte als auf die eigenen Inhalte anbieten, eher umgekehrt. Links auf fremde Seiten sollen Deine eigenen Inhalte ergänzen, erweitern, vertiefen ... Für alles andere gibt es Suchmaschinen.

Navigation

Nach den Inhalten ist die Navigation das wichtigste Element einer erfolgreichen Website. Lege Deine Seiten-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 Deine Navigation auf Java, Javascript oder exotischen Plug-Ins basiert, muß eine textbasierte Alternative angeboten werden.
• Lange Seiten sollten mehr als ein Menü haben, zB. 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).
• Vermeide horizontale Scrollbars.
• Stelle sicher, daß alle internen Links funktionieren und keine Sackgassen existieren.
• Externe Links dürfen niemals in Deinem Frameset "gefangen" werden, "target=_top" ist Dein 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"). Überlege, ob es wirklich notwendig/praktisch ist.
• Kennzeichne externe Links (zB. 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.
• Biete auf jeder Seite einen "Rettungsanker" ("Home", "Startseite").

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ästige Deinen Besucher nicht mit "Diensten" wie Uhrzeit, Datum, Wetterbericht, Newsticker, Abfrage des Vornamens, Mitteilung seines Betriebssystems, Browsers, Bildschirmauflösung, Paßwortabfragen und ähnlichen.
• Verzichte auf Hinweise wie "Optimiert für 1024x768, MSIE 5.5 (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 hast Du schon mal einen neuen Browser installiert, mehrere PlugIns gesaugt und Deine sämtlichen Systemeinstellungen umgekrempelt, um eine bestimmte Webseite ansehen zu können? Na also! Stelle lieber sicher, daß Deine 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 - lasse das Parent-Window in Ruhe!
• Scrollbars - 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.
• 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 ... Frage Dich einfach mal, was solcher Schrott auf Deiner 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, Du vielleicht, aber auch Deine Mitmenschen?
• Der "blink"- und der "marquee"-Tag sind verboten *ggg*.
• Benutze nur eine (maximal zwei) Schrift-Typen.
• Schreibe keine bunten Texte.
• Gib Deinen Texten   R a u m    und quetsche sie nicht in lauter kleine Kästchen.
• WuSstesT Du daß DiEse ARt zU scHReibeN mIch iRRe mAchT?
• Mache 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 - denke daran, daß Du Menschen ansprichst. Vermeide Obszönitäten. Prüfe Deine Rechtschreibung und Grammatik, oder lasse prüfen (gute Freunde machen so was für Dich).
• Pornographie, Gewalt und ähnliches bleiben auf deinem eigenen Rechner - nicht auf Deiner Website.

Grafiken

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

• Erstelle Deine eigenen Grafiken. Wenn Du fremde Grafiken benutzt, beachte Copyrights und erwähne den Urheber.
• Wähle Grafiken, die Deine Inhalte unterstützen. Setze sie sparsam ein.
• Auch Bilder brauchen   R a u m    - vermeide Text, der an Bildern klebt.
• Vermeide große oder klotzige Bilder. Packe nicht allzuviele Bilder auf eine Seite.
• Benutze webgerechte Formate (gif, jpg, png). Komprimiere Deine 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 Sourcecode immer "width" und "height" der Bilder mit eingeben, das reduziert die Ladezeit. Vermeide es, Bilder künstlich zu schrumpfen (also 800x400 als 100x50 auszugeben) - es lädt dadurch nicht schneller und sieht auch noch fürchterlich aus.
• Benutze die 'alt="..."'-Attribute phantasievoll, beschreibend - "bild.gif" ist ziemlich blödsinnig.
• Sogenannte Pre-Loader sind nur sinnvoll, wenn sie nicht zu ewigen Wartezeiten verdonnern. Lade nur die wichtigsten Bilder vor (zB. Navigations-Grafiken), aber nicht deine komplette Bryce-Galerie von Seite 14.

HTML

Lerne HTML und CSS - aber richtig!
Dazu benötigst Du 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. Du kannst es auch herunterladen, zusätzlich gibt es ein Forum, wo Du Fragen stellen kannst 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 blind 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.

Verlasse Dich nicht auf sogenannte WYSIWYG-Editoren (zB. Frontpage u.ä.). Dies sind halbwegs brauchbare 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? :)

Testen

Bevor Du Deine Seiten hochlädst, solltest Du alles auf Herz und Nieren prüfen.

• Prüfe Deinen 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üfe vor allem Deine Navigation - setze einfach mal ein paar Freunde an die Kiste und beobachte, ob sie mit Deinem Navigationssystem klarkommen. Ich gehe jede Wette ein, daß Du diese Beobachtungen sehr aufschlussreich finden wirst!
• Lade deine Seiten hoch und prüfe nochmal sämtliche Links. Beobachte die Ladezeiten - wenn einzelne Seiten zu lange brauchen, lassen sich bestimmt noch Bilder verkleinern, Texte kürzen, Scripte oder Applets rausschmeissen, Code optimieren ...

Barrieren

Oftmals wird diskutiert - "Welche Auflösungen muß ich berücksichtigen?", "Warum sollte ich noch alte Browser bedienen?", "Warum soll ich skalierbare Font-Größen nutzen?" ...

Barrierefreies Web gilt für ALLE.

Es ist sehr wichtig, diese Dinge einfach mal zu überdenken, 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.
Schlichtweg falsch ist die weitverbreitete Meinung, daß man X Versionen erstellen muß, um es "allen recht zu machen". 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.
Genau so falsch ist 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 ich dabei auch 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) ...

---