gesurft mit Webstandards: Financial Times Deutschland

von timo / 16. November 2005 /

Financial Times Deutschland Stilvolles Design muss man bei einer Wirtschaftszeitung nicht unbedingt erwarten. So kann ich der FTD (www.ftd.de) den übermäßigen Einsatz von nicht zueinander passenden Schatteneffekten verzeihen. Doch wenn man dort nicht richtig zählen kann, mache ich mir schon meine Gedanken.

Layout & Lesbarkeit

Das Design sucht die Anlehnung an das Printprodukt, schafft dies aber nur bedingt: In den Promoboxen wird teilweise unsauber freigestellt. Die unterschiedlichen Schatteneffekte wirken fast ungewollt trashig. Printverhaftet versucht die Financial Times Deutschland im Web alle Abstände und Größen zu kontrollieren: Das Layout ist nicht skalierbar und für eine Bildschirmauflösung von 800×600 optimiert. Selbst die Schrift ist pixelgenau definiert. Das heißt für alle Internet Explorer-Nutzer, dass sie die Schrift nicht größer stellen können. Bei der Schriftskalierung hätte die FTD ruhig lesefreundlicher sein können, denn das Layout verträgt – unter Firefox – locker eine zweifache Schrift-Vergrößerung.

Die Startseite der Finacial Times Deutschland Der Inhaltebereich der Startseite ist nach dem Tortenprinzip schichtweise aufgebaut. Jede Schicht besteht aus zwei Aufmachern (mit Bild und Vorspann) links und einer Randspalte rechts, in der drei weitere Meldungen stehen. Ganz oben wird das Wichtigste aus allen Ressorts gebündelt. Danach folgt streng pro Hauptressort eine Schicht. Dieser Aufbau wirkt klar und aufgeräumt, besonders durch seine Luftigkeit. Die Struktur wird – wie bei andere Online-Zeitungen üblich – durch kleinteilige Teaserangebote oder Werbebanner durchbrochen. Einziges Problem: Die fehlende Gewichtung. Durch die beiden gleichgroßen Aufmacher pro Ressort und die unzähligen Meldungen in der Randspalte, springen die Augen haltlos zwischen den konkurrierenden Informationen hin und her.

Markup

Verschachtelte Divs auf der Artikelseite der FTD Auf der Startseite kommen 18 Überschriften erster Ebene vor <h1>. Jetzt könnte man beschwichtigend meinen, in der deutschen Wirtschaft ist vieles wichtig, doch alle Überschriften in der Hauptspalte mit einer h1 auszuzeichnen, zeugt von Beliebigkeit und führt – ebenso wie die fehlende visuelle Gewichtung – den Leser nicht schnell und effektiv zu den wichtigsten Nachrichten. h2-Elemente fehlen auf der Startseite gänzlich. In der Überschriften-Hierarchie geht es mit <h3> weiter. Will hier jemand sein Google-Ranking pushen? Ist das ein schmutziger Trick oder nur Nachlässigkeit? Nicht so schlimm, denn wirklich schmutzig wird es erst beim Rest des Markups: Fette Inline-Javascripte, Inline-Styles, verstreute Layout-Tabellchen für Promokästen (”Köpfe des Tages”) und Daten-Tabellen ohne summary- und header-Attibute. Fünffach verschachtelte div-Elemente erinnern an schlechte Bauweisen aus alten Tabellen-Tagen. Accessibility-Mindeststandards wie Alt-Texte bei den Bildern werden nicht eingehalten. Auf der Startseite ist das Alt-Attribut leer. Zum Ausgleich erhalten blinde Menschen auf der Artikelebene die doppelte Ladung Bildbeschreibung: Alt-Text und Bild-Unterzeile sind identisch.

Die auf der Startseite vermisste h2 taucht auf der Artikelseite als Zwischenüberschrift wieder auf. Puh, die FTD kann also doch zählen. Mit der strukturellen Gliederung und Gewichtung von Nachrichten scheint das sonst sehr meinungsstarke Wirtschaftsblatt allerdings Probleme zu haben. Weiteres Indiz für die h-Verwirrungen: Der komplette Vorspann des Artikels ist als <h3> markiert.

Stylesheet

Bei großen kommerziellen News-Sites, wo mehrere Entwickler zusammenarbeiten, ist es durchaus praktisch Stylesheets funktionsspezifisch aufzusplitten. Doch elf Stylesheets (darin sind die drei Extra-Stylesheets für Internet Explorer noch nicht eingerechnet) machen die Sache nicht unbedingt übersichtlicher – im Gegenteil. Dass die Entwickler vor dem Launch tatsächlich nicht mehr mit der Wartung ihrer CSS-Dateien hinterherkamen, zeigen Kommentare wie:

/* !!! Ich habe die Inhalte dieser Datei aber bereits der
navigation.css hinzugefügt
bzw. das bestehende CSS für die Navi ersetzt !!! */

Vielleicht hätte mal einer – den Nutzern zuliebe – aufräumen können. Auch gut gemeinte, lehrreiche Entwickler-Kommentare wie die folgenden, verzögern die Ladezeit der Seite unnötig.

/* Ein weiterer Kommentar, diesmal mit einem normale End-Marker.
Der Explorer nimmt jetzt an, dass hier das Ende des vorherigen
Kommentars ist. */
/* Ab hier wieder einheitlich */
/* Achtung, die Ausrichtung mittels Align-Attributen ist
sehr Tricky und wird sehr unterschiedlich von den Browsern
interpretiert. Ansonsten hilft nur noch ein Tabelle. */

Navigation

Bei der Financial Times ist alles über die Navigationsleiste in der linken Randspalte zu erreichen. Das ist trotz vieler Rubriken durch eine sinnvolle Gruppierung übersichtlich gelöst. Durch das Flyout-Menü erhält man schnell Einblick in die einzelnen Ressorts. Befindet man sich in einem Unterressort wird das Flyout durch ein klassisch eingerücktes Untermenü ersetzt. Der Standort ist durch einen weißen Hintergrund klar markiert. So wird den Usability-Problemen von Flyouts effizient entgegengewirkt. Doch, halt. Noch keine Eins Plus für die Navigation. Wieso gibt es die Navigation doppelt? Die bereichsspezifische Ressort-Navigation wird mit karteireiterartigen Links am Kopf der Seite noch einmal wiederholt. Doppelt hält hier nicht wirklich besser, sondern verwirrt.

Hat man sich nun endlich entschieden, ob man oben oder links klicken soll, um in ein Unterressort zu gelangen, gehen die Wirrungen weiter. Man landet nicht etwa auf einer klassischen Ressortübersicht mit Anreißern, sondern auf der Artikelansicht des Top-Artikels des Ressorts. Laut URL ist man tatsächlich auf der Ressortübersicht. Das ist äußerst blöd, da man den Haupt-Artikel so nicht bookmarken oder per Mail verschicken kann. Einen Link zu einer permanenten URL gibt es nicht.

Plattformunabhängigkeit

Daten & Fakten

Doctype: HTML 4.01
Errors/ Warnings: 0/ 126
Größe HTML: 78 KB
Größe CSS: 86 KB
Relaunch: Juni 2005
Agentur: hanke multimediahaus AG

Barrierefreiheit ist bei der Financial Times nicht das Top Thema. Einzig die Skip-Navigation macht es blinden Menschen etwas leichter (motorisch eingeschränkten Menschen jedoch nicht – der Link wird nicht per Tab-Taste sichtbar). Schön: Die Flyout-Navigation ist barrierefrei. Ansonsten gibt es nur das übliche Maß an Erleichterungen, die ein tabellenloses Design automatisch mit sich bringt. Doch selbst diese nützen wenig, da es an anderer Stelle Hürden gibt, die den Zugang zu den Inhalten schwer machen, wie vereinzelte Layout-Tabellen, gedoppelte Linktexte und fehlende Alt-Attribute. Usability-Erleichterungen durch spezielle Erklärungen für Screenreader oder Accesskeys für Tastursurfer gibt es nicht.

Druckt man einen Artikel aus, werden über ein Print-Stylesheet unnötige Seitenelemente wie die Navigation vorbildlich ausgeblendet. Warum aber nicht die Links “Ihre Meinung interessiert uns” und “Richtlinien für Leser-Kommentare”? Die URLs der themenverwandten Links werden leider nicht mit ausgedruckt.

Aufbau & Ladezeit

Schneller als vor dem Relaunch lädt die FTD schon. Doch das Potenzial einer barrierefreien Website nach modernen Webstandards bleibt fast ungenutzt. Die Stylesheets mit insgesamt 86 KB und vor allem die nicht gecachten Javascripte und Inline-Stylesheets machen die FTD zäh.

Fazit

Der FTD gebürt viel Lob, da sie als erste deutsche Tageszeitung auf Webstandards setzt. Doch wurden viele Dinge nicht zu Ende gedacht. Der chaotische Code, die ausufernden Stylesheets und die Missachtung von grundlegenden Accessibility-Richtlinien machen die FTD nicht gerade zu einem Vorzeige-Beispiel.

V-Power: 1 von 5