Seiten über gutes Webdesign, Usability (Benutzbarkeit) und Accessibility (Zugänglichkeit) mit HTML und CSS.
Navigation überspringen

Optimiert für ... Niemanden

Leider sind manche Seiten wirklich so übel, dass sie im wesentlichen als Abschreckung zu gebrauchen sind. Oder als schlechte Beispiele, aus denen man lernen kann.

Auf dieser Seite:

Ich werde hier bestimmt nicht über private Seiten von Hobby-Webdesignern herziehen. Jeder fängt mal klein an und gerade beim Webdesign gibt es doch recht viel zu lernen.

Wohl aber vergieße ich meinen Spott gern über sogenannte Fachleute, die arglosen Auftraggebern für (teilweise viel) Geld eine schlechte Visitenkarte andrehen. Hier dürften einige Fehler wirklich nicht passieren.

Ich versuche die einzelnen Beispiele nach Rubriken zu ordnen, aber die ganz schlechten Seiten passen meist in alle Rubriken.

Nicht alle Beispiele hier sind extrem schlecht. Einige sind im großen und ganzen ok, aber ich kann an ihnen das ein oder andere Problem zeigen.

Mit der Zeit wird doch einiges besser. Ein Teil der Seiten, die ich hier noch 2003 genannt habe ist inzwischen besser geworden. Bis auf die Seiten der Webdesigner, die ich hier aufgelistet hatte - die sind inzwischen aus dem Netz verschwunden! Es gibt also doch noch etwas Hoffnung. Wer wissen will, wie es aussah: die alte Hall of Shame.

– — – — – — – — –

Schlechter Stil

Dieser ist meist auch mit schlechtem HTML (siehe unten) verbunden. Hauptsächlich macht er sich aber durch überflüssige Barrieren und Ignoranz gegenüber den möglichen Wünschen der Kunden (ohne Grafiken surfen, anderen Browser benutzen) bemerkbar.

blickpunkt |x|

Manche verschenken ein Webdesign um Aufmerksamkeit zu erregen. Gut das blickpunkt |x| seine Seite gleich als Warnhinweis gestaltet hat. (Bild: So sah es aus). Neben dem sich überlappenden Text die obligatorischen Probleme: Fehler im HTML und Fehler im CSS. Dazu (natürlich?) schlechter Kontrast und zu kleine Schrift, deren Größe sich im IE auch nicht ändern läßt. Vom üblen Tabellen-Layout ganz zu schweigen.

Ehrlich, so was wollte ich nicht mal geschenkt.
 

Mösl, W.D.S.-Internetwerbung

Auf die Spitze treibt es allerdings Roland Mösl der in Newsgroup-Beiträgen sein sog. Multi-Layout anpreist, welches dann zu so aufregenden Erlebnissen wie dem hier gezeigten führen: Die Werbeseite für das Multi-Layout (Bild: So sah es aus, aufgenommen mit Internet Explorer bei 1600*1200 Pixeln Bildschirmauflösung). Da schieht man schon in der Verkleinerung, das dieses Layout sich ohne JavaScript offensichtlich an gar nichts anpasst.

Das hat sich auch nach 4 Jahren nicht geändert.
 

Wer Webdesigner mit solchen Visitenkarten beauftragt, ist dann wohl selbst schuld.

Manche belassen es nicht bei bloßen Hinweisen, sie machen ernst:

Osram

Die Firma Osram beweist, dass dies nicht nur kleinen Firmen passiert. Die Firma Osram verwendet JavaScript um die Navigation anzuzeigen. Kommt man mit ausgeschaltetem JavaScript daher, so gibt es einen Hinweis und eine Sackgasse. (Bild: So sah es aus).

Einen irgendwie sichtbaren Vorteil gibt es nicht. Die Seite braucht lange zum Laden - egal ob mit oder ohne JavaScript. Nur, dass man mit einem sicher eingestellten Internet Explorer gar keine Informationen bekommt.

Nach diesem Empfang sehe ich die Welt in einem neuen Licht.
 

Vodafone

Selbst Firmen, die sich mit Kommunikation beschäftigen, haben es nicht nötig, mit jedem zu kommunizieren. Die Firma Vodafone will zwar, dass Kunden an jedem Ort der Welt ins Internet gehen können, aber bitte nur mit einem modernen grafischen Browser, der JavaScript aktiviert hat und Cookies bedient (Bild: So sah es aus).

Zwar gibt es einen Weg trotzdem hinein zu kommen (wer findet ihn?), aber mit meinem PDA, der über UMTS ins Netz geht, habe ich trotzdem meine Not! Will man die eigenen Kunden nicht haben?
 

Bei diesen Beispielen (die es wirklich zu Hauf gibt) braucht man sich nicht zu wundern, wenn viele Unternehmen feststellen, dass der Internetauftritt nicht so lohnenswert ist, wie erwartet.

– — – — – — – — –

Schlechter Inhalt

Es ist schon unglaublich, was manche Menschen auf Ihre Webseiten schreiben.

Herrle

Dass viele Menschen auf den Link-Disclaimer hereinfallen, ist ja allgemein bekannt. Aber auch Fachleuten fehlt anscheinend manchmal die Kompetenz zu erkennen, welchen Blödsinn sie da abschreiben. Wie sonst kann man sich erklären, dass z. B. die Rechtsanwaltskanzlei Herrle (erster Interessenschwerpunkt: Internetrecht!) diesen Abwehrzauber in ihrem Impressum stehen hat? Zur Sicherheit sogar zwei Mal! (Dass das Impressum die gesetztlichen Auflagen auch sonst nicht erfüllt, sei hier nur noch der Vollständigkeit halber erwähnt.)

Aber sie befindet sich da in reichlicher, schlechter Gesellschaft: Eine Google-Suche findet direkt dutzende Kanzleien, deren Impressum ähnlich aussieht. Armes Deutschland!

– — – — – — – — –

Schlechte Benutzbarkeit (Usability)

AEG

Die Licentia Patent Verwaltungs GmbH alias AEG gibt sich wirklich alle Mühe, dass niemand ihre Webseite lesen kann! Wer blind ist, oder ohne Grafiken surft, sieht praktisch gar nichts (Bild: So sah es aus).

Auch Menschen mit schlechter Sehfähigkeit stehen auf dem Schlauch: sie können die Schrift nämlich nicht vergößern, da sie nur als Grafik vorliegt.

Aber damit sind noch längst nicht alle Möglichkeiten der dortigen Webdesigner ausgeschöpft: Falls jemand die Seite vollständig sieht und lesen kann, funktioniert die Navigation sicherheitshalber nur mit JavaScript. Und damit nicht genug, das verwendete JavaScript funktioniert auch nur im Internet Explorer! Da spielt es dann auch keine Rolle mehr, das nur auf MouseOver reagiert wird und somit Tastaturbenutzer und PDA-Besitzer im Regen stehen (ein Touchscreen beherrscht kein StiftOver).

Muss ich hier noch erwähnen, das die Seite auch noch eklatante HTML-Fehler enthält? Das überflüssige Frameset (ach so, wenn die Intention ist, Menschen zu behindern, ist es ja nicht überflüssig, sondern sinnvoll!) besitzt sogar ein (leeres!) <noframes>-Element. Dieses beginnt aber erst nach dem schließenden </html>-Tag.

Ich glaube, ich gehe ein bißchen weinen.
 

Netcologne

Die Firma Netcologne möchte gern, dass ihre AGB für das Internetangebot rechtsverbindlich eingebunden werden. Deshalb erscheint beim ersten Mal eine Seite, auf der man diese akzeptieren muss (Bild: So sah es aus).

Damit diese AGB gültig eingebunden wären, müsste man sie lesen (und abspeichern oder drucken) können. Bei nur zwei Zeilen sichtbarem Text ist das eindeutig nicht der Fall. Und das alles nur, um das Design beizubehalten. Das meine E-Mail dazu nie beantwortet wurde, passt ins Bild.

Das war wohl nichts.
 

Schlechte Barrierefreiheit (Accessibility)

Susanne Jakobs

Das Unternehmen Susanne Jakobs bietet barrierefreies Webdesign und Usability (Bild: So sah es aus).

Leider scheint Sie beide Begriffe höchstens auf Blinde zu beziehen, denn für Sehende ist die Seite nur wenig geeignet. Das beginnt mit dem starren Design für 1024*768 Pixel, welches zu den horizontalen Scrollbalken führt. Und geht mit dem extrem schlechten Kontrast von mittelgrünem Text auf hellgrünem Hintergrund weiter. Wer keine Bilder sieht, erfährt auf der Seite nicht einmal, bei wem er eigentlich gelandet ist.

Auch werden besuchte Links praktisch nicht gekennzeichnet; ebenso wenig wird die aktuelle Seite gekennzeichnet. Dafür kann man eine Version "ohne Design" anwählen. Da hat wohl jemand Konzept barrierefreier Webseiten nicht wirklich verstanden. Noch dazu funktionieren dann auch keine internen Links mehr. So weit scheint es mit dem angeblich barrierefreien CMS nicht her zu sein.
 

Stadt Karlsruhe

Der Stadt Karlsruhe liegt Barrierefreiheit angeblich sehr am Herzen. Sie bewirbt sich mit ihrem Webauftritt sogar für den Biene-Award. Leider hat man hier so einiges nicht verstanden.

Das sich das Layout nicht an die Fensterbreite anpasst, ist nur der Anfang. Je nach Fenstergröße überlagern und überdecken sich Teile der Seite (Bild: So sah es aus).

Die (schlecht) Sehenden werden erst vor den Kopf gestoßen, in dem man die von ihnen eingestellte Schriftgröße ignoriert und nur 80% davon verwendet. Wenn man dann in die Hilfe sieht, wird man auch noch zusätzlich verhöhnt, indem einem dort erklärt wird, wie man die Schrift mit seinem Browser vergrößern kann. Da könnte man fast die Blinden beneiden, die sich so etwas nicht ansehen müssen.

Aber auch für Blinde sind die Seiten wenig erquicklich: es wird nämlich fast vollständig auf semantische Auszeichnung verzichtet. Überschriften kennzeichnet man hier eher mit einem <div>-Element und formatiert die Schrift größer und fetter.

Ein besonderes Schmankerl ist die sogenannte Text-Version der Seiten. Diese enthält nicht wirklich weniger Bilder. Sie verzichtet lediglich auf das Drei-Spalten-Layout. Allerdings passt sich selbst diese Version nicht an die aktuelle Fensterbreite an. Wenn man dann auf dieser Seite einen Link klickt, landet man - richtig: wieder in der sogenannten grafischen Version. Dort kann man dann evtl. wieder einen Link zur „Text-Version“ anklicken.

Schaltet man die Grafiken aus und sieht sich an, was Besucher mit langsamen Internet Zugang zu sehen (oder Blinde vorgelesen) bekommen, zeigt sich, dass auch die Bedeutung des alt-Attributs nicht verstanden wurde. Dieses enthält bei Schmuck-Grafiken überflüssigen Text. Auch der Unterschied zwischen alt- und titel-Attribut scheint nicht bekannt zu sein; es enthalten beide immer den selben Inhalt.

Wenn dieser Webauftritt einen Biene-Award bekommen sollte, hat sich dieser Preis endgültig lächerlich gemacht.
 

– — – — – — – — –

Schlechtes HTML etc.

Leider ist standardkonformes HTML keine Garantie dafür, dass es jeder Browser richtig darstellt. Es gibt sogar ein paar Stellen, wo man den Standard verbiegen muss, um die gewünschte Darstellung auf allen Browsern zu erhalten. Die Ursachen hierfür sind zum einen die Entwicklung des Standards, aber im Wesentlichen die fehlende Unterstützung des Standards durch die Browser.

Allerdings kann dies alles keine Entschuldigung für schlechtes, syntaktisch falsches HTML sein. Mit einer einfachen, kostenlosen(!), automatischen Validierung können meisten Fehler sehr schnell und einfach gefunden und beseitigt werden.

Namentlich bei den Content Management Systemen (CMS), wie sie z. B. große Zeitungen einsetzen, wäre es ein leichtes, mit kleinen Änderungen der Vorlagen die Fehler auf allen Seiten gleichzeitig auszubauen.

Bild

Wenn man den Hauptframe von www.Bild.de dem Validator des W3C zum Fraß vorwirft, erhält man folgendes Ergebnis: 22 Fehler (Stand: 29.5.2006). Davon ausgehend, dass es sich dabei um einfache Standardfehler handelt, ist das schon traurig.

Stern

Die Seite www.Stern.de macht echte Fortschritte. Inzwischen sind es nur noch 4 überflüssige Fehler (Stand: 29.5.2006).
Herzlichen Glückwunsch!

Spiegel

Wenn man z. B. www.Spiegel.de dem Validator des W3C zum Fraß vorwirft, erhält man folgendes Ergebnis: 265 Fehler (Stand: 29.5.2006). Ansonsten spricht dieses Ergebnis wohl für sich :-(.

Focus

Wenn man z. B. www.Focus.de dem Validator des W3C zum Fraß vorwirft, erhält man folgendes Ergebnis: 290 Fehler (Stand: 29.5.2006). Und das ist bereits eine große Verbesserung! (siehe Focus 2002). - ohne Worte -

Bei keiner dieser Seiten ist davon auszugehen, dass sie von Hobbykünstlern nebenberuflich erstellt wurden. Hier waren „Fachleute“ am Werk. Armes Deutschland.

Urheber © Dr. Joachim Wiesemann

Letzte Aktualisierung: 7.2.2007


Weiter mit: Was ist eigentlich Webdesign?.

– — – — – — – — –

Verweise (Links)