Der Saisonstart in der Fußball Bundesliga ist schon einige Zeit her mittlerweile, dennoch möchte ich hier der Vollständigkeit halber den sogenannten „Derby-Artikel“ veröffentlichen, den ich mit dem Webkrauts-Kollegen Stefan Nitzsche zu den Webauftritten von Borussia Dortmund und dem FC Schlake 04 verfasst habe.
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 durch 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
Der Originalartikel findet sich unter http://www.webkrauts.de/2007/08/18/massgebend-is-aufn-platz-teil-ivdas-derby/
Jetzt abonnieren!
Mal aus Interesse: Kennt irgendwer von Euch einen kostenlosen (oder zumindest günstigen) 2D Barcode bzw. Datamatrix Reader? Man sollte eine URL zu einem Bild angeben können, das Script mir daraufhin den dekodierten String ausspucken. Mit günstig meine ich nach Möglichkeit einen 2stelligen Betrag ;-)
Auch dieses Jahr gibt es, wie schon in den 3 vergangenen Jahren, einen Webstandards Adventskalender der Webkrauts. Steuerte ich in den letzten beiden Jahren selbst noch jeweils einen Artikel bei (