Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Relaunch von Stern.de

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

Relaunch von Stern.de

Das Netz ist immer in Bewegung, und alle paar Jahre wird es Zeit für einen großen Relaunch. So auch neulich beim Stern. Peter Rozek wirft für uns einen Blick hinter die Kulissen. Wie steht es um Webstandards und Barrierefreiheit bei stern.de? Für ein paar Überraschungen ist die Website auf jeden Fall gut.

Mit dem Relaunch will Gruner + Jahr zu den Nachrichtenseiten Spiegel und Bild.de aufschließen. Der Stern bietet neben relevanten Nachrichten zum Tagesgeschehen auch Hintergrundberichte, viele Fotos und informative Unterhaltung. Die Zielgruppe besteht überwiegend aus Männern zwischen 20 bis 49 Jahren, die überdurchschnittlich gebildet sind. Für den Relaunch wurde nicht nur das Design überarbeitet, auch konzeptionell und inhaltlich wurden Themen und Ressorts stärker miteinander verknüpft. Die Website wirkt nun deutlich aufgeräumter und hinterlässt einen guten Eindruck. Das Farbschema ist auf ein paar wenige Farben reduziert worden, Linienführung und Designraster sorgen für eine übersichtliche und großzügige Darstellung der Themen.

Startseite des Stern

Quelle: Screenshot der Startseite vom 04.09.2009

Neues und frisches Design

Beim Design fallen gleich mehrere Dinge ins Auge, ich beschränke mich allerdings auf ein paar Details. Die Hauptnavigation ist nun deutlich besser positioniert, farblich akzentuiert und trägt somit zu einer besseren Nutzerführung bei. Beim alten Auftritt war die Hauptnavigation noch sichtlich zwischen dem Aufmacher und den Nachrichtenteasern eingequetscht. Bilder werden stärker in den Fokus gerückt. Der Onlineauftritt will in Zukunft durch bildgewaltige Fotoreportagen beeindrucken. Eine bildstarke Aufbereitung des Contents war offensichtlich eine der Leitideen im neuen Konzept.

Störend fallen dagegen die grauen Icons auf, die einem gerade zu ins Auge springen. Die Icons wurden vom alten Auftritt übernommen und vergrößert. Als eine Art Leitfunktion sollen sie den Nutzer z.B. auf Artikel, Bilder, Videos oder andere Inhalte hinweisen. Eine kleinere Darstellung wäre ausreichend und ebenso informativ gewesen. Bei der Typografie hat man einen guten Weg gefunden. Für die Überschriften und den Newsticker wurde die Georgia gewählt. Eine schöne Serifenschrift, die auf dem Bildschirm gut zu lesen ist und klare Akzente setzt. Beim Fließtext wird konsequent die gute alte Arial verwendet. Als positiv empfinde ich, dass bei der Vollansicht der Artikel die Schrift merklich größer ausfällt und der Text somit gut zu lesen ist.

Eine ausführliche Betrachtung zum Design findet sich im Designtagebuch.

Qualitätsunterschiede, zwischen Visualisierung und Webstandards

Dem normalen Besucher reichen die Inhalte, das Design und die Usability aus. Wir als Webkrauts legen natürlich Wert darauf, dass auch »unter der Haube« alles ordentlich aussieht. Wie gut haben die Webentwickler gearbeitet? Wurde auf Webstandards, Semantik und Barrierefreiheit geachtet? Wichtige Fragen, die wir nacheinander beantworten wollen.

Im Headbereich des HTML-Dokuments fallen gleich zwei Dinge ins Auge. Es wird der Kompatibilitätsmodus-META-Tag verwendet, damit wird der Internet Explorer 8 veranlasst, sich wie der Internet Explorer 7 zu verhalten. Gutes HTML kommt ohne diesen META-Tag aus und braucht bei einem kompletten Relaunch nicht verwendet zu werden. Dies ist umso mehr verwunderlich, weil bei der Umsetzung offensichtlich das YAML-Framework als Ausgangsbasis verwendet wird. Ein weiterer Kritikpunkt ist die hohe Anzahl an verlinkten und importieren Stylesheets. Durch die angehängten Parameter wird zudem das Caching verhindert.

<meta http-equiv="X-UA-Compatible"
content="IE=EmulateIE7"/>

Die Website wirkt insgesamt ein wenig nach rechts gerückt, wird aber über das CSS zentriert. Dieser Trend zur Zentrierung (praegnaz.de) wird bei Nachrichtenseiten in erster Linie dazu genutzt, damit der linke Bereich für Bannerwerbung frei bleibt. Bei einer Bildschirmauflösung von 1024 x 768 Pixel entsteht ein kleiner horizontaler Scrollbalken, der sich aber nicht störend auswirkt.

W3C-Validator gibt für die Startseite 22 Errors und 12 Warning(s) aus. Die Zahlen sagen zunächst wenig aus, man muss sich die Fehler genauer ansehen. Dabei stellt man fest, dass die Fehler größtenteils Kleinigkeiten sind, die auf fehlende Zeichencodierung zurückzuführen sind. Der Test von zwei weiteren Inhaltsseiten über den Validator des W3C fällt ähnlich positiv aus.

Webentwickler, die Webstandards nach vorne entwickeln, achten nicht nur auf valides HTML. Professionalität bedeutet bei der Verwendung von HTML ebenso auf Semantik und Zugänglichkeit zu achten. Bei den letztgenannten Punkten enttäuscht die neue Website. Eine gute Grundlage (YAML-Framework) wird verschenkt.

Semantik

Die semantische Struktur eines HTML-Dokuments spielt nicht nur für Suchmaschinen eine wichtige Rolle. Semantik verleiht nicht nur Struktur, sondern transportiert zugleich wichtige Informationen. Das HTML beim Stern verfügt leider über keine sinnvolle und informationsgetriebene Dokumentenstruktur. Eine durchgängige und schlüssige Überschriftenhierarchie ist nicht vorhanden. Für Absätze wird zwar das p-Element genutzt und Listen sind entsprechend ausgezeichnet, aber nicht konsequent.

Outline der Stern.de-Seite durch die Web Developer Toolbar

Quelle: Stern.de, Überschriftenhierarchie Startseite, erstellt mit Webdeveloper Tool

Auf der Startseite ist zum Beispiel nur eine Überschrift zu finden. Die Zeile „News am <datum>“ wird als h1 ausgezeichnet. Auf eine hierarchische Dokumentengliederung wurde verzichtet, stattdessen hat man für die Überschriften sinnfreie HTML-Konstruktionen gebaut.

<a class="h2" title="Meldungen einer […]"
href="url">
<span>SPD</span>
<span class="boxHeadline">
Brodelnd in die Niederlage
</span></a>

Das Beispiel zeigt sehr deutlich, wie es nicht sein soll. Klassennamen sollen nicht die Formatierung eines Elements beschreiben! Werden ID- und Klassennamen vergeben, sollen diese entweder generisch sein oder die Funktion des Elements beschreiben. Im gezeigten Beispiel bekommt der Hyperlink den Klassennamen h2
und die eigentliche Überschrift wird mit einem span-Element versehen, das den Klassennamen boxHeadline trägt. Wer standardkonform entwickelt kennt die HTML-Spezifikationen und weiß, dass Überschriften über die Elemente h1 bis h6 ausgezeichnet werden.

Eine semantisch bessere Lösung sieht so aus:

<p><strong>SPD</strong></p>
<h2><a href=”url”>
Brodelnd in
die Niederlage
</a></h2>

Alternative:

<h2><span>SPD</span> <a href=”url”>
Brodelnd in die Niederlage
</a></h2>

Der Relaunch zeigt, wie wichtig gute Coderichtlinien im Agenturworkflow sind, damit Entwickler standardkonform arbeiten und informationsgetriebenes HTML schreiben. Mit kontinuierlichen Code-Reviews hätte man zudem die Semantik des erstellten Quellcodes gewährleisten können. Eine sinnvolle Überschriftenhierarchie zu schaffen, ist bei großen Nachrichtenportalen mit den verschiedenen Teasern und Newsbereichen nicht einfach, aber keine unlösbare Aufgabe.

Barrierefreiheit.

Leider hat man sich für den Relaunch keine Gedanken zur Barrierefreiheit gemacht. Eine Website wird nicht barrierefrei, wenn Sprungmarken vorhanden sind oder die Schriftgröße über vorgegebene Steuerelemente angepasst werden kann. Eine gute barrierefreie Website berücksichtigt viele Leitgedanken und Richtlinien der Barrierefreiheit, daher werde ich nur auf ein paar Punkte eingehen. Die folgenden Darstellungen umfassen nicht alle Aspekte der Barrierefreiheit, sondern es werden ein paar Mängel skizziert.

Es gibt keine konsistente Überschriftenhierarchie, die ein Screenreader erkennen und anspringen kann. Der Nutzer wird gezwungen, sich die gesamte Seite vorlesen zu lassen. Die Umsetzung einer logischen und konsistenten Überschriftenhierarchie würde die Navigierbarkeit und Lesbarkeit für Screenreadernutzer deutlich verbessern (siehe Semantik).

Die Schriftgröße kann mittels eines Javascript-Tools direkt über die Website angepasst werden. Die Funktion befindet aber sich ausschließlich auf den Artikelseiten und stellt sich schnell als Mogelpackung heraus. Die Schriftgröße lässt sich nicht stufenlos verkleinern oder vergrößern, zudem können nicht die gesamten Inhalte vergrößert werden, sondern nur ein kleiner Teil. Dies bedeutet, dass die Funktion für den Nutzer eigentlich wertlos ist. Der eigentliche Grund für stufenlos skalierbare Schrift wurde leider nicht verstanden. Wird die Website über die Zoomfunktion moderner Browser vergrößert, führt dies zu keinen Darstellungsproblemen. Ist die Zoomfunktion nur auf die Schrift eingestellt, kommt es auch hier zu Darstellungsproblemen. Inhalte überlagern sich und die die Icons werden deutlich störender.

Ansicht der Stern.de-Titelseite bei vergrößertem Text

Nur der Text wurde vergrößert.

Auch bei der Navigation über die Tastatur versagt der Stern. Es werden zwar die Sprungmarken eingeblendet, aber spätestens ab der Hauptnavigation wird dem Nutzer nicht mehr deutlich angezeigt, wo sich der aktuelle Linkfokus befindet. Bei einer so großen Seite wie dem Stern verliert man automatisch die Orientierung, wenn man als Nutzer auf die Tastatur angewiesen ist.

Fehlende Kontraste zwischen Text und Hintergrund führen an einigen Stellen zu Problemen, gleiches gilt auch für die grauen Buttons mit weißer Schrift. Menschen mit eingeschränkter Sehkraft können die Inhalte nur bedingt wahrnehmen.

Auf der Seite wird Javascript für die Tabcontainer und Swingteaser genutzt. Wer die Website mit dynamischen Elementen ausstattet, sollte daran denken, dass die Verfügbarkeit von Javascript nicht immer vorausgesetzt werden kann. Bei abgeschalteten Javascript werden die Inhalte in den Swingteasern nicht mehr angezeigt und die Tabcontainer funktionieren nicht. Für eine bessere Barrierefreiheit sollten Inhalte auch bei abgeschalteten Javascript zugänglich sein. Insgesamt wäre eine bessere Codequalität und mehr Zugänglichkeit wünschenswert gewesen.

Mobile Version

Offensichtlich hat man bei der Konzeption auch an eine mobile Version gedacht. Daher ein abschließender und kurzer Blick auf die mobile Website. Optisch macht die Website einen soliden Eindruck, auf die Icons hätte man zugunsten einer besseren Übersicht verzichten sollen. Zum Teil sind die Icons sehr schlecht zu erkennen und eher störendes Beiwerk als nützliche Information. Informationsstruktur und Navigation wurden zugunsten einer einfachen Nutzung auf mobilen Endgeräten optimiert. Bei der Codequalität wurde allerdings weniger großen Wert auf Wartbarkeit und Standardkonformität gelegt. Mit Tabellen und Inlinestyles wurde nicht gegeizt.

Fazit

Hinsichtlich Konzeption und Gestaltung hat der Relaunch Pluspunkte sammeln können. Ein deutlicher Kritikpunkt bei der Gestaltung ist die symbolische Überladung durch die Icons. Der optisch positive Eindruck wird allerdings durch die mangelnde Codequalität und fehlende Semantik wieder verspielt. Das ist schade, weil die Website gestalterisch in weiten Teilen gelungen ist. Dies führt zu dem Schluss, dass bei der Webentwicklung Code-Richtlinien und qualitätssichernde Maßnahmen gefehlt haben. Das ist unverständlich, weil die Standards schon lange vorhanden und bekannt sind. Ebenso gibt es genügend Konzepte und Empfehlungen, wie man bei der Umsetzung qualitätssichernde Maßnahmen und Barrierefreiheit in den Workflow integrieren kann. Mehr Qualität hätte einen gewissen Maßstab gesetzt, an dem sich andere Nachrichtenseiten orientieren könnten.

Auch wenn Barrierefreiheit beim Stern nicht gefordert wird, wäre eine barrierefreie Umsetzung ein deutliches Qualitätsmerkmal gewesen. Der einfache Zugang zu Informationen und insbesondere zu Nachrichten ist für jeden Nutzer wichtig. Das gilt insbesondere für Menschen mit Behinderungen, die von einer barrierefreien Umsetzung deutlich profitieren. Gerade beim Thema Barrierefreiheit ist die Beratungs- und Sachkompetenz der Agentur gefragt. Der Relaunch zeigt, dass Kommunikations-Agenturen für dieses Thema noch stärker sensibilisiert werden müssen.

Kommentare

Thomas Scholz
am 04.09.2009 - 16:48

Die Parameter an den Stylesheet-URLs verhindern nicht das Caching generell, sondern nur das ungewollte. Ein kurzer Test belegt auch, daß der gecachte Stylesheets zwar nicht gegen das ETag validiert werden, aber immerhin gegen Last-Modified.

Ansonsten ein guter Überblick. Ich finde die Erfindung des rel="follow" noch bemwerkenswert: Es unterstützt deine die von dir aufgelisteten Hinweise darauf, daß Markup beim Stern bestenfalls als Nebensache betrachtet wird, die niemand wirklich verstehen muß. Schade.

Permanenter Link

Jannik
am 05.09.2009 - 01:24

Sehe ich das richtig, dass im gesamten Beitrag nicht ein einziges Mal ein Link zu stern.de auftaucht?

Permanenter Link
Peter Rozek

Peter Rozek (Autor)
am 05.09.2009 - 10:23

@Jannik

Tatsächlich, kein Link zur Sternseite. Danke für den Hinweis. In dem Artikel findet sich jetzt auch ein Link zum Stern.

Permanenter Link

Monika
am 06.09.2009 - 09:51

ich bin keine Stern Leserin muss ich vorausschicken, doch neugierig durch diesen Artikel ging ich nachsehen:
mich erschlägt deren Startseite - ich hatte noch keine Zeit strukturiert heruasfinden zu könnenwieso--davon kann frau ja was lernen ;)

Die Seite ging auch und ich merkte ich ging in meinem Sessel zurück.

So als erster Gedanke kam mir da ist nie Platz, da klebt alles beisammen - und ja diese Icons find ich auch doof, schlicht weil mir als Leser ganz ehrlich sowas von egal ist wo welcher Artikel dazugehört - mich interessiert in einer Zeitung der Artikel an sich.

Schade find ich,dass zu solchen Reviews immer nur die großen genommen werden, aber dies ist vermutlich eine Frage des Marketings für solche Artikel

lg und Danke für das *Einblicknehmenkönnen*

Monika

Permanenter Link

Jens Grochtdreis
am 07.09.2009 - 09:54

@Monika: Natürlich kommt man bei einem Relaunch einer bekannten Webseite eher darauf, einen Review zu schreiben und zu lesen. Wegen der Verbreitung hat der natürlich auch eine gewisse Relevanz.

Aber das heißt nicht, wir würden uns nicht auch andere Seiten anschauen können, wenn es sich lohnt. Denkst Du an eine bestimmte Seite? Und wenn ja: warum sollten wir sie besprechen? Anregungen sind uns immer willkommen.

Permanenter Link
David Maciejewski

David Maciejewski (Webkraut)
am 07.09.2009 - 10:13

Die hässlichen Icons kenne ich ja bereits aus der iPhone-App des Stern. Und an diesen erkennt man auch, dass beim Stern Designer beschäftigt sind, die nicht wirklich einen Sinn für Design haben. Mich persönlich lenken diese Icons unglaublich vom Inhalt ab. Es gilt immer noch der Grundsatz „Content rules”.
Das einzig positive, dass ich dem stern.de nun attestieren kann ist die Tatsache, dass auf der Startseite endlich diese unnützen Fotos nackter Frauen verschwunden sind. Aber ein Ersatz in Form von Icons wurde ja gefunden. Ich surfe gern weiterhin woanders.

Permanenter Link
Peter Rozek

Peter Rozek (Autor)
am 07.09.2009 - 15:59

@David, @Monika

Mich persönlich lenken die Icons ebenso ab. Die Seite würde deutlich gewinnen wenn man darauf verzichtet hätte. Vielleicht wollte man ja einen gewissen Wiedererkennungswert erhalten. ;-)

Vielleicht hätte die Agentur für den Relaunch ein paar Nutzertests durchführen sollen. Ich wäre nicht erstaunt gewesen, wenn dabei herausgekommen wäre, das auch andere Nutzer die Icons eher störend als hilfreich empfunden hätten.

Letztlich ist das eine Frage, wie die Agentur Nutzertests einschätzt und bewertet. Man muss ja nicht gleich aufwendiges Eye-Tracking oder Interviews beschreiten. Einfaches Guerilla-Testing mit Silverback hätte bestimmt ein paar interessante Ergebnisse zu Tage gefördert. Vielleicht hätte man auch ein paar Designvergleiche machen sollen.

Permanenter Link

Mike Sch.
am 09.09.2009 - 11:24

Die Icons sind mit nach meinem Geschmack etwas too much, wäre es nicht sinnvoller gewesen diese universeller einzusetzen anstatt an jedem Fitzel son' Icon zu klatschen?
Nichts desto trotz lese ich den Stern sehr gerne...

Permanenter Link

Matthias
am 15.09.2009 - 02:57

Angenehm lesenswerter Artikel, nur was Gorilla-Testing mit Bildersack ist, hättest du in deinem Kommentar noch nachschieben können. :-)

Permanenter Link

Die Kommentare sind geschlossen.