Zum Saisonstart haben sich die Webkrauts den Internetauftritten aller 36 Bundesliga­vereine gewidmet und und sie auf moderne Webstandards getestet.

Nun liegt die Abschlusstabelle vor, die die Stärken und Schwächen aller 36 Seiten aufzeigt.

Zum Saisonstart widmen sich die Webkrauts den Internetauftritten aller 36 Bundesliga­vereine und testen sie auf moderne Webstandards. Erst am letzten Spieltag entscheidet sich der Kampf um die Webkrauts-Meisterschale: Der FSV Mainz ’05 siegt nahezu unangefochten.

FSV Mainz ’05

Auch der Webseite des Mainzer Karnevalsvereins ist eine Seite vorgeschaltet. Sie gibt in einem aufwändigen Flash-Intro einige Eindrücke von der Stimmung am Bruchweg mit, wobei der Ton unvermittelt einsetzt, was ja eine Todsünde ist. Hinzu kommt eine Information zum nächsten Spiel und Links zum Ticketshop, dem Hauptsponsor und zur Hauptseite.

Dort gibt es allerhand zu entdecken. Neben einem großen, auf JavaScript basierendem, Top-News-Bild gibt es Informationen zum nächsten und zum letzten Spiel sowie das Portrait eines Spielers. Überhaupt ist die Seite sehr reduziert und nicht so informationsüberladen, wie man das von manch anderer Seite im Test behaupten kann – das gefällt.

Ein Blick unter die Haube zeigt dann, dass Könner am Werk waren: Semantischer Quelltext ohne Tabellen und JavaScript, welches (bis auf die Werbung) unaufdringlich eingebaut wurde. Mit 10 Validierungsfehlern spielt der FSV Mainz ’05 auf ganz hohem Niveau mit. Etwas verwirrend ist, dass die Navigation – obwohl optisch oben – per Tastatur nach dem Haupttext der Seite angesprungen wird. Versteckte Sprunglinks machen es aber möglich direkt zur Navigation zu springen.

Doch es ist nicht alles championsleaguereif bei den Mainzern: Die graue Schrift ist zu klein und hat zu wenig Kontrast, dafür kann sie ganz gut vergrößert werden. Leider sind die Haupt- und die Seitennavigation nicht vergrößerbar, da sie aus Bildern bestehen. Das ist schade und trübt den ansonsten hervorragenden Gesamteindruck.

Hinweis: An der Erstellung der Webseite von Mainz ’05 waren Mitglieder der Webkrauts beteiligt.

Kommentator: Eric Eggert

Alemannia Aachen

Die Webseite von Alemannia Aachen ist stimmig und auffällig in den Vereinsfarben schwarz und gelb gehalten. Sie ist sehr informationsreich, allerdings konnten sich die Verantwortlichen leider nicht für die wichtigsten Informationen für die Startseite entscheiden, sie fanden wohl alles wichtig. Das führt zu einem Gesamtgewicht der Startseite von einem guten halben Megabyte. Für Modemnutzer ist dies ein Graus, aber selbst mit DSL wartet man recht lange.

Basis der Seite ist ein Tabellenlayout. Auch ein detaillierter Blick auf den Code zeigt keine modernen Ansätze der Webentwicklung. Wir finden massenweise Inline-JavaScripts, einige Elemente sind nicht richtig geschlossen. Die wenigsten Bilder haben ein alt-Attribut und ohne Bilder ist die obere Navigation nicht bedienbar. Auch semantisch ist diese Seite ein voller Reinfall: Auf der Startseite befindet sich keine einzige Überschrift. Optisch auszumachende Überschriften sind einfach nur Links in größerer Schrift. Und auch in den Tiefen des Auftritts befinden sich maximal eine Überschrift, sozusagen als Seitentitel.

Weitere Semantik fehlt komplett. Absätze sind im wesentlichen unbekannt, werden aber im Einzelfall schonmal statt einer Liste genutzt. Dafür gibt es für die betreuende Agentur eindeutig die rote Karte und die Profilizenz wird entzogen. Die Navigation ist ohne JavaScript nutzbar, die untere Navigation ist dank des schwachen Kontrasts fast versteckt. Optische und konzeptionelle Patzer addieren sich bei Alemannia Aachen zu miserablem Code. Das reicht eigentlich nur für den Amateurstatus.

Kommentator: Jens Grochtdreis

FC Augsburg

Auf geht’s zum Anpfiff des FC Augsburg – wobei „Anpfiff“ durchaus im Sinne einer Schimpftirade verstanden werden kann. Was hier an Webauftritt abgeliefert wird, verursacht einem Verfechter standardkonformer Webauftritte schon einige Magenschmerzen.

Schon die vorgeschaltete Seite lässt nichts Gutes erahnen, bewirkt ein Abschalten des Stylesheets doch gerade einmal, dass ein (!) einziger Link auf der Seite seine Unterstreichung verliert. Das komplette Design der Seite wirkt etwas angestaubt und entsprechend präsentiert sich dann auch der Quelltext der folgenden Seiten im Retro-Stil: Wild wurden div-Container mit tief verschachtelten Tabellen gemischt und von margins haben die Entwickler auch anscheinend noch nie etwas gehört – Einrückungen werden konsequent durch nichtumbrechende Leerzeichen realisiert. Abwechslungsreich geht es bei der Verwendung von Elementen zu: Hier finden sich gleichberechtigt <b>- und <strong>-Elemente, und auch lange nicht mehr gesehene <font>-Konstrukte haben hier eines der letzten Biotope gefunden.

Halbzeit! Noch von den Fouls im Markup erschüttert widme ich mich einer genaueren Betrachtung der Usability. Und zumindest hier kann der FC Augsburg einigen verlorenen Boden wieder gutmachen: Das Menü präsentiert sich aufgeräumt und erwartungsgemäß auf der linken Seite. Ein Breadcrumb-Pfad über den eigentlichen Inhalten zeigt jederzeit den aktuellen Aufenthaltsort des Besuchers an – gut gemacht! Lediglich die „Quicklinks“ hängen etwas uninspiriert auf der rechten Seite herum und ändern von Seite zu Seite ihre Position.

Da ertönt auch schon der Schlusspfiff! Endergebnis der W3C-Validierung nach 90 Spielminuten: 54 zu 0 bereits auf der Startseite.

Kommentator: Andreas Demmer

VfL Osnabrück

Die Webseite des Osnabrücker Zweitliga-Aufsteigers bietet einen zweigespaltenen Eindruck. Hervorgerufen wird dieser von der vorgeschalteten Startseite, die zwar optisch recht nett daherkommt, jedoch herzlich wenig Informationen bietet. Ein passender Klick bringt den Besucher dann aber auf die eigentliche Hauptseite, die mit einer übersichtlichen Navigation oben und am linken Rand und einem zentrierten Nachrichtenbereich Informationen zum Verein bietet. Der rechte Rand der Seite ist Werbekunden und Sponsoren vorbehalten.

Im Hinblick auf die Einhaltung von Webstandards ist die Seite des VfL leider eine Katastrophe. Semantik in der Auszeichnung ist nicht zu erkennen, die Seiten validieren nicht, Navigation per Tastatur ist gar nicht oder nur sehr eingeschränkt möglich und alt-Attribute für Bilder konnte ich überhaupt keine entdecken. Die Standardschriftgröße wurde mit 8 Punkt (!) angegeben; eine Einheit, die in Bildschirmausgaben definitiv nichts zu suchen hat.

Der Inhalt findet sich in einem tief verschachtelten Tabellenverschlag, wobei manche Tabellen in der einzigen enthaltenen Zelle nur ein Bild enthalten und somit auch weniger dem Layout als eher dem Selbstzweck dienen. Vergrößert man die voreingestellte Schriftgröße in Maßen, bleibt die Seite navigier- und lesbar. JavaScript wird nur sehr sparsam eingesetzt und dient eher der Steuerung der zahlreichen Werbeelemente. Die Bedienung der Seite leidet nicht, wenn man JavaScript deaktiviert hat. Positiv zu erwähnen ist, dass man vom VfL nicht mit Popups genervt wird. Von der Nichteinhaltung der Webstandards abgesehen, bleibt ein positiver Eindruck. Aus Sicht eines Webkrauts lautet das Urteil jedoch: „höchst verbesserungswürdig“.

Kommentator: Stefan David

Zum Saisonstart widmen sich die Webkrauts den Internetauftritten aller 36 Bundesliga­vereine und testen sie auf moderne Webstandards. Saisonabschluss bei den Webkrauts mit dem HSV, Nürnberg, Bochum und Wolfsburg.

Hamburger SV

Pünktlich zum Saisonbeginn präsentiert sich der Hamburger Sportverein in neuem Outfit, technischer Coach ist nun Typo3. Das Layout ist bis auf das Laufband gelungen, doch ansonsten läuft es nicht so rund. Die Hamburger kassieren schon vor dem Einlauf ins Stadion die ersten roten Karten: der „Weiter“-Button, die „mehr hier“-Grafiken und das „HSH Nordbank Arena“-Logo allesamt ohne Alternativtext, damit für die Navigation und die nächste Runde disqualifiziert.

Die Hanseaten suchen den Angriff: während der Validator für die Vorschaltseite noch 92 Fehler einstecken musste, geht er im unsportlichen Kampf mit der Hauptseite durch rekordverdächtige 530 Fouls fast zu Boden, während den Besuchern ein unnötiges Popup-Fenster präsentiert wird.

Mangelhaftes Kombinationsspiel auch bezüglich der Semantik: Navigationslisten und <h3> reichen offensichtlich, zusätzliche Impulse erhofft man sich durch Einsatz von 1-Pixel-GIFs und <br>-Elemente der Uwe-Seeler-Ära.

Der HSV-Besucher muss bei der Hauptnavigation mitdenken: Nur wer CSS abschaltet, kommt auch ohne JavaScript weiter. Das Navigieren mit der Tastatur ist bei aktiviertem JavaScript möglich, auf dunkelblauem Grund hätte man sich allerdings eine a:focus-Deklaration ebenso sehr gewünscht wie Alternativtexte für die interessanten Fotos. Die Navigationsstruktur ist zwar stringent und nachvollziehbar, doch die durch JavaScript generierte Minimalschrift und zu kleine Klickflächen sind alles andere als benutzerfreundlich.

Die Orientierung innerhalb des Zwei-Spalten-Layouts ist gut gelöst, das professionelle Design und eine unaufdringliche Flash-Animation bestimmen die angenehme Optik. Die Schriftgröße ist trotz ausreichender Kontraste etwas zu klein geraten, dafür ist eine Schriftvergrößerung in mehreren Stufen möglich. Ein Link zum Seitenanfang hätte der Funktionalität gut getan, vorbildlich dagegen die generierte Druckversion: man spart Verbrauchsmaterial und bekommt die wichtigen Inhalte.

Kommentator: Nils Pooker

1. FC Nürnberg

Laute Musik ist das erste, was einem von der Webseite des 1. FC Nürnberg in Erinnerung bleibt. Die Vorschaltseite, auf der diese Musik zu hören ist komplett flashbasiert, bietet aber auch ohne JavaScript und/oder Flash ihre Inhalte an, inklusive eines Links zur wirklichen Startseite.

Direkt zu Beginn der Seite werden über 600 Zeilen JavaScript geladen. Es folgen knapp 50 Zeilen mit versteckten divs, die die Subnavigation darstellen sollen und in die lieblos Links hintereinander hineingeschrieben sind. Erst dann folgt die obligatorische Layouttabelle mit der Hauptnavigation. Dass es hierfür mittlerweile so etwas wie „Listen“ gibt, hat sich derweil noch nicht bis nach Nürnberg herumgesprochen.

Die Navigation ist besonders clever umgesetzt, reagiert sie doch nur auf Mausberührung. Wer auf die Benutzung einer Seite per Tastatur angewiesen ist, schaut in die Röhre und kann die Unterpunkte der Menüs nicht erreichen. Auch auf den Seiten zu denen die Hauptmenüpunkte führen, findet sich keine Möglichkeit diese Unterpunkte aufzurufen.

Die Schriftgröße ist in Ordnung, bietet aber keine Möglichkeit der Vergrößerung. Einen weiteren groben Fehler aus Zugänglichkeitssicht hat man sich bei der Verwendung von Alternativtexten erlaubt: Statt sinnvolle Inhalte wird das alt-Attribut zwar angegeben, aber leer gelassen. Das bedeutet, dass ein Screenreadernutzer noch nicht einmal den Dateinamen eines Bildes vorgelesen bekommt. Alle Links der linken Spalte bleiben ihm dadurch ebenfalls unzugänglich.

Kommentator: Eric Eggert

VfL Bochum

Der nähere Blick auf das blau-weiß strahlende (Web-)Stadion des VfL Bochum 1848 stellt selbst den größten Fan auf eine harte Probe. Ein überaus vertracktes Frameset (von 1848?) hilft kurzfristig beim Vertuschen der vielen Fouls, die dem Schiedsrichter des W3C allerdings nicht verborgen bleiben, der eine gelbe Karte nach der anderen zückt. Die Mannschaftsteile <hx> und <li> sucht man beispielsweise vergebens auf dem Rasen. Dafür gibt es Rot – ohne Diskussion!

Ziemlich unelegant humpeln verschachtelte Layouttabellen über den Platz, die nicht nur semantisch total fehlbesetzt sind, sondern in dieser geballten Form ein grandiose Aufblähung des Quelltexts zur Folge haben und für einen unübersichtlichen Code-Salat sorgen. Beim VfL muss nochmals ganz neu aufgestellt werden.

Ist man als Zuschauer auf Sehhilfen angewiesen, bekommt man schnell ein Problem: Bei einer Schriftvergrößerung verschwinden Teile der Hauptnavigation unter dem Inhaltsbereich. Man kann dann eigentlich direkt das Stadion verlassen: hier geht gar nichts mehr. Eine sinnvolle Navigation per Tastatur ist in Bochum auch nicht vorgesehen und die alt-Attribute sucht der darauf angewiesene Besucher vergebens.

Man trifft sich ja bekanntlich immer zweimal im Leben: den VfL mit Sicherheit beim nächsten Mal nur noch in der Bezirksliga wenn nicht ganz schnell alle Spieler ordentlich angezogen auf ihren Plätzen stehen (und kicken) .

Kommentator: Maxx Hilberer

VfL Wolfsburg

Der Bundesligist VfL Wolfsburg begrüßt seine Online-Besucher mit einer vorgeschalteten Startseite, die jedoch wenigstens sinnvolle Direkteinstiege in verschiedene Bereiche der Website anbietet. Unterdrückt man die Anzeige von Grafiken, bleibt auf der ganzen Seite aber nur eine Abfolge von Sponsorennamen übrig. Der Start in den Webauftritt geht dann genauso daneben wie der Saisonstart der Wölfe.

Auf der eigentlichen Seite begrüßt uns eine klar unterteilte Struktur im typischen Grün der Wolfsburger mit übersichtlicher Navigation aber aufdringlicher Werbung. Ohne Grafiken verliert die Seite ihre Hauptnavigation. Die einzigen alt-Attribute werden für Grafiken mit dem Namen „Trenner“ vergeben; als würde man statt der Mannschaftsaufstellung die Namen der Balljungen durchsagen. Auch sonst wurde Semantik scheinbar bei der ausführenden Agentur nicht ausreichend trainiert; die meisten Versuche landen im Abseits. Für mehr als Überschriften der dritten Ebene hat es kaum gereicht.

Die Standard-Schriftgröße wird mit viel zu kleinen 62,5 Prozent vorgegeben, um dann die Texte im Inhalt wieder auf das 1,2-fache zu vergrößern. Bei Schriftvergrößerung durch den Benutzer bleibt die Seite jedoch nahezu ohne Einschränkungen benutzbar.

Bei ausgeschaltetem JavaScript gibt es kaum Einschränkungen, bis auf einige Gimmicks konnte ich keinen Spielerausfall feststellen. Der Quelltext ist zwar nicht valide, aber die Fehler sind mit wenig Aufwand abzustellen; es handelt sich weniger um Stockfehler als um kleine Unaufmerksamkeiten – aber auch so werden Spiele entschieden.

Dass sich Wolfsburg mit dieser Seite vermutlich in der oberen Hälfte der Webkrauts-Tabelle finden wird, ist kein Zeichen der spielerischen Qualität sondern eher das Versagen der Gegner. Kein Grund zum Feiern!

Kommentator: Stefan David

Zum Saisonstart widmen sich die Webkrauts den Internetauftritten aller 36 Bundesliga­vereine und testen sie auf moderne Webstandards. Heute sind drei Vereine aus dem Südwesten der Republik dran.

1. FC Kaiserslautern

Der 1. FC Kaiserslautern hat als einziger Verein eine reine Flash-Seite. Nachdem man sich auf der Vorschaltseite dafür entschieden hat nun tatsächlich fck.de und nicht fck-dauerkarten.de aufzusuchen, bekommt man einen Ladebalken vorgesetzt und darf sich dann ein Intro anschauen. Als "Das Herz der Pfalz" bezeichnet sich der FCK darin, durch einen Klick auf den beliebten Text "Skip Intro" kann man dem Filmchen aber entfliehen.

Sich über den HTML-Code herzumachen hat keinen Sinn, er besteht quasi nur aus JavaScript, das dazu gedacht ist, den Flashfilm anzuzeigen. Entsprechend sind die Nachteile bei der Benutzung der Seite: Sobald das Seitenverhältnis der Seite nicht mehr stimmt, gibt es horizontale und vertikale Scrollleisten. Es gibt keine direkten Adressen um z.B. von außen auf News-Artikel zugreifen zu können und die Schriftgröße verändert sich mit der Größe des Browserfensters. Wenn man die Seite nicht im Vollbild anschaut, hat man kaum eine Chance, den Text zu erkennen. Er ist auch nicht vergrößerbar.

Die Navigation ist aufgeteilt. Unten befindet sich die Hauptnavigation in Form symbolisierter Fans. Die (animierten) Fanschatten müssen dann aufstehen um die Unterpunkte anzuzeigen, was natürlich ein wenig dauert. Oben befindet sich – nach einen Klick auf einen Hauptnavigationspunkt – die entsprechenden Unterkategorien sowie ein Vor-und-Zurück-Button, der die Browserfunktion ersetzt. Statt auf die Überschriften klicken zu können, muss man den Text „mehr“ auswählen, um Texte fertig zu lesen, was – genau wie das nicht funktionierende Scrollrad an der Maus – nicht den Gewohnheiten der Benutzer entspricht.

Kommentator: Eric Eggert

TuS Koblenz

Koblenz, erst seit kurzem mit der TuS in die zweite Liga aufgestiegen, versucht mit XHTML direkt den Steilpass in die Spitze zu spielen, allerdings mit viel zu wenig Druck und ohne technische Finesse. Die Intro-Seite soll zwischen Ticket-Verkauf und Shop aufteilen, ein lustiges Flash-Filmchen informiert über die anstehenden Spiele dieser Saison und darunter liegt eine „Enter“-Schaltfläche. Beim Klicken auf eben jenes „Enter“ nervt ein Pop-Up und verdeckt den Blick auf eine gruselig gestaltete Webseite. Das Design der Dauerkarten hat mehr Appeal.

Wer ohne Flash unterwegs ist, erfährt nur über die URL, auf welcher Seite er sich befindet. Ohne JavaScript bleiben einem wenigstens lästige Pop-Ups erspart, in denen ohnehin nicht viel zu sehen ist. Dafür funktioniert die altbackene Browserweiche dann nicht mehr;– die wäre bei moderner Umsetzung mit Webstandards ohnehin unnötig. Immerhin hat man einige Alternativtexte lose über die Seite verteilt, hält sich dafür aber nicht an W3C-Standards für XHTML und CSS. Stolze 237 Kilobyte wiegt die Seite, die meisten Bytes opfert man für schlecht komprimierte Grafiken. Geht es nach den Webstandards, steigt Koblenz mit verschachtelten Layout-Tabellen, nicht skalierbarer Schrift und mangelhafter Usability in die Bezirksliga ab.

Kommentator: Ansgar Hein

TSG Hoffenheim

Tradition gehört zu den wichtigsten Gütern im Fußball. Darum wird der Zweitligaaufsteiger 1899 Hoffenheim, das »Spielzeug« des »Kraichgau-Abramowitschs« und SAP-Chefs Dietmar Hopp, in Fan-Kreisen als traditionsloser Plastik-Klub betrachtet. Was aber nicht korrekt ist, denn diese pflegt eine ganz besondere Tradition: Nämlich die, auf der Startseite einen Newsticker als Java-Applet zu laden. Als das modern war, spielte Hoffenheim noch in der Verbandsliga…

Verbandsliga also. Der Validator findet alleine auf der Startseite (trotz des genügsamen HTML4.01 Transitional) 116 Fehler. Es werden Zeichen verwendet (Euro), die im gewählten Zeichensatz ISO-8859-1 gar nicht vorhanden sind. Das Layout besteht aus Tabellen und muss auch noch auf das gute alte Spacer.gif zurück greifen, um das ziemlich simple Layout in Form zu halten. Zu allem Überfluss stimmt die Verschachtelung der Elemente nicht, z.B. steht mitten im td ein einsames </div> und sieht von seinem öffnenden <div> noch weniger als die Hoffenheimer Abwehr bei der Auftaktniederlage gegen Wehen von den gegnerischen Eckbällen. Semantik ist abwesend, unter einer Überschrift versteht man in Hoffenheim span class="headline". Fazit: Aufbau und Semantik sind sehr »traditionell«, im Jahr 2007 aber Verbandsliganiveau.

Die Site ist in ihrem schlichten, aber akzeptablen Design (bis auf das undefinierbare blaue Etwas im Hintergrund) gut gegliedert, und man findet sich in der JavaScript-Klapp-Navigation schnell zurecht. Wenn man JavaScript und eine Maus benutzen kann. Ohne ist die Seite nicht mehr bedienbar.

Fazit: Der »Emporkömmling« Hoffenheim hat den Sprung in die Profiliga, was die Webseite angeht, noch vor sich. Und sie ist kein Ruhmesblatt für die ausführende Agentur…

Kommentator: Ralf Graf

Zum Saisonstart widmen sich die Webkrauts den Internetauftritten aller 36 Bundesliga­vereine und testen sie auf moderne Webstandards.

Der Begriff ›Traditionsverein‹ bedeutet in der Spielzeit 07/08 in der Regel, dass der graue Alltag in den Niederungen der zweiten Liga stattfindet. So auch bei unserer heutigen Paarung, dem 1. FC Köln und dem FC St. Pauli – beides Vereine mit, um es vorsichtig auszudrücken, sehr traditionellen Web-Auftritten.

Pauli gegen Köln – der Welt­pokal­sieger­besieger gegen den Karnevalsverein

Bereits beim Warmlaufen stolpert der Validator bei beiden über Fehler, die durchaus vermeidbar wären. Wie so oft sind es die Standard­situationen, in denen Eigen­tore wie uncodierte Ampersands, XHTML-Syntax in HTML und anders­herum, fehlende oder falsch geschlossene End-Tags, historisch überholtes wie <marquee> usw. fallen.

Bilder sind bei den Geißböcken fast durchgängig mit leeren alt-Attributen ausgezeichnet, lediglich einige besitzen einen sinn­vollen Alternativ­text. Dieser ist jedoch meistens redundant, da er im Text noch mal wieder­holt wird. In diesem Punkt gibt es auch für das Freuden­haus der Liga nicht nur vom Validator die gelb-rote Karte: einige Bilder haben vorbildliche Alternativ­texte, aber bei vielen fehlt das im Regel­buch vorgeschriebene alt-Attribut komplett. Mangels Alternativen würde ein Screen­reader hier spielfluß­behindernd "/pics/ligencontainer/logo278.gif" vorlesen.

Semantik? Retter gesucht!

Nicht nur das Stadion ist eine Baustelle, auch auf der Pauli-Website findet man zuhauf historische Versatz­stücke aus der Frühzeit der Webentwicklung. Sinnvolles Markup bleibt am Millern­tor, aber auch im Müngers­dorfer Stadion in der Umkleide­kabine. Insbesondere Pauli glänzt durch die nahezu vollständige Abwesen­heit von sinnvollen Struktur­elementen wie z. B. Überschriften. Dafür finden sich Berge von Spacer-GIFs und  , vereinzelte Layout-Tabellen im CSS-Gerüst und hart­verdrahtete Formatierungen. Der Rekord auf Pauli: ein fast 30 Kilo­byte großes Inline-Style Sheet im HTML-Code.

Der FC hat sich seit dem aktuellen Relaunch in diesem Bereich etwas besser aufgestellt: zumindest gibt es nun eine halb­wegs brauch­bare Überschriften­struktur. Dass aber die bisher zu Hauf vorhandenen FONT-Tags durch Inline-Styles ersetzt wurden ist keine wirkliche Verbesserung, sonder nur derselbe Murks mit anderen Mitteln. Mitteln, bei denen jeder einge­fleischte Standardista sein Fähnchen verbrennen würde.

4-4-2 mit Raute – die Navigation

Nicht viel zu meckern gibt es bei der Navigation von St. Pauli. Auch Ungeübte können sich in der klar gegliederten Struktur zurechtfinden, die keine besonderen Ansprüche an die Technik oder das Können der Nutzer stellt. Ganz anders bei der Macht am Rhein: Bei der vorherigen Version brauchte man ein ruhiges Händchen, Geduld und den unbedingten Willen, die bei der leisesten Berührung umfallenden Italiener Untermenüs zu bewältigen.

In der aktuellen Spielzeit setzt man nun auf eine Flash-basierte Navigation mit mikro­skopisch kleinen und nicht skalierbaren Texten, die zudem nicht mit der Tastatur zu bedienen ist. Bei deaktivierten Plug-Ins und abge­schaltetem JavaScript erhält man zwar eine statische Alter­native, die aber ebenso wenig nutzbar ist, da viele Navigations­punkte wegen Mängeln im CSS hinter dem Seiten­inhalt verschwinden. Wie im richtigen Leben: der Geißbock träumt von San Siro und der Anfield Road, die Realität heißt aber Hermann-Löns-Stadion und Ernst-Abbe-Sportfeld – und zu mehr reicht es auch mit dieser Navigation nicht.

Accessibility in der Abseitsfalle

Während die Stadien mittlerweile Zugänge für Rolli­fahrer anbieten, so hat sich das Thema Barriere­freiheit noch nicht bis zu den Web-Entwicklern herumgesprochen. Neben den fehlenden, leeren oder falschen alt-Attributen gehört dazu insbe­sondere die Anpass­barkeit an verschiedene Benutzer­einstellungen und die Bedienbar­keit mit alternativen Eingabe­geräten.

Durch die scheinbar beliebige Verteilung von tabindex-Attributen mit der Gieß­kanne erinnert die Tastatur­navigation bei Pauli eher an Hüpfe­kästchen denn an Systemfußball. Auch bei Kölle kein gepflegtes Kurzpaßspiel: von der Kopf­zeile geht es unter Umgehung der Navi­gation direkt mit einem langen Pass quer über die Seite auf die rechte Außen­bahn. Nach ein paar Dribblings dort geht es zurück auf links und erneut ins Mittel­feld, wo sich der Ball endgültig verliert. Ganz schlimm: wie bei vielen Typo3-Installationen wird der Tastaturfokus per JavaScript (onfocus="blurLink(this);") geblockt – ohne Maus geht also gar nichts.

Du hast die Haare schön …

Ebenfalls ein unterirdischer Grottenkick ist die Robustheit der Gestaltung und deren technische Umsetzung. Die Rheinländer betreiben aggressives Fore­checking – gegen Änderungen der Schriftgröße durch den Nutzer setzen sie eine Abwehr von starren Höhen­angaben. Dadurch verschwinden oder überlappen Inhalte schon, sobald man nur 1-2× auf Apfel-+ gedrückt hat. Gegen diese Beton­abwehr mit echten Zweitliga-Qualitäten hilft nur noch das Abschalten von CSS, wenn man auf größere Schrift angewiesen ist und auch etwas lesen möchte. Die Hamburger machen hier im Mittel­feld einige Punkte gut, aber auch dort sind Inhalte in den äußeren Spalten und den Über­schriften nicht mehr lesbar, sobald der Nutzer eine etwas andere Schrift­größe eingestellt hat.

Kommentator: Tomas Caspers

Zum Saisonstart widmen sich die Webkrauts den Internetauftritten aller 36 Bundesliga­vereine und testen sie auf moderne Webstandards. Heute sind drei Webabstiegs­kandidaten bei uns zu Gast.

Werder Bremen

Werder empfängt seine Gäste auf einer top-altmodischen Tunnelseite mit unnötigen Layouttabellen und überladener Grafik. Die 2. Runde erreicht man nur über die Buttonleiste unterhalb der unmotiviert platzierten Trikots: eine Einzelgrafik als Imagemap, die sich damit klar für die Kreisklasse (Grönland) qualifiziert. Dafür zeigt man sich solidarisch zum Bremer Haushalt, für Alternativtexte und validen Code fehlen die Mittel.

Trotz raffinierter Abseitsfalle (kein Doctype) zählt der Validator auf der Hauptseite rund 120 Fehlpässe. Ärgerlich und völlig unnötig sind dabei XHTML-Elemente im head-Bereich des HTML-4-Dokuments.

Das CMS generiert ein veraltetes Tabellenlayout in fixer Breite, welches in bis zu vier Ebenen verschachtelt ist. Die Problematik zeigt sich auch im Druck (Print-CSS nicht vorhanden). Die Dokumentenstruktur ist bar jeder Semantik: von Überschriften, Absätzen oder Listen keine Spur. Dafür reichlich semantisch unsinnige div-Container für Linklisten, insofern diese nicht durch ein <br> getrennt werden oder gleich eine eigene Tabellenzelle bekommen. Im Kopfbereich finden sich zudem div-Container mit Inline-Styles und Font-Elementen.

Die Navigation (22 Menüpunkte und eine zweite Hierarchieebene) ist bis auf Abstände und Höhen gut gelöst, leider fehlen überall hover-Zustände, sowie eine Pfadangabe zur Identifizierung der aktiven Seite oder eine Sitemap. Die Tastaturbedienung funktioniert gut. Trotz zahlreicher Inline-Skripte ist die Seite ohne JavaScript benutzbar.

Übersicht und Benutzerführung ist weniger gelungen, inhaltliche Schwerpunkte werden optisch nicht hervorgehoben. Die Schriftgröße ist etwas zu klein, eine Vergrößerung funktioniert bedingt um eine Stufe, bevor sich Texte in andere Bereiche schieben. Schlecht: Hinweis zur Verkehrslage als Popup-Fenster.

Kommentator: Nils Pooker

Hannover ’96

Die Webseite von Hannover 96 lässt jeden Besucher an einer Zeitreise teilnehmen – in das Jahr 1996. Was sich zunächst interessant anhört, enttäuscht auf ganzer Linie: Unter der Haube der Webseite werkelt ein völlig veralteter HTML-4-transitional-Motor. Der Quelltext erinnert an die schlechte Lesbarkeit aus der Microsoft FrontPage-Fraktion.

Diese Programme gibt es längst nicht mehr und wurden längst ersetzt – aus gutem Grund. Bei Hannover 96 ist das Grundgerüst hingegen noch geblieben, und wahrscheinlich im Laufe der Jahre immer mehr gewachsen. Fraglich ist, ob seit 1996 niemand mehr Hand angelegt hat an der Struktur, oder ob die Entwickler schlicht 11 Jahre verschlafen haben.

Vielleicht möchte der Verein nur der Zahl im Namen treu bleiben. Tatsächlich haben "die Roten" von Webstandards nicht einmal ansatzweise etwas gehört. Dass der Ball auch im Internet rund rollen soll, und nicht nur auf den Rasen, ist in Hannover noch nicht angekommen. Die Entwickler beherrschen schlicht ihr Handwerk nicht, verlieren sich in vielen Spielereien, die sich nicht einer einfachen Benutzerführung unterordnen. Mit ein wenig mehr Mut zu Freiraum und Abständen, zu einer einheitlichen Gestaltung und zu einer soliden und modernen Basis, würde die Webseite der Roten ein wahres Informationsmekka sein, denn das Potential ist vorhanden.

Hannover 96 kann schon heute zur besten Mannschaft in der 1. Bundesliga gehören. Und zwar im Internet, mit einem zeitgemäßen und modernen Auftritt. Doch dazu ist ein umfangreicher Relaunch notwenig, der hoffentlich keine weiteren 11 Jahre auf sich warten lässt.

Kommentator: David Maciejewski

FC Hansa Rostock

Aufsteiger Hansa Rostock begrüßt uns mit einer Vorschaltseite, die in der Optik der Websteinzeit gehalten ist. Die dann folgende Startseite ist in einer Mischung aus blau und rot gehalten, eine problematische und gewöhnungsbedürftige Farbkombination. Auch das geriffelte Hintergrundbild trägt nicht zur Lesefreudigkeit bei.

Das von der Startseite angeforderte Popup wird brav von Firefox und IE blockiert. Solche Details sind einfach ärgerlich. Die Navigationen stehen sowohl als Bilder, als auch als Text zur Verfügung. Screenreader und Suchmaschinen werden so auf alle Fälle gefüttert. Leider sind die Textlinks in der Hintergrundfarbe formatiert, sodass sie für diejenigen, die ohne Bilder schneller surfen wollen, nur beim Überfahren mit der Maus sichtbar sind. Doch dafür muss man ihre Existenz erahnen. Müßig zu erwähnen, dass im Hintergrund ein Tabellenlayout schlummert.

Styles werden generell inline vergeben, ebenso JavaScripts. Das CMS platziert vor der XHTML-DTD einen mehrzeiligen Kommentar, alles Zeichen hoher Unprofessionalität. Zudem sind noch große Teile des Quellcodes auskommentiert, werden aber trotz allem geladen, das ist nutzloser Ballast für alle Besucher.

Die Seite wird als XHTML ausgeliefert, an die Notationsregeln hält man sich allerdings nicht. Das Konzept der Absätze war der Agentur bekannt, Listen und Überschriften hingegen nicht. Von Codequalität kann man in diesem Falle wirklich nicht sprechen, es ist ein Trauerspiel.

Kommentator: Jens Grochtdreis

Zum Saisonstart widmen sich die Webkrauts den Internetauftritten aller 36 Bundesligavereine und testen sie auf moderne Webstandards. Punkte werden heute an die Webseiten von Greuther Fürth, SC Paderborn und Carl Zeiss Jena vergeben.

Greuther Fürth

Der erste Eindruck: Die Webseite von Greuther Fürth kommt übersichtlich und aufgeräumt daher, die Schriftgröße ist lesbar, es wurden keine Layouttabellen verwendet und sie validiert. Nicht schlecht. Aber schon nach kurzer Zeit fällt etwas immens negativ auf: Im Kopfbereich befindet sich die horizontale Hauptnavigation in Form von Reitern, die beim Darüberfahren mit der Maus ihre jeweiligen Unterpunkte zum Vorschein bringen. Das stört vor allem wenn man z.B. mit der Maus die knapp darüber liegende zweite Navigation ansteuern will oder eine der Browserfunktionen erreichen möchte. Abstellen kann man das Verhalten nur durch das Ausstellen von JavaScript. Dann allerdings fehlt die Hauptnavigation komplett – und man kann keinen der Reiter mehr erreichen. Auch als Tastaturbenutzer ist man aufgeschmissen. Insgesamt ist die Navigation ein echter Schwachpunkt. Die Schriftvergrößerung macht das Navigieren schwierig, da viele Punkte abgeschnitten werden und nicht mehr lesbar sind.

Auf Semantik wurde kein besonderer Wert gelegt. Hin und wieder entdeckt man eine Liste, einen Text oder eine Überschrift, bei der das passende HTML-Element benutzt wurde. Aber das scheint mehr Zufall als Planung zu sein. So wurde bei Überschriften fast ausnahmslos auf <hx>-Elemente verzichtet. Wenn sie dann auf einer Seite plötzlich doch zu finden sind, wurde für alle Überschriften einheitlich <h1> vergeben – schade.

Ein paar andere Auffälligkeiten: Es gibt keine Links um Teile der Seite direkt anzuspringen, die Überschriften von Anreißern sind nicht verlinkt und die Kennzeichnung von Links geschieht nur über Farbe (die aber auch an anderen Stellen, z.B. für Überschriften verwendet wird). Zudem werden besuchte Links nicht als solche gekennzeichnet, Tabellenköpfe usw. fehlen und das alt-Attribut wurde nur sehr sparsam eingesetzt, an manchen Stellen auch komplett weggelassen. Das Fazit: Verbesserungswürdig.

Kommentator: Michael Bielitza

SC Paderborn

Gerade nachdem der Bericht über die Webseite des Zweitligisten SC Paderborn fertiggestellt war, hat man ein Redesign veröffentlicht, das eine Neubetrachtung nötig machte. Weiterhin strahlt die gesamte Seite in Blau auf einem Hintergrund mit Farbverlauf. Im rechten oberen Bereich werden wechselnde Bilder als Eye-Catcher gezeigt und der aktuelle Stand der Liga-Tabelle kann mit einem Klick eingeblendet werden – allerdings nur bei aktiviertem JavaScript.

In der Navigation, die semantisch korrekt als Liste ausgezeichnet ist, sind ohne JavaScript nur die Punkte der ersten Ebene zu erreichen. Die zweite Ebene versteckt sich in einer separaten zweiten Liste, ohne Verknüpfung zu den Punkten der ersten Liste. Das leider existierende Frameset wird nur genutzt, um einen ständig sichtbaren Werbebereich im unteren Seitenteil zu halten. Der <noframes>-Bereich ist nicht gepflegt und erschwert so Geräten, die Frames nicht nutzen können, den Zugang. Der Nachrichtenbereich auf der Startseite präsentiert sich mit, durch <h1> und <h2> ausgezeichneten, Überschriften. Dadurch stehen auf der Startseite acht <h1>-Überschriften. Sinnvoll ist das nicht.

Die Standardschrift ist mit 12 Pixeln angegeben und fällt somit für viele zu klein aus. Bei Vergrößerung der Schrift entstehen aufgrund des fixen Layouts schnell Probleme. Die Schriftgrößenangabe in Pixeln wird nicht gern gesehen, bietet jedoch bei modernen Browsern keine Nachteile mehr. Vor dem Redesign war die Schriftgröße noch in Punkt (pt) angegeben; das führte zu unvorhersehbaren Ergebnissen. Insgesamt hat man in Paderborn auf dem richtigen Weg einen kleinen Schritt nach vorn und einen großen Schritt zurück gemacht, indem Technologien vorausgesetzt werden, die nicht überall vorhanden sind.

Kommentator: Stefan David

FC Carl Zeiss Jena

Die Webseite des 1903 gegründeten Fußballclubs FC Carl Zeiss Jena ist auf den ersten Blick unaufgeräumt und chaotisch. Die Ablenkung durch die unzähligen, unschönen Werbebanner demotiviert. 12 Banner zählt die Seite nach der Vorschaltseite, inklusive eines Banners, welches sich beim erstmaligen Besuch über den kompletten Inhalt legt. Der Surfgenuss erhält so einen Dämpfer, fühlt man sich eher zum Konsumenten degradiert, denn als ernstgenommener Fan des Vereins. Eventuell wichtige oder zentrale Elemente sind nicht zu erkennen, es ist unmöglich sich einen schnellen Überblick zu verschaffen.

Per Maus lässt sich leicht durch die Seite navigieren, die Navigation ist inhaltlich gut strukturiert und bietet einen typischen Hierarchiebaum. Leider ist der Navigationsbereich nicht durch die Tastatur zu erreichen. Bei einem Blick unter die Haube festigt sich der erste Eindruck: Eine nicht validierende Tabellenstruktur mit zahlreichen Mängeln in wichtigen Elementen. CSS wird nur minimal eingesetzt, um Anpassungen an der Schriftfarbe vorzunehmen, die restliche Auszeichnung erfolgt ausnahmslos im HTML mit zeitweise veralteten Elementen und Attributen.

Die Standard-Schriftgröße ist recht klein gewählt, vor allem in der Navigation. Bei Vergrösserung schieben sich die Elemente der Webseite bis zur Unkenntlichkeit übereinander.

Kommentator: Oliver Schwarz

Zum Saisonstart widmen sich die Webkrauts den Internetauftritten aller 36 Bundesligavereine und testen sie auf moderne Webstandards. Die Dopingkontrolle für Webseiten macht heute in Leverkusen, Cottbus und Karlsruhe halt.

Bayer 04 Leverkusen

Die Webseite von Bayer 04 Leverkusen besteht aus einem Frameset, in dem der Hauptinhalt und eine Art Fußleiste enthalten sind. Diese Fußleiste enthält lediglich Links zum Impressum und zu Kontaktdetails. Die eigentliche Seite zeigt sich komplett auf Tabellen basierend. Vom Nutzen und Sinn von Überschriften hat man anscheinend noch nichts gehört, von Alternativtexten für Bilder ganz zu schweigen.

Die Überschriften der News sind nicht mit dem eigentlichen Artikel verlinkt, stattdessen muss man auf eine kleine, sehr kontrastarme Grafik klicken. Schriftvergrößerung ist bei diesem Layout nicht vorgesehen, eine Mischung aus em-basierter Breite und Pixelwerten lässt die Seite schon bei der ersten Stufe der Textvergrößerung auseinander laufen.

Besonders schwer fällt ins Gewicht, dass es bei ausgeschaltetem JavaScript keine Unternavigation mehr gibt und die Hauptnavigation keine Gestaltung mehr aufweist. Auf der Seite wird sehr viel Browsererkennung benutzt wird um abhängig vom Browser Style Sheets, gerade für den Navigationsbereich, auszuliefern. Was das aber mit dem Inhalt der Unternavigation zu tun hat, darüber kann man nur spekulieren. Dieser sollte nämlich in jedem Browser dargestellt werden, zumindest wenn Bayer die Inhalte ihrer Webseite am Herzen liegen.

Kommentator: Eric Eggert

FC Energie Cottbus

Über die Adresse FCEnergie.de gelangt man wie in den guten alten Anfangszeiten des Web auf eine Vorschaltseite. Diese weist den Weg zur eigentlichen Homepage und zu FCEnergie.tv, dessen Sinn und Nutzen nicht erläutert wird.

Die Vorschaltseite besteht nur aus Bildern, die weder alt-Attribute besitzen, noch via CSS versteckte Ersatztexte. Für Screenreader ist auf der Startseite also Schluss. So wurden Ende der 90er häufiger Seiten gebaut, aber wir haben mittlerweile 2007.

Technisch ist die Seite ein Graus. Semantik ist unbekannt. Hin und wieder verirrt sich eine Überschrift in den Quelltext, aber ganze Textwüsten werden ohne einen Absatz bestritten. Dafür darf schon einmal ein meta-Element im body sein und IDs werden gleich mehrfach genutzt. Ausgeschaltetes JavaScript ist kein Drama, die Site lässt sich prima ohne bedienen, das ist sehr gut.

Die Startseite quillt über vor Neuigkeiten, Bannern, Tabellen und sonstigen Infoboxen. Alles steht unter dem Motto “der Verein und seine Fans”. Und da die Fans wichtig sind, werden besonders glühende Vertreter mit Bild präsentiert und später sogar mit Fragebogen persönlich vorgestellt. Ein tolles Konzept. Immer wieder steht der Fan im Mittelpunkt – das ist klasse. Noch besser wäre es, wenn beim nächsten Relaunch auch einmal Professionalität in der Umsetzung der Webseite im Mittelpunkt stünde. Dann käme Cottbus aus dem Kreisliganiveau heraus, welches die Seite derzeit kennzeichnet.

Kommentator: Jens Grochtdreis

Karlsruher SC

Der KSC ist endlich zurück in der Bundesliga – und präsentiert sich ebenso erstligareif auf seiner Webseite: optisch ansprechend gestaltet und modern im Gegensatz zu seinem Stadion und dem Ticket-System. Das eingesetzte Content-Management-System Typo3 der Blau-Weißen liefert aktuelle Nachrichten auch als RSS-Feeds aus und MP3-O-Töne werden mittels Flash-Player angeboten. Beim Layout setzt der Verein auf divs statt auf Tabellen, wobei Semantik leider nur selten eingesetzt wird. Schriftvergrößerungen um 1-2 Stufen sind fast problemlos machbar.

Doch wo Licht ist, ist auch Schatten: Das zum Teil zweistufige Drop-Down-Menü wurde leider über DHTML-Layer mit Tabellen und viel JavaScript realisiert, anstelle semantischer und einfacher pflegbarer Methoden wie z. B. dem Suckerfish. Trotzdem sind die Untermenüs auch ohne JavaScript erreichbar, da sie in der entsprechenden Ebene in der linken Spalte redundant dargestellt werden. Die Schrift ist im Allgemeinen mit 10px viel zu klein.

Leider wird auch beim KSC der Fehler begangen, dass man denkt, durch den großzügigen Einsatz von Werbung auf der Webseite den kleinen Etat erhöhen zu können – der Benutzer muss sich die richtigen Inhalte zusammensuchen. Aber mit einem gut konfigurierten Adblocker ist das kein Problem, zumal die Anzahl der neuen Nachrichten am Tag ja noch übersichtlich bleibt.

Alles in allem wird aber in Sachen Webstandards ein guter Platz im oberen Mittelfeld erreicht – ein Platz, worüber sich der KSC auch nach Abschluss der neuen Saison mehr als freuen würde.

Kommentatorin: Beate Paland

Zum Saisonstart widmen sich die Webkrauts den Internetauftritten aller 36 Bundesligavereine und testen sie auf moderne Webstandards. Heute schauen wir bei Freiburg, Aue und Wehen-Wiesbaden nach dem rechten.

SC Freiburg

Wie bei vielen Fußballvereinen fällt auch bei der Webseite des SC Freiburg eine Vorschaltseite auf. Betritt man die Seite durch Klick auf das Vereinslogo oder den Schriftzug „Eingang“, landet man auf einem Frameset, welches das Browserfenster in drei Zeilen (Navigation, Inhalt mit Unternavigation, Seitenfuß) einteilt. Neben dieser technischen Antiquität fällt sofort auf, dass die Webseite mit inhomogen gestalteten Buttons und Bannern überladen ist, was neben dem relativ schmalen Inhaltsbereich, der nur knapp ausreichenden Schriftgröße, dem verwendeten Blocksatz und dem zu geringen Zeilenabstand nicht für Lesespaß sorgt.

Fehlende Navigations-Hover bei deaktiviertem JavaScript lassen die Usability leiden, und hellrote Schrift auf mittelgrauem Grund flirrt in den Augen des Betrachters. Apropos Usability: Dem Besucher wird nicht klar, welche Links neue Fenster/Tabs öffnen und welche innerhalb der Webseite verlinken. Pluspunkt: auch bei deaktiviertem JavaScript lässt sich im Frameset ohne Einschränkung navigieren. Die Logik der Navigation ist durchdacht und spannt den Besucher nicht auf die Folter, was sich wohl hinter diesem oder jenem Link verstecken mag.

Das Markup zwingt den Browser in den Kompatibilitäts-Modus, ist weitgehend frei von Semantik und setzt an Stellen, an denen Float-Elemente zur Positionierung von Bereichen zum Einsatz kommen müssten, Tabellen ein. Auffällig, aber nicht von Nachteil, ist das Fehlen von Kontaktformularen – der Kontakt-Link im Seitenfuß ruft das Impressum auf, in dem jedoch sämtliche relevanten Informationen zu finden sind.

Kommentator: Stefan Nitzsche

FC Erzgebirge Aue

Der kleine Club aus dem Erzgebirge, bzw. seine Webseite hätte eigentlich eher einen Platz in der nächsthöheren Liga verdient, bedenkt man wie drittklassig sich viele der dort vertretenen Vereine präsentieren. Erstens verzichtet man auf die allseits beliebte und völlig überflüssige Vorschaltseite und es öffnet sich auch kein, womöglich von ohrenbetäubender Bierzeltmusik begleitetes, Begrüßungsfenster.

Des weiteren finden sich die semantisch korrekten <hx>-Elemente für Überschriften an den richtigen Stellen und die Navigation wird akkurat als Liste gekennzeichnet. Diese funktioniert nebenbei gänzlich ohne JavaScript und ist mit Text anstatt Bildern umgesetzt worden (hierfür erstmal ein dicker Pluspunkt!).

Leider lassen sich die Menüpunkte, wegen einer Schriftgrößenangabe in Pixel, nicht im Internet Explorer 6 und älteren Versionen vergrößern. In nicht-IE-Browsern wiederum führt eine Schriftvergrößerung zu Überlappungen benachbarter Bereiche und schließlich zur Unlesbarkeit sämtlicher Texte. Dafür gibt’s dann postwendend einen Punkt Abzug in der B-Note!

Ebenfalls wenig erfreulich präsentieren sich halbherzige Versuche, mit divs logisch sinnvolle Blöcke zu erstellen. Hier hätte man weitaus konsequenter sein sollen, denn es werden leider immer wieder die antiquierten Layouttabellen bemüht und richtig tief verschachtelt.

Neben ausgiebigem Design mittels CSS tauchen auch immer wieder völlig veraltete FONT-Elemente mitten im Markup auf. Den hohen Platzbedarf hierfür glichen die Entwickler anscheinend mit radikalen Sparmaßnahmen an den alt-Attributen wieder aus.

Fazit: Die Webseite der “Veilchen” hat einen gewissen Vorsprung durch ihre guten Ansätze, die aber noch dringend konsequenter umgesetzt werden sollten.

Kommentator: Maxx Hilberer

SV Wehen Wiesbaden

Am Freitag, dem 13. (Juli 2007) ging die neue Webseite des SV Wehen Wiesbaden online: alles nach XHTML-1.0-Transitional? Bezüglich der technischen Umsetzung der Webseite wäre “HTML 3.2” im Doctype besser gewesen. Ein moderner Dokumententyp macht noch lange keine Saison: Die Wiesbadener verscherzen ihre Chance auf Validierung schon in der ersten Spielminute durch ein Eigentor, ausgeführt durch ein Inline-Script vor dem Doctype. Dafür wird dem Besucher ein RSS-Link vorenthalten, der nur im Quellcode zu sehen ist.

Beim Thema Semantik lässt man sich nicht verwirren und verzichtet darauf: Lediglich in der linken Spalte hat man vergessen, eine schlanke Navigationsliste ebenfalls in dekadent-verschachtelte Tabellenwüsten mit glitzernden Font-Tags und schwülstigen Inline-Styles zu verwandeln.

Gewichtung und Aufteilung der Navigation sind leider etwas unlogisch: Die eigentliche Hauptnavigation in der linken Spalte ist nicht prominent genug im Vergleich zur horizontalen Imagemap-Navigtion. Positiv: ohne JavaScript lässt sich die Website ebenso gut bedienen wie mit der Tastatur. Leider fehlen Alternativtexte für die Bilder. Das Design ist dagegen richtig gut gelungen: die Boxen in den Seitenspalten sind schnell zu erfassen, das Farbsystem ist interessant, die Typografie passt, Hintergrundgrafiken sind professionell um- und eingesetzt.

Die Schriftgrößen sind vor allem in den Boxen der Seitenspalten zu klein, in der Spalte mit dem Inhalt jedoch einigermaßen lesbar. Ohne die unsinnige Listen-Höhenangabe in der linken Navigation hätte es für die Schriftvergrößerung die volle Punktzahl gegeben.

Kommentator: Nils Pooker

Zum Saisonstart widmen sich die Webkrauts den Internetauftritten aller 36 Bundesligavereine und testen sie auf moderne Webstandards. Heute ist auch bei den Webkrauts Derbyzeit: Schalke ’04 und Borussia Dortmund.

Pünktlich zum Derby treten die Mannschaften von Schalke 04 und Borussia Dortmund auch im Internet gegeneinander an. Jedoch duellieren sich heute nicht die 22 Spieler der beiden Mannschaften, sondern deren Internetauftritte. Als Schiedsrichter auf Schalke04.de begrüßt Sie Stefan Nitzsche, auf den Seiten des BVB schaut Manuel Bieh nach dem Rechten.

Der Anstoß findet in Dortmund statt: hier gibt es pünktlich zum Bundesligastart ein Redesign und kommt dabei nur haarscharf um eine rote Karte herum. Das neue Design, welches dringend notwendig wurde, erinnert allerdings nicht nur von der Oberfläche an ein Spiel von Minikickern: hier passiert ziemlich viel, auf ziemlich wenig Raum. Nicht nur das die Inhalte ziemlich eng gequetscht aufeinander hängen, nein, auch im Quelltext sieht es ähnlich aus: um rund 4 Kilobyte an echtem redaktionellen Fließtext darzustellen, bedarf es eines 43,5 Kilobyte großen HTML-Dokuments (Leerzeichen und Zeilen größtenteils entfernt; dagegen gerade einmal ca. 6 KB Stylesheets), welches nicht weniger als 151 schwere Fehler bei der Validation enthält. Dies lässt sich bei der übertriebenen Verwendung von Tonnen schweren Inline-JavaScripts und Tabellenlayouts aber auch nur schwerlich vermeiden. Der BVB hängt in dieser Hinsicht wohl noch zu sehr an seiner erfolgreichsten Zeit – um 1997.

Man könnte hier in Dortmund also zweifelsfrei von einem klassischen Fehlstart in die neue Saison sprechen. Wir schalten nun einmal rüber zum Ruhrgebietsnachbarn, zu Stefan Nitzsche nach Schalke. Stefan, wie sieht’s aus? Hat Dein Team diese Saison einen besseren Start erwischt?

Vielen Dank, Manuel! Leider haben auch die Schalker nicht gerade einen denkwürdigen Saisonstart hingelegt. Eine gelbe Karte fängt Schalke sich beispielsweise bei der Validierung ein: Füttert man den Validator mit der Startseite, hagelt es ganze 54 Fehler. Eine regelrechte Vielfalt bietet sich hier: vom fehlenden Doctype über ganze URLs als Element-IDs und falsch verschachtelte bzw. nicht geschlossene Elemente. Schaut man sich den Umfang des Markups an, so unterbietet hier Schalke den BVB mit 40 KB nur ganz knapp. Dafür gönnt sich Schalke ganze 34,1 CSS-Datei, sowie nochmal knappe 9 KB für eine CSS-Datei, die vom verwendeten Content-Management-System Typo3 generiert wurde. Guten Willen allerdings lässt sich der Agentur der Königsblauen wohl unterstellen, denn immerhin setzt sie auf eine Trennung von Inhalt und Präsentation.

Auch leiden die Schalker Templates unter starker und wenig eleganter Divitis in Kombination mit akuter Classitis, was zwar für komplexe Seiten nicht ungewöhnlich ist, hier aber deutlich übertrieben wurde. Auch findet man immer wieder leere Anker, die außer eine kryptischen ID nichts zu enthalten scheinen.

Die Semantik der Schalker liegt trotz der tollpatschig verwendeten Markups doch deutlich über dem Standard der Dortmunder und lässt sogar logische Auszeichnungen wie strong oder semantisch korrekt verwendete Überschriften und Listen erkennen. Schriftgrößen sind in em und Prozent definiert, auch dafür sammeln die Schalker Pluspunkte.

Das Scripting findet auf der Schalker Seite nur sehr begrenzt im Markup statt, dafür ist beispielsweise ein wenig unobtrusive (unaufdringliches) JavaScript für die Bildvergrößerung im PopUp, sowie zwei JavaScripts zur Formularbehandlung und zur Veränderung des Focus-Verhaltens verschiedener Elemente eingebunden.

Eine klare Verwarnung muss ausgesprochen werden, weil die Anmeldeseite des Schalker Auftritts immer noch am voreingestellten Ort erreichbar ist (/typo3). Damit öffnet man natürlich potenziellen Angreifern Tür und Tor und baut einen enormen Druck auf, erscheinende Updates zeitnah – also: sofort! – einzuspielen, um bekannte Sicherheitslücken zu schließen.

Damit gebe ich pünktlich zur Halbzeitpause zurück ins Funkhaus.

Ich begrüße Sie recht herzlich zurück in Dortmund, zurück aus der Werbung. Damit sind wir nun direkt wieder beim Thema: Werbebanner! Hier muss man der zuständigen Agentur ein kleines Kompliment machen, denn Sie hat es perfekt verstanden, die chaotischen Werbebanner der Sponsoren kompakt und harmonisch an einer eigens dafür vorgesehenen dritten Spalte im Design unterzubringen.

Dass die Seite unter Berücksichtigung auch des äußeren Skyscraper-Werbebanners beinahe Fußballplatzbreite (1100 Pixel!) erreicht, sollte den User nur am Rande des Platzes stören, so passen doch alle wesentlichen Inhalte bei einer Bildschirmauflösung mit 1024 Pixel Breite noch gut in das Browserfenster. Kleiner Pluspunkt: die meisten Banner sind in gewisser Weise Eigenwerbung und sollten den eingefleischten Fan nicht allzu sehr vom Spielgeschehen ablenken.

Und damit zu Stefan und dem Spielablauf auf Schalke.

Ja Manuel, auch hier auf Schalke hält sich die Verwendung von Bannern in Grenzen. Zudem halten sich diese vornehm zurück. Alles ist, das hat man bei der Konkurrenz schon oft anders gesehen, in nahezu einheitlichen, harmonischen Farbtönen und weitgehend homogener Gestaltung in das Gesamtkonzept eingebunden. Allein das Sponsorenbanner im Skyscraper-Format außerhalb des Inhaltsbereichs fällt leicht aus der Reihe, dafür preist es (zumindest zur Zeit) nicht eigenes Produkt an, sondern kündigt eine für Fans potenziell interessante Veranstaltung an. Die Gesamtbreite, das Sponsorenbanner eingeschlossen, beträgt 995 Pixel und liegt damit einwandfrei unter der allgemein üblichen Maximalbreite von 1000 Pixeln.

Die Navigation auf Schalke ist schnell erfassbar und fordert an der Oberfläche selbst von Fußballlaien kein besonderes Adaptionsvermögen, so dass sich intuitiv navigieren lässt. Erst in tieferen Ebenen treten Begriffe auf, die dem Laien oder Nicht-Schalke-Fan fremd erscheinen mögen.

Ich denke, dass Schalke sich in diesem Match klar vor den Dortmundern positioniert, da es in den Punkten Validität, Struktur und Semantik die Nase vorn hat. Die Usability ist optimierungsbedürftig, ebenso wie der Schalker Auftritt etwa keinen Preis für die Gestaltung gewinnen wird, allerdings offenbarten sich hier auch keinerlei schockierende Mängel. Der Technik allerdings, speziell Markup und CSS, würde eine Überarbeitung sicherlich gut tun. Erwähnenswert ist vielleicht noch, dass der BVB, wie viele andere Fußballclubs auch, den Sponsoren zuliebe eine Doorway-Page verwendet, auf die Schalke glücklicherweise verzichtet.

Wir sind gespannt auf ein kommendes Redesign – vielleicht reicht es ja dann auch für den Meistertitel!

Und damit zurück zu Manuel – Wie sieht das Fazit für den heutigen Dortmunder Auftritt aus?

Bei all der Kritik gibt es aber auch Punkte, die in Dortmund positiv auffallen. Die Inhalte auf der Seite sind top-aktuell, und es scheint beinahe als hätten die Verantwortlichen ihr Budget diesmal zum größten Teil dazu eingesetzt, um die Seite von der Struktur her gut aufzustellen, damit die textuellen Inhalte genauso gut zu finden, wie zu lesen sind. Hier also mal ein großes Lob von meiner Seite aus an die Macher von BVB.de: es navigiert sich, ist man erst einmal durch das anfängliche Chaos durchgestiegen, einfach und intuitiv!

Nur leider, liebe Leser, Fans und Verantwortliche, gewinnt man heutzutage kein Spiel mehr nur duch seinen Inhalt. Auch der Leitsatz “Content is King” findet nur dann Anwendung, wenn das Teamplay aus sauberem Code, Semantik, Übersichtlichkeit und Funktionalität stimmt. Und bei einer Seite, die Ihren Benutzer, dank Größenangaben in pt-Einheit, nicht einmal browserübergreifend die Schriftgröße verändern lässt, muss man aufpassen, dass man sich, statt im UEFA-Cup, nicht am Ende der Saison irgendwo im Tabellenkeller wiederfindet.

Kommentatoren: Manuel Bieh und Stefan Nitzsche