Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

WELT ONLINE am Relaunchen

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

WELT ONLINE am Relaunchen

WELT ONLINE hat nach 18 Monaten erneut einen Relaunch online gebracht. Sylvia Egger sieht sich das permanente Relaunchen an und was das für Webstandards bedeutet.

WELT ONLINE hat es wieder getan: einen Relaunch durchgezogen. Das Web ist schnell, der Kundengeschmack schneller, die Technik am schnellsten. Da greift der klassische Relaunch zu kurz. Früher machte man so was alle Jubeljahre. Heute steht die Webseite unter einem permanenten Relaunchen. Was aber ändert sich durch diese Permanenz? Die gute Nachricht: Es ist gut für die Akzeptanz von Webstandards. Die schlechte Nachricht: Es ist schlecht für die Nachhaltigkeit.

WELT ONLINE Screenshot Portalseite

Das Augenfällige

Konnte man vor 18 Monaten dem Relaunch der Welt noch mit großer Aufmerksamkeit folgen – schließlich ist der Übergang von Tabellen- zu DIV-Layout immer noch eine Attraktion -, muss man jetzt schon sehr genau hinsehen. Ins Auge fallen sofort drei Neuerungen: Die linke Navigation ist in Gänze in den Kopf der Webseite verlagert worden, die Webseite ist zentriert und in der Größe völlig elastisch skalierbar. Das inhaltliche Konzept der Navigation ist zwar jetzt optisch besser strukturiert, weil einzelne Bereiche getrennt vorliegen, aber inhaltlich ist der Zusammenhang nicht immer nachvollziehbar. Dieser "Trend zur Zentrierung" von Webseiten wird aber durch die "schwimmwestenähnlichen Banneranordnung" (Quelle: praegnanz.de) unterlaufen.
Eine Bildschirmauflösung von 1024 x 768 Pixel mag schon weniger werden, aber horizontales Scrollen sollte dennoch vermieden werden. Da die Bannerordnung links und rechts den eigentlichen Inhalt in die Zange nimmt, scrollt die Seite horizontal. Auch wenn der eigentliche Inhalt nicht in diesem Scrollbereich liegt, fällt der Scrollbalken unangenehm ins Auge. Auf den Folgeseiten wird auf das Scrollen verzichtet, immerhin. Die zangenhafte Bannerwerbung ist für den Nutzer sehr präsent, da sie an drei Positionen bewegten Inhalt einfügt. Das elastische Layout ist auch auf den zweiten Blick gut umgesetzt, einzig den Bildern sieht man ihre Skalierbarkeit leider an. Aber das ist der bekannte Pferdefuß dieses Layouttyps.

Noch weniger Layouttabellen

Der Vergleich mit dem letzten Relaunch zeigt, dass die klassische Layouttabelle richtiggehend verschwindet. Waren dort noch im Hauptinhaltsbereich Tabellen, sind sie jetzt nur noch in den Teaser- und Modulbereichen zu finden. Die Vermutung liegt nahe, dass es sich um Fremdmodule handelt, die schlicht mit Tabellen angeliefert und eingebaut werden. So ist es zwar semantisch völlig korrekt, für die tabellarische Ansicht des Livetickers eine Tabelle zu verwenden. Aber dafür gibt es im Standard die Datentabelle, die auch entsprechend auszuzeichnen ist. Keine der tabellarischen Daten ist jedoch mit einer Tabellenüberschrift versehen worden. Es wurden schlicht herkömmliche Layouttabellen adaptiert. Dadurch ergeben sich so unschöne Konstrukte, dass in Layouttabellen dann mit H- und P-Elementen semantisch nachjustiert wird. Herkömmliche Layouttabellen finden in Modulen wie Börsenticker und Werbung leider immer noch zuviel Anwendung. Besonders schade ist, dass im Modul „Meistgelesen – Meistkommentiert“ die Inhalte sehr gut semantisch ausgezeichnet sind, aber zur Positionierung der Boxen eine Layouttabelle verwendet wurde.

Noch bessere Semantik

Den Vergleich braucht auch die Aufarbeitung der semantischen Struktur nicht zu scheuen. Wurde im letzten Relaunch noch verstärkt auf DIV-Konstrukte zurückgegriffen, um semantische Strukturen abzubilden, ist jetzt eine hohe semantische Korrektheit angestrebt worden. Das zeigt sich in zwei Bereichen besonders: in den dynamischen Inhalten und der Überschriftenhierarchie.
Man spürt richtig, dass im CMS auf eine durchgängige Semantik Wert gelegt wird. Auch wenn der HTML-Validator für die Portalseite über 300 Fehler auswirft, kann man sie sehr stark eingrenzen. Einige Listenelemente werden nicht richtig geschlossen, dabei handelt es sich sicherlich um einen dynamischen Templatefehler. Der HTML-Editor im CMS scheint nicht ganz XHTML-konform zu arbeiten, weil diverse nichtgeschlossene IMG- und BR-Elemente angemahnt werden. Ansonsten ist die Semantik konsequent und sinnvoll durchgehalten: So hat jeder Absatz sein P-Element, eine Überschrift ihr H-Element und Listen sind als solche ausgezeichnet. Wünschenswert wäre noch ein gewisser Feinschliff. Dass ein ganzer Artikel keinerlei kursive oder fette Elemente aufweist und Zitate nicht extra hervorgehoben und ausgezeichnet werden, ist eher ungewöhnlich und noch aufzuarbeiten. Besonders die Stiefkinder der Semantik machen einen Text nicht nur im Web lesens- und hörenswert.

WELT ONLINE Screenshot Überschriften-Hierarchie

Quelle: WELT ONLINE Überschriftenhierarchie, erstellt mit Webdeveloper Tool

Auch in der Überschriftenhierarchie wurde noch mal kräftig nachgelegt. So war vorher fast alles auf die H2-Überschrift konzentriert und beschränkte sich auf nahezu eine plane Ebene. Diverse Überschriften waren nicht mit H-Überschriften ausgezeichnet. Dieser Relaunch lässt keine Überschrift unausgezeichnet, die Hierarchie ist tief und umfasst die ganze Webseite. War vorher auf der Artikelseite nur der Inhalt des Artikels mit Überschriften versehen, sind jetzt alle Seiten durch ein Gesamtkonzept aufgearbeitet.
Tiefe und Umfang der Überschriften-Hierarchie erreichen aber auch einen kritischen Punkt. Gerade die Portalseite ist durch die unzähligen Inhaltsmodule ohnehin sehr voll, sieht man sich das in Überschriften an, wird das dann schnell unübersichtlich und schreit nach weniger ist mehr. Diverse Schachtelungsfehler rücken Inhalte falsch ein, erschweren das Verständnis und die vielen Navigationsmöglichkeiten verlängern die Überschriften-Hierarchie unnötig. Dadurch ergeben sich auch inhaltliche Doppelungen. Überschriften sind wichtig, keine Frage. Aber wenn man etwa auf die Bereichsüberschrift in den Teasern verzichten würde, hätte man im Portalbereich schon eine schnellere und bessere Übersicht. Da sie auch noch semantisch unterhalb der Überschrift des eigentlichen Artikels angesiedelt ist, entsteht bei der Durchsicht – Screenreader-Nutzer orientieren sich auch an der Hierarchie von Überschriften – ein Springen zwischen H3- und H2-Überschriften. Der Nutzer kann den Zusammenhang zwischen Bereich und Artikelüberschrift dann nur noch schwer erfassen.

Auffällig ist auch der Versuch, für eine barrierefreie Optimierung zu sorgen. So finden sich am Anfang der Seite Sprunglinks, mit denen man zu Hauptnavigation, Suche und eigentlichem Hauptinhalt direkt springen kann. Für jeden Navigationsblock ist weiters eine Überschrift vorgesehen und erlaubt vor der eigentlichen Navigation, zum nächsten Block weiterzuspringen. Grundsätzlich ein lobenswerter Ansatz, aber durch die vielen Navigationen ist das ein endloses Springen. Besser wäre es, wenn man nur den Sprung zum Hauptinhaltsbereich anbietet, noch besser schlicht nur Sprunglinks. Hier ist auch weniger mehr.

WELT ONLINE Screenshot CSS Datei

Quelle: WELT ONLINE CSS Datei

Das Steckprinzip ist nicht nachhaltig genug

Eine im wahrsten Sinne des Wortes gewichtige Überarbeitung ist das partielle Ersetzen des Grid-Frameworks Blueprint CSS. Ein Designstudio wurde mit den neuen Templates beauftragt. Es setzt auf dem alten Blueprint-Framework auf, macht es elastisch und packt die eigenen CSS-Inhalte noch mit dazu. So verständlich dieser Ansatz ist, so elastisch ist nun das Ergebnis. Die CSS-Datei trägt den Stempel des permanenten Updatens, ab jetzt wird einfach nur noch dazugelegt. Ganz abgesehen davon, dass die CSS-Angaben des alten Grids dadurch nahezu obsolet sind, hat die Größe der Datei kräftig zugelegt: von 88 auf 120 Kb. Die Frage darf gestellt werden, wie soll der nächste Relaunch aussehen, wird wieder draufgesteckt? Gerade wenn man den Sprung zu einem elastischen Layout macht, auch noch wesentliche CSS-Klassen anfasst und unzählige ID- und Klassennamen verändert, hätte man besser auf dieses Prinzip verzichten sollen. Nicht nur, dass sich CSS-Klassen permanent überschreiben, wird auf viele Browser-Hacks und auf das Attribut !important zurückgegriffen. Was eine weiteren Relaunch nicht einfacher machen wird.

Fazit

So erfreulich die Tendenz des permanenten Relaunchens für Einsatz und Akzeptanz von Webstandards ist, so schwierig ist die Handhabung und Optimierung von Standards auf Dauer. Je schneller und größer die Anforderungen an eine Webseite und ihre Pflegbarkeit werden, desto schwieriger ist es, sich für die richtige Lösung und Nachhaltigkeit zu entscheiden. Der Relaunch von WELT ONLINE zeigt zwar, wo der Weg hingehen muss. Nur die konsequente Einarbeitung von Webstandards erzeugt Nachhaltigkeit. Auf lange Sicht muss jedoch auch hier ein Konzept erarbeitet werden, wie Standards sicher und nachvollziehbar durchgehalten werden können. In etlichen Aspekten werden Standards noch zu üppig eingesetzt, da wäre Umsicht mehr. Nur ein umsichtiger Einsatz bringt mit sich, dass der Relaunch nach vorne geplant werden kann. Ein Framework durch ein anderes zu überschreiben, ist nur halbgar. Denn Webstandards sollen sich schließlich auch entfalten können.

Den Relaunch 2007 von WELT ONLINE hat Jens Grochtdreis besprochen und ein Interview mit dem Verantwortlichen Peter Schink geführt.

Das Bild zur CSS-Datei wurde zur Klarstellung ausgetauscht.

Kommentare

tobs
am 18.09.2008 - 00:01

Komisch, ich habe nur das Reset Stylesheet vom Framework benutzt, als ich die Styles geschrieben habe. Die ganzen import Anweisungen im Screenshot sind auskommentiert. Den grid Teil habe ich gar nicht verwendet, also auch nicht wieder überschrieben....

Permanenter Link

Thiemo
am 18.09.2008 - 09:04

Fünfmal taucht in diesem Beitrag hier das Wort "elastisch" auf. Aber wenn ich versuche, mein Browserfenster zu verkleinern oder zu vergrößern, passt sich Welt.de nicht daran an. Kein Wunder: Der Inhaltsbereich ist mit der Angabe "width: 852px;" auf eine pixelgenaue Breite festgenagelt, min-width und max-width fehlen. Was hat das mit "Elastizität" zu tun? Welt.de und Heise.de sind nach wie vor "optimiert für 1024". Von einem elastischen Verhalten kann keine Rede sein. Gut, es wird zentriert. Aber an der Idee, Weißraum gleichmäßig zu verteilen, ist nun wirklich nichts Neues. Das wurde sogar mit Tabellenlayouts schon gemacht.

Permanenter Link

Thiemo
am 18.09.2008 - 09:15

Korrektur: Der Inhaltsbereich ist mit der Angabe "width: 71em;" auf eine Breite festgenagelt, min-width und max-width fehlen. Unter "elastisch" verstehe ich eher das, was beispielsweise YAML.de realisiert.

Permanenter Link

Max
am 18.09.2008 - 09:29

Hallo,

mich würde zum Abschnitt "Noch bessere Semantik" interessieren, wie man das Markup aufbauen sollte, wenn es so wie im Screenshot dargestellt, nicht richtig ist. Ich habe es bisher auch immer so gemacht, würde aber gerne noch dazu lernen. :-)
Freue mich über Kommentare und Links zum Thema.

Viele Grüße
Max

Permanenter Link

MiSc
am 18.09.2008 - 09:52

@"Pferdefuß dieses Layouttyps"
Ich hab mal damit experimentiert, Bilder als Hintegrund darzustellen und mit overflow nur einen Ausschnitt zu zeigen. Dieser Ausschnitt vergrößert sich mit der Skalierung. Ganz spannend.
Nachteil: es müssen größere Bilddaten geladen werden.

Permanenter Link
Eric Eggert

Eric Eggert (Webkraut)
am 18.09.2008 - 10:51

@Thiemo: Elastisch bedeutet mit der Textgröße mitwachsend und das tut welt.de. Du meinst ein fluides Layout, und das hat welt.de schlicht nicht.

@Max: Siehe im Adventskalender von letztem Jahr: Jan Eric Hellbusch, Struktur von Überschriften.

Permanenter Link
Sylvia Egger

Sylvia Egger (Autor)
am 18.09.2008 - 11:10

@tobs
Ich habe jetzt nicht im Feindetail nachgesehen, was vom Blueprint-Framework übrig ist. Klar ist, dass die Agentur ab so 300 Zeilen mit ihren neuen CSS-Klassen beginnt. Darüber ist das was, was von Blueprint übrig ist. Das war mein Einwand. Das hier aufgesteckt wird. Und klar ist, dass sich dann etwa Überschriften überschreiben, weil die eben oben auch schon mit Attributen angelegt sind.

Ich sehe das Problem auch nicht bei der Agentur, sondern eher prinzipiell. Wie geht man mit diesen schnellen, aufeinander folgenden Relaunches um. Setzt man dran, bleibt man bei einem Framework, versucht man alles schlank zu halten oder setzt man auf permanente Vererbung.

Das Problem sehe ich ja auch in anderen Kontexten wie ExtJs. Das Javascript-Framework arbeitet auch mit massivem Überschreiben und das CSS ist mitunter kaum mehr wirklich zu bearbeiten.

Mich interessiert nicht, eine Agentur oder WELT ONLINE negativ herauszustellen. Mich interessiert, wie man mit grossen Portalen umgeht, die durch viele Updates ihre Nachhaltigkeit wahren müssen. Wie geht man da ran. Das wäre eher eine Serie hier wert. Dies sollte der Anstoss dafür sein, sich grundsätzlichere Fragen zu stellen.

Permanenter Link
Sylvia Egger

Sylvia Egger (Autor)
am 18.09.2008 - 11:14

@Max
Der Screenshot zur besseren Semantik ist korrekt, so sollen Überschriften strukturiert sein.
Es ging mir darum, zu zeigen, dass die Verschachtelung von Überschriften auch ausgereizt werden kann, wenn man eben alles in Überschriften packt. Vor diesem Problem stehe ich auch immer mal wieder und semantisch wären das auch immer Überschriften, aber, wenn man im Blickwinkel hat, wer die Hierarchie nutzt, sollte man auch immer mal abspecken und haushalten.

Portale sind auch wirklich problematisch, weil voll und dadurch stark überschriftenlastig.

Permanenter Link

tobs
am 18.09.2008 - 12:53

@sprungmarker

Stimmt, das Thema ist interessant und da kann und sollte man diskutieren. Wenn man allerdings seine allgemeine Kritik an einem Beispiel festmacht, dann sollte man sich das Beispiel auch ansehen. Die Überschrift hier lautet eben welt. de und als solches werden die Leute den Artikel auch erstmal lesen.

HIer wurde und reset stylesheet verwendet und eben kein Framework. Das ist eine Diskussion für sich. Aber eben eine andere, als die über Frameworks. Ich verstehe, worauf du hinaus willst, du soltest aber acht geben, dass deine Diskussion auch prinzipiell bleibt, wenn die eine prinzipielle Diskussion haben möchtest.

Für die besprochenen Parteien ist das vielleicht kein "Feindetail", wenn du auf etwas dein Fazit aufbaust, das gar nicht verwendet wird.

Dein Steckprinzip passt nicht

Permanenter Link

Peter Schink
am 18.09.2008 - 14:18

Danke für die ausführliche Kritik unserer Arbeit. Wir bemühen uns, trotz vieler nicht barrierefreier Dinge möglichst gute Arbeit zu leisten (@tobs sei Dank :).

Zum Einwand, die Welt habe kein fluides Layout: Da sprechen leider schon die Werbeformen dagegen....

Permanenter Link
Sylvia Egger

Sylvia Egger (Autor)
am 18.09.2008 - 17:35

@tobs

Hm - jetzt wird es langsam kritisch. :) Ich möchte das jetzt nicht vertiefen, weil sonst würdest auch Du einiges revidieren müssen. Ich möchte Dir nur ein Stichwort dazu sagen: Deine auskommentierten CSS-Dateien von Blueprint finden sich in Auszügen - was davon nicht mehr da ist, müsste ich tiefer recherieren - genau nach dem @import wieder. Ich habe das verglichen mit den ursprünglichen Blueprint-Dateien, die ja am Server dort noch liegen. Daher habe ich die Frage gestellt, warum diese Inhalte oben nicht importiert werden, aber darunter sehr wohl wieder - mitunter aufs Pixel genauso - eingefügt sind. Aber darüber möchte ich hier nicht reden.

Ich habe mich gefragt - und das darf ich hier bei einer Rezension eines Relaunches -, welche Intention hinter dieser Aufarbeitung stand. Freilich kann ich da nur spekulieren. :) Was ich auch getan habe. Ich lasse mich da gerne gegenkorrigieren. Wenn man sich die History der Relaunches von Welt ansieht, stösst man unweigerlich auf das Blueprint-Framework. Rudimente, wie üppig auch immer, sind nach wie vor vorhanden. Warum sollte man jetzt über diesen Zwischenzustand nicht diskutieren?

Was Du mir jetzt nachzuweisen versuchst ist, dass ich meine Hausaufgaben nicht hinreichend gemacht habe. Dem ist nicht so. Ich denke so genau hat sich lange keiner die Styles von Welt angesehen. ;) Der Screenshot ist leider falsch gewählt worden.

Dass meine Rezension nicht nur auf diesem argumentativen Pfeiler beruht, kann man in der Anmoderation lesen. Es geht um Webstandards und Nachhaltigkeit. Und mein Fazit bezieht sich schlicht auf beide Aspekte.

Permanenter Link
Sylvia Egger

Sylvia Egger (Autor)
am 18.09.2008 - 17:45

@Peter Schink
Ja, ich finde auch, dass der Relaunch einen wirklich wichtigen Schritt nach vorne gemacht hat, so habe ich das auch in der Rezension klar zu machen versucht. :)

Es sind immer Punkte, die noch zu optimieren sind. Das ist bei jedem Projekt der Fall, besonders bei großen Portalen. Und Barrierefreiheit war ja auch sicherlich nicht das Ziel, aber es sind schon wesentliche Vorbereitungen dafür getroffen.

Fluides Layout ist bisweilen noch kritischer einzusetzen als elastisches.

Permanenter Link
Sylvia Egger

Sylvia Egger (Autor)
am 18.09.2008 - 21:33

Nochmal allgemein zur Klärung:

Es geht hier nicht um Blueprint und was davon jetzt tatsächlich noch im CSS verwendet wird. Wir gehen da wohl auch von unterschiedlichen Ansätzen und Definitionen aus, ab wann wird ein Grid zu einem Grid. :) Daher kann ich @tobs Einwurf schon nachvollziehen.

Es geht mir darum, dass für zukünftige Updates jetzt ein Zwischenzustand erreicht ist, der kritisch werden kann, vor allem aufgrund der Redundanzen und !important-Fixierungen. Nicht mehr und nicht weniger.

Permanenter Link

Frank
am 28.09.2008 - 19:00

Die Schwimmweste wirkt wirklich seltsam. Trotz des Trends zur Zentrierung, überzeugt mich hier ein Konzept wie bei SPON - linksbündig, Werbung am rechten Rand - deutlich mehr.
Kompliment zu dieser Aufarbeitung. Da kann Welt Online sich teure Gutachten sparen und erstmal die Vorschläge hier überdenken :)

Permanenter Link

Diablo
am 29.09.2008 - 14:36

Ich finde die Änderungen recht gut gelungen. Die Banner würde ich aber anders positionieren, da sie schon sehr viel Platz für Content klauen. Da die Subnotebooks / Netbooks immer verbreiteter werden, sollte man die kleinen Auflösungen nicht ganz ignorieren.

Permanenter Link

Sebastian
am 04.10.2008 - 18:22

Also ich finde schon, dass die Umstellung gelungen ist. 100% Fehlerfrei bekommt man solche Seiten eh nur schwer, weil man den Usern meist auch was bieten will und die schönen Sachen oft nicht gut für Barrierefreiheit u.s.w. sind. Man sollte halt aufpassen, dass es keine extremen Fehler gibt.

Permanenter Link

Struppi
am 19.10.2008 - 20:44

Eine Bildschirmauflösung von 1024 x 768 Pixel mag schon weniger werden, aber horizontales Scrollen sollte dennoch vermieden werden.

Ist das noch nicht zu den Webkrauts vorgedrungen? Was hat die Auflösung mit der eine Internetseite zu tun? Zumal z.b. EeePcs weniger haben.

Aber dank AdBlock, läßt sich welt online auch in einem Fenster betrachten, dass nicht im Vollbild ist.

Permanenter Link
Eric Eggert

Eric Eggert (Webkraut)
am 19.10.2008 - 21:50

Struppi: Und trotzdem ist es nicht möglich mehr Pixel auf einmal zu sehen als 1024x768 – und wenn die Seite breiter ist muss man scrollen, egal ob man den Browser im Vollbild nutzt oder nicht.

Permanenter Link

modbo
am 22.10.2008 - 17:02

Schöner klarer Aufbau, Sehr professionell gemacht. Beim
ständigem Relaunchen besteht aber auch die Gefahr der Wiederholung. Auch ist ein Wiedererkennungswert gerade wegen der grossen Konkurenz wichtig.

Permanenter Link

Robert Hartl
am 30.10.2008 - 00:57

Was spricht auch gegen permanente Verbesserung? Das meiste findet sowieso vom normalen Leser unbemerkt unter der Haube statt. Zudem finde ich rein optisch abgesehen von der Bannergeschichte Layout, Lesbarkeit besser als vorher gelungen.
Etwas bedauerlich finde ich, dass sich die bekannten Online-Magazine zunehmend optisch annähern. Etwas mehr Diversifizierung wäre hier aus meiner Sicht gefragt und spannend zugleich.

Permanenter Link

Daniel Schweiz
am 07.11.2008 - 14:55

Ich sehe das Problem auch nicht bei der Agentur, sondern eher prinzipiell. Wie geht man mit diesen schnellen, aufeinander folgenden Relaunches um. Setzt man dran, bleibt man bei einem Framework, versucht man alles schlank zu halten oder setzt man auf permanente Vererbung.

Permanenter Link

Isabela
am 09.11.2008 - 17:32

Letztes Jahr hatte auch FAZ ihren Relaunch, den ich erstmal vor allem auf Usability als Online-Leser getestet habe: Neue Layout und Seitenstruktur erfordern erstmal Umgewöhnung und diese sollte schon belohnt werden, vielleicht durch Vereinfachung der Navigation. Dies ist es allerdings nicht der Fall.

Permanenter Link

Die Kommentare sind geschlossen.