Netztaucher

Erkenntnisse eines Netzbewohners

Filmtournee unterwegs – Webseitenkritik

Hinterlasse einen Kommentar


Dieser Artikel wartet schon lange in meinen Entwürfen darauf veröffentlicht zu werden, aber irgendwie dachte ich mir immer, wozu? Aber nachdem Peter Kröner auch immer mal wieder darauf besteht, dass doch bitte auf ein wenig Barrierefreiheit zu achten ist, möchte ich den Artikel als Dokumentation eines schlechten Beispiels doch veröffentlichen. Einen Verantwortlichen habe ich auf der Seite leider nicht gefunden, um einen direkten Kontakt herzustellen.

Moderne Webseiten benutzen heutzutage eine semantische Auszeichnung, die möglichst einfach und effizient die Struktur baut, welche dann über Stylesheets designt werden. Zusätzliche Skripte haben entweder einen Fallback (Graceful Degradation) oder sind als Zusatznutzen konzipiert, der nur zum Tragen kommt, wenn das Skript unterstützt wird (Progressive Enhancement). Alte Webseiten erkennt man an groß-geschriebenen HTML-Tags, Tabellenlayout und/oder DIV-Suppe. Und in vielen Fällen werden Layout-Informationen direkt im HTML-Text geschrieben. Das würde man heute nicht mehr machen, aber zu der Zeit als diese Webseiten gebaut wurden, war die Entwicklung noch nicht so weit.

Aber dann gibt es noch Webseiten, bei denen man sieht, dass der Ersteller ein paar moderne Ideen hat, aber leider die ganze Idee dahinter nicht so recht begriffen hat. Ein Beispiel dafür ist die neue Webseite der Filmtournee unterwegs.

Der erste optische Eindruck ist wunderbar. Die frischen Farben gefallen und die Elemente (Navigation, Header, Footer, Inhalt) sind gut aufgeteilt. Der zweite Blick ist dagegen schon kritischer: Die Linkfarben sind nicht konsequent umgesetzt. Der User wird unnötigerweise verwirrt, wenn das helle grün als Linkfarbe genutzt wird, sowie als Farbe für Überschriften (ohne Link). Vor allem, wenn es dann noch Links gibt, die nicht in grüner Farbe sind. Mehr noch: Sie sind z.T. gar nicht ausgezeichnet, so dass man z.B. auf der Kontaktseite oder der Impressum-Seite gelegentlich einen Link findet, den man gar nicht erwartet hat.

Wohin der Link führt, wird uns aber auch nur selten verraten, denn -aus welchen Gründen auch immer- man hat sich entschlossen folgende geheimnisvolle Konstruktion für einen Link zu verwenden:

<span onclick="javascript:window.open('http://www.infomedia-sh.de/medien/filmwerkstatt-sh.html','','');" class="blank_link">Filmwerkstatt Kiel der Filmförderung<br>Hamburg Schleswig-Holstein GmbH FFHSH</span>

Warum hier nicht einfach ein ganz normaler Link benutzt wird, ist mir ein Rätsel. Stellt man in seinem Browser Javascript ab, so werden alle Links, die in dieser Art gebaut wurden plötzlich unbenutzbar.

Aber es geht noch schlimmer: Die gesamte Navigation läuft per iFrame ab. Klickt man auf einen „Link“ in der Navigation, so wird der iFrame mit einer anderen Seite versehen. Das heißt die gesamte Navigation ist tot, wenn man Javascript deaktiviert. Kein Fallback. Auch die Statuszeile gibt keine Infos über das Linkziel, wenn er auf diese merkwürdige Art gebaut wird. Und die schlimmste Sache: Durch die iFrame-Lösung gibt es nur eine Seite: die index.php. Ein Lesezeichen für einzelne Seiten zu setzen ist so nicht möglich. Das war vor 10 Jahren bei den Frames auch schon so. Inzwischen weiß aber man aber, wie wichtig es ist, dass Direktlinks auf Unterseiten möglich sind. Nicht nur für Suchmaschinen, sondern auch für den User sind „sprechende URLs“ und klar strukturierte Adressen hilfreich.

Neben solchen Problemen wirken Nervigkeiten, wie das animierte GIF, das als Favicon benutzt wird oder die Navigationsbuttons, die nicht über die gesamte Fläche anklickbar sind geradezu harmlos. Warum ein Scrollbalken erscheint, wenn ich mich mit der Maus rechts unten auf der Homepage befinde, habe ich noch gar nicht herausgefunden. Wahrscheinlich will ich es auch lieber gar nicht wissen.

Die weniger offensichtlichen Fehler offenbart ein weiterer Blick in den Quelltext. Die Meta Tags sind konsequent gar nicht gesetzt. Suchmaschinen erfahren hier also keine weiteren Informationen über den Ersteller oder den Inhalt der Webseite. Auch über eine XML-Sitemap erfahren die Suchmaschinen hier nichts.

Obwohl als Sprache XHTML benutzt wird, fehlen diverse „trailing slashes“ bei Befehlen ohne schließenden HTML-Tag und es werden schon lange als „deprecated“ (wird in Zukunft abgeschafft) eingestufte Elemente genutzt, wie der „Center“-Tag oder die Attribute „language“ beim Script-Tag und „border“ beim IMG-Tag. Im Formular wird beim action-Attribut „POST“ groß geschrieben obwohl es bei XHTML klein geschrieben werden müsste. Statt strong und em wird dementsprechend auch b und i benutzt. Daran, dass im Header „Englisch“ als Sprache definiert ist, merkt man, dass hier wohl generell wenig Sorgfalt stattfand und garantiert keine Endkontrolle. Auch die Skripte sind z.T. fehlerhaft eingebaut. Zwischen schließendem Body und schließendem html-Tag gehört kein Skript. Bei keinem einzigen Skript ist ein Fallback (z.B. per NoScript-Befehl) eingebaut.

Die Tatsache, dass es sich um ein Tabellenlayout handelt und eine Tastaturnavigation nicht möglich ist, da nicht alle Elemente mit der Tastatur erreicht werden ist da nur konsequent. Eine semantische Struktur über Headlines (h1-h6) wird nicht gebaut. Ein Druck-Stylesheet für die optimierte Druckausgabe der Webseite fehlt. Eine individuelle Fehlerseite ist auch nicht zu finden.

Aus welcher Zeit das Wissen des Ersteller stammt erkennt man an den Netscape-Farbangaben „darkorange“ und „papayawhip“, die anstatt der Hex-Werte als Namen notiert sind.

Die hohe Kunst der Performance-Optimierung hat hier natürlich auch nicht stattgefunden, so dass alle Seiten, Skripte und Stylesheets unkomprimiert ausgeliefert werden. Kein GZip.

Einfache MouseOver-Effekte werden per Javascript gebaut, obwohl sie per CSS einfacher, barrierefreier und browserübergreifender hätten realisiert werden können.

Es finden sich Layout-Angaben im HTML-Code und machen so die Wartung und den Code unnötig kompliziert (Spaghetti-Code).

Da die Webseite sowohl mit www als auch ohne aufgerufen werden kann und keine Umleitung stattfindet, besteht zudem noch das Duplicate Content-Problem. Eine gute Position bei Google ist nur aufgrund des wenig benutzten Namens denkbar, wenn man bedenkt wie viele Fehler hier gemacht wurden.

Fazit: Außen hui, innen pfui! Eine schöne Optik macht noch keine gute Webseite. Hier müsste definitiv nachgebessert werden.

Autor: Torsten

Webworker, Moderator im deutschen WordPress.com Supportforum und lebendiges Videoformate-Lexikon.

Schreibe einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s