Wahlkampf 2.0

Barak Obama hat es vorgemacht, im Superwahljahr versuchen die deutschen Parteien nach zu ziehen: Wähler werben übers Web. Gestern las ich auf tagesschau.de, dass die beiden großen Volksparteien ihre Websites komplett überarbeitet hätten. Da spätestens in Zeiten des Wahlkampfes wirklich jeder Besucher wichtig sein dürfte, lohnt sich auch mal ein vergleichender Blick darauf, wer mehr aus seinen Seiten kitzelt hinsichltich Zugänglichkeit und Nutzerfreundlichkeit.

Die Voraussetzungen

Ich surfe (immer noch) mit Firefox 2 (incl. Firebug und Developer Toolbar) an einer 6000er DSL-Leitung und für den Test leerem Cache. Um auf die Startseiten zu gelangen, rate ich mal ins Blaue und tippe einfach cdu.de und spd.de in die Adresszeile.

Der erste Eindruck

Beide Seiten werfen einen bei direkter Eingabe der Adressen sofort weiter auf die neuen Startseiten der Portale: www.spd.de/start/portal/start.html bzw. www.cdu.de/portal2009/startpage.htm, offenbar befindet man sich noch in der Testphase. Auf beiden Seiten dominiert ein großes dynamisch-animiertes Inhaltsfenster, dass zum drin rum klicken einlädt und die Kernthemen in Form einer Präsentation zeigt. Drumherum reiht sich eine Vielzahl von aufwändigen Linkgrafiken deren Maus-drüber-Effekt bei der CDU zum Teil erstmal nachgeladen werden muss.
Stichwort Laden: die Sozialdemokraten haben mit knapp 70 requests und rund 700kB schon kein Leichtgewicht, wenn man bedenkt, das Breitbandanschlüsse längst nicht jedem Wähler vergönnt sind. Bei den Christdemokraten toppt man das allerdings locker mit knapp 1.5mB plus der 1.2mB die für eine Grafik mit dem Namen bandwidthcheck.jpg draufgehen. (Kann mir das einer erklären?)

Die Technik

Grundlage für eine Benutzerfreundliche Seite ist eine wenigstens syntaktisch korrekte Nutzung von HTML. Der W3C-Validator bescheinigt der SPD ein fehlerfreies HTML 4.01 transitional Dokument bei der CDU bemängelt er immerhin 6 Fehler die nicht sein müssten.

Bei dem dynamischen Präsentationsfenstern setzt man bei der SPD auf AJAX wobei die einzelnen Folien automatisch mit einem Fade-Effekt wechseln. Die Texte über den Bildern sind als HTML-Texte vorhanden, also skalierbar, und eine alternative barrierefreie Ansicht, die auch manuell gewählt werden, bekommt man bei deaktiviertem Javascript automatisch zu sehen.

Bei der Partei unserer Kanzlerin setzt man auf Flash um Videos und Bilder einen dynamischen Hauch zu geben. Die Texte sind nicht skalierbar, dazu sehr klein und teilweise nahezu unleserlich (weiße Schrift auf beigem Hintergrund). Bei deaktiviertem JavaScript bekommt man nur auf einem Bild(!) zu lesen, dass man doch bitte JavaScript aktivieren solle.

Die BITV fordert u.a. für jedes Nicht-Text-Element einen äquivalenten Text bereit zu stellen. Allerdings nur für die Behörden der Bundesverwaltung. Da man aber Wähler erreichen will, könnte man sich doch als Partei wenigstens in groben Zügen daran halten, oder?

Die Struktur

Schaut man sich die Seiten mal ohne CSS an (wer macht sowas schon), wird die klare und semantisch korrekte Struktur der Seite der Sozialdemokraten sichtbar. Ein zwar sehr großes, aber übersichtlich gegliedertes Menü (das man in der Standardansicht auch erstmal einblenden muss) weist ohne große Verwirrung zu den einzelnen Themengebieten der recht umfangreichen Seite. Eine Breadcrump-Navigation zeigt sehr übersichtlich, wo man sich gerade befindet. Technisch gesehen könnte man diese allerdings auch in eine Liste packen.

Beim Koalitionspartner sieht es hingegen nicht so toll aus. Eine klare Struktur sucht man dort vergeblich. Die Navigationsleiste am oberen Rand verwirrt auf den ersten Blick, da sie an eine typische Breadcrump-Navigation erinnert die durch Pfeildarstellungen wie ">" getrennt ist. Die meisten Links führen weg vom Kampagnenportal hin zur klassischen Seite der Christdemokraten. Das baukastenartig verwendete HTML spricht auch nicht gerade für sich. Allgemein wirkt das Portal der CDU auf mich noch recht unfertig.

Die Optik

Kann jeder selbst beurteilen. Bitteschön:

Das Fazit

Beide Seiten wirken auf den ersten Blick wie ein Portal wie man es aus dem Web 2.0 her kennt. Viele Bilder und Grafiken, viel zum anklicken und viele Kästchen und Buttons die eigentlich Links sind. Das war auch das Ziel. Beim zweiten Blick sieht man was eigentlich dahinter steckt. Bei der SPD hat man sich richtig Gedanken gemacht, um dem kompletten Internetauftritt der Partei eine klare Struktur und ein einheitliches Design mit interaktiven, modernen Technischen Elementen zu versehen und gleichzeitig auf Barrierefreiheit zu achten. Aus meiner sicht ist dies auch Vorbildhaft gelungen. Das Kampagnenportal der CDU wirkt unfertig und ich vermute, hier kommt noch was. Nachbesserungsbedarf ist zumindest vorhanden. Dabei darf man sich ruhig mal beim noch-Koalitionspartner was abschauen.

Kommentare

  1. 01) 17.04.2009
    [asterix]

    Bin ganz deiner Meinung. Die Seite der SPD ist aus der Sicht der Barrierefreiheit sicher besser. Besonders gefällt mir die Präsentation in der Mitte in welcher die Texte mit HTML ausgezeichnet werden. Gefällt mir. :-) Wir hier in der Schweiz können mit unseren Auftritten(SVP: http://www.svp.ch und SP: http://www.spschweiz.ch) längst nicht mehr mithalten – schade.

    Bei beiden Parteien werden die Formulare nicht mit Labels "angeschrieben". Das sollte man meines Erachtens auch ansprechen.

    Interessanter Artikel!

  2. 02) 17.04.2009
    David

    Danke. Mir persönlich gefällt die SPD-Seite auch richtig gut. Dabei fallen mir mal wieder die Diskusionen ein, wie sie z.B. auf Xing geführt werden, ob eine Website heutzutage noch ohne JavaScript funktionieren muss oder nicht. AJAX ist ein tolles Mittel um die ganze Sache aufzuhübschen. Wenn ein Semantisches HTML-Dokument als Grundlage dient, sollte also ein Fallback kein Problem sein.

Fragen, Ideen oder Kritik? – Hier ist Platz dafür!

Dein Kommentar

Um ein Kommentar abzugeben, reicht der Text im Kommentarfeld. Die Angabe eines Namens wäre nett, ist aber nicht erforderlich.

Du darfst folgenden HTML-Code verwenden, musst aber nicht:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>