ononlinework

Der folgende Artikel wurde gestern bei den Webkrauts veröffentlicht. Kommentare bitte dort abgeben. Viel Spaß beim Lesen.

Eine neue Woche, zwei neue Seiten mit Relaunch: QSC und freenet sind mit neuem Layout und neuem Code online gegangen.

Beide Sites sind mir zwar im alten Layout bereits begegnet, da ich jedoch kein regelmäßiger Besucher bin, musste ich mein Gedächtnis erst mit Hilfe der Waybackmachine wieder auffrischen.

QSC

Eines vorweg: Das Aussehen der Site hat meiner Meinung nach bei dem Relaunch deutlich gewonnen. Die Startseite ist übersichtlich bietet einen schnell zu erfassenden Überblick über die gebotenen Leistungen. Die gesamte Optik wirkt frischer und erheblich großzügiger im Vergleich zur abgelösten Version. Das liegt natürlich auch an der festen Breite von 940 Pixeln für den Inhaltsbereich, der bei breiterem Fenster zentriert dargestellt wird.

Lässt man sich die Seite ohne Bilder anzeigen, fehlt keine wesentliche Information. Allerdings ist man bei QSC auch betont sparsam mit der Verwendung von Bildern umgegangen. Die textuelle Information steht offensichtlich klar im Vordergrund. Das setzt sich auch auf den Folgeseiten fort – Bilder werden weitestgehend nur als Eyecatcher eingesetzt.

Die Seiten validieren nicht, sind aber sehr nahe dran. Hätte man statt »strict« »transitional« genommen, hätte es auf den meisten Seiten schon gereicht. Auf das TARGET-Attribut muss man eben verzichten oder den passenden Doctype wählen.

Das Markup ist weitgehend semantisch. Überschriften sind Überschriften, Listen sind Listen und Absätze sind Absätze. Allerdings leidet der Auftritt an einer leichten Divitis. Einige der tief verschachtelten DIVs hätte man sicherlich einsparen können, ohne auf gestalterische Möglichkeiten zu verzichten.

Auf Layouttabellen wird weitestgehend verzichtet. Jedoch wird in der Login-Maske, die nach Klick auf »myQSC« als Layer erscheint, dann doch wieder auf eine Tabelle zur Gestaltung zurückgegriffen. Mit ausgeschaltetem JavaScript funktioniert der Login übrigens auch, dann aber nicht im Layer sondern auf einer neuen Seite – spannend ist dabei, dass die aufgerufene Login-Seite dann wieder im alten Layout erstrahlt. Auch an anderen Stellen der Site konnte ich keine Nachteile bei deaktiviertem JavaScript feststellen.

Besondere Hilfen zur Zugänglichkeit der Site konnte ich nicht finden. Weder konnte ich Möglichkeiten zur Schriftgrößenänderung oder zur Farbumkehrung finden, noch sind Übersprunglinks, mit denen man z.B. direkt den Inhalt unter Umgehung der Navigation erreichen kann, zu vorhanden. Benutzer eines Screenreaders dürften sich jedoch trotzdem aufgrund des semantischen Markups relativ einfach zurechtfinden können, wobei man es ihnen sicher leichter machen könnte.

freenet

Auch hier eines vorweg: Dieser Relaunch ist im Hinblick auf die Codequalität deutlich weniger erfreulich als der von QSC.

Die Optik der Seite ist für eine Portalseite mit dem üblichen Informationsüberflussgehalt recht angenehm. Die Breite ist fixiert auf 830 Pixel und bleibt bei größerem Fenster mit einem kleinen Rand linksbündig stehen. Dem Betrachter erschließt sich auch hier sehr schnell, worum es bei freenet geht.

Auf Semantik wurde bei freenet kein erkennbarer Wert gelegt. Zwar sind die zahlreichen Links meist in Listen organisiert, das war es dann aber auch schon mit semantischer Auszeichnung. Überschriften konnte ich bei meinem Besuch keine entdecken und in Absätzen stehender Text taucht auch nicht auf. Stattdessen steht eine Überschrift z.B. als <strong class="frn_linkLink">Online-Billard</strong> im Quelltext und der überschriebene Absatz folgt einfach in einem noch weniger sinnvollen SPAN-Element. Der ganze Wust steht mit dem vorausgehenden Bild in einem A-Element. Der gesamte Seiteninhalt ist von einer Layouttabelle umgeben.

Mit ausgeschalteten Grafiken wird die Seite schon schwer navigierbar. Da die Überschriften der einzelnen Linklisten als Grafik ohne ALT-Attribute angelegt sind, fehlt ohne die Grafiken jede Orientierung. Dass es für Nutzer von Screenreadern keine Hilfen gibt, muss da schon fast nicht mehr erwähnt werden.

Ohne die Verschachtelungstiefe der DIVs gezählt zu haben, würde ich jedoch bei freenet von einer noch gravierenderen Divitis ausgehen, als bei QSC. Da es innerhalb dieser DIVs bis auf ein paar eingestreute STRONGs keinerlei sinnvolles Markup gibt, dürfte die Seite für Blinde und für Google gleichermaßen schwer inhaltlich zu erfassen sein.

Dass kein Wert auf valides HTML gelegt wurde, überrascht wirklich nicht. Die Ampersands in den zahlreichen Links sind nicht maskiert. ALT-Attribute fehlen, dafür bekommen INPUT-Elemente jedoch großzügig WIDTH und HEIGHT zugeteilt. IDs werden mehrfach definiert.

Mit ausgeschaltetem JavaScript zeigen sich hässliche Löcher an Stellen, die für interessante Informationen gedacht waren. Ich habe keinen anderen Weg gefunden, um trotzdem an die Infos zu gelangen. Sinnvolle Verwendung von JavaScript sieht für mich deutlich anders aus.

Fazit

Beide Neustarts sind optisch ansprechend, einer ist es auch von seinen inneren Werten her. Wenn man ein Beispiel für einen gelungenen Relaunch sucht, sollte man sich an QSC orientieren und die wenigen angeführten Kritikpunkte beachten.

Der Stefan