Webkrauts

Wir haben noch nicht alle älteren Artikel nachbearbeitet. Das bezieht sich in der Regel nur auf die Codebeispiele, die noch nicht optimal dargestellt werden.

»Maßgebend is auf’n Platz!« – Teil XII

Saisonabschluss nun auch in der zweiten Bundesliga: Heute mit unserem persönlichen Webmeister 2007: Mainz ’05.

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