Adventskalender mit Codepen
ab dem 1. Dezember!

Viermal Relaunch und Code aus der Vergangenheit

In kurzen Abständen hintereinander haben wir vier Relaunches von großes Newsseiten zu verzeichnen: Süddeutsche Zeitung, Die Welt, Netzeitung und der Focus.

Ich bin kein Grafiker, deshalb möchte ich mich nicht an optischen Details aufhängen, das machen andere sehr viel kompetenter. Als normaler Nutzer dieser Seiten (okay, ich lese eigentlich nie den Focus) kann ich aber sagen, daß mir die optische Überarbeitung gefällt. Aber was steckt unter der hübschen Haube? DAS ist mein Thema.

In Technikwürze 61 nahm ich mich schon einmal dieses Themas an und konzentrierte mich dabei vor allem auf die Süddeutsche. Schauen wir doch einmal bei allen vier Auftritten unter die Haube. Ein grober Blick bringt die erste erstaunliche Erkenntnis: im Jahr 2007 haben die Süddeutsche Zeitung und die Netzeitung tatsächlich noch ein Tabellenlayout! Ich finde es unglaublich, daß es immernoch Agenturen gibt, die so etwas anbieten und Kunden, die so etwas akzeptieren und kaufen. Sollte die Entschuldigung lauten „das CMS kann nichts anderes ausgeben“, so möchte ich dies erst einmal skeptisch bezweifeln. Zum anderen wäre dies ein Ansatzpunkt, das CMS zu wechseln oder auf den neuesten Stand zu bringen.

Der Focus

Der Focus hatte den Relaunch lange im Vorhinein angekündigt und ich entsinne mich, daß von einer Erneuerung sowohl des Aufbaus als auch der im Hintergrund arbeitenden Technik die Rede war. Da ich die Focus-Seite aus eigenem Erleben nicht gut genug kenne, kann ich über die angestrebte inhaltliche Neustrukturiereung nichts sagen. Optisch kommt der Auftritt auf alle Fälle frischer rüber. Und auch unter der Haube ist das Tabellenlayout verschwunden. Doch besser und sinnvoller ist der Code deshalb noch lange nicht geworden. Es wurden schlicht alle Tabellen gegen DIVs ausgetauscht, die zudem auch noch eine lustige Ansammlung von Klassen beherbergen. Da wird dann vor lauter Begeisterung für die DIVs auch schonmal ein solches in einen Absatz geschachtelt. Das ist nicht nur sinnlos sondern auch nicht statthaft nach den Standards. Es werden Klassen gleich im Familienpack vergeben: <p class="c-gr f-s pd-t5">. Diese Kombination vergibt eine grüne Farbe, eine Schriftformatierung (nur die Schriftarten!) und ein oberes padding von 5 Pixeln. Warum in dem Stylesheet nicht dem gesamten Dokument eine Basisschriftart vergeben wurde, stattdessen diese Definition auf elf Klassen verteilt wurde (die auch noch allgemein und für Links speziell definiert werden) ist ein sehr spezielles Gehemeinis der Ersteller dieses Stylesheets.

Die Styles sind unlogisch, das HTML aber noch viel mehr. Von Semantik keine Spur. Auch wenn ich nicht viel von der Diskussion um „DIVitis“ halte, hier wurde eindeutig über das Ziel hinaus geschossen. Man kann keine semantische Struktur erkennen, stattdessen gibt es ein Wirrwarr an DIVs, die teilweise schlecht verschachtelt sind. Dazwischen gibt es auch mal ein paar Überschriften, Absätze und Listen. Man merkt aber ganz eindeutig, daß sich niemand Gedanken über die Semantik des Dokumentes gemacht hat. „Wir bauen das jetzt alles modern, also in DIVS“, so stelle ich mir die Stoßrichtung der Agentur vor.

Die Netzeitung

Auch die Netzeitung ist optisch angehübscht worden. Allerdings ist das Ergebnis nicht so interessant, wie bei den anderen Kandidaten. Man kann mehr von einem Rebrush sprechen. Die Optik ist netter, aber nicht grundlegend anders als zuvor. Und der Code? Wir sollten eigentlich lieber den Mantel des Schweigens darüber decken. Wir haben 2007 und die Netzteitung baut noch auf ein Tabellenlayout! Und dieses Tabellenlayout kommt ebenso ohne eine wirkliche Semantik aus. Es gibt auf der Startseite keinen einzigen Absatz! Aber inspizieren wir einmal aus Spaß die Topmeldung. Sie befindet sich in einer Tabellenzelle. Die Meldung selber ist ein DIV, die Überschrift – halbwegs korrekt ein h3-Element – ist von einem Link umgeben, was nach den Standards logischerweise verboten ist. Es folgt eine einzellige Tabelle, in die wiederum eine einzellige Tabelle geschachtelt ist. In dieser inneren Zelle befindet sich ein kleines Bild. Dieses ist verlinkt, der Link führt zu einer Vergrößerung des Bildes. Es folgt ein span-Element, das den Teasertext umfaßt! Die Erfindung des Absatzes scheint an den Programmierern vorbeigegangen zu sein. Die unter dem Bild befindlichen beiden Links hat man als Liste erkannt und ausgezeichnet, diese steckt aber in einer einzelligen Tabelle. Diesmal genügte eine einzige Tabelle!

Wenn ich solchen Code sehe, muß ich mich unwillkürlich schütteln. Was machen die Programmierer beruflich? Wo waren sie die letzten Jahre? Haben sie nie ein Buch gelesen, von Weblogs gehört? Es ist mir unbegreiflich, wie man als Profi im Jahr 2007 noch einen solchen Code abliefern kann.

Übrigens stellt sich auf der Artikelseite heraus, daß man bei der Netzeitung doch schon einmal von Absätzen gehört hat. Deren Sinn und Anwendungsweise ist aber offensichtlich nicht bekannt. So finden wir auch hier einen Absatz, in den ein DIV geschachtelt ist. Das Ergebnis ist eine Zwischenüberschrift [<p><div class="zwischentitel">]. Warum nicht h3 oder h4 nehmen?

Die Süddeutsche

Auch die Süddeutsche vertraut im Jahre 2007 dem Mittel des Jahres 1997: dem Tabellenlayout. Das Layout kommnt durchaus erfrischend daher. Dumm nur, daß die Programmierer offenbar nicht ebenso auf der Höhe der Zeit waren, wie die Grafiker. So finden sich auf der Startseite in dem Tabellenverhau zwar auch Absätze, diese sind aber eher an der Stelle von Listenelementen, denn sie werden zur Aufzählung von zur Nachricht passenden Links genutzt. Oder es handelt sich um die Überschrift der seitlichen Boxen. Der Teasertext unter der Überschrift ist auch jedesmal ein Überschriftenelement. Offenbar ist man bei der Süddeutschen bauernschlau, sind doch alle Überschriften der angeteaserten Nachrichten als h1 ausgezeichnet. Da vertraut man offenbar auf die Macht der Masse in Bezug auf Google. Viel Glück.

Bei der Süddeutschen ist man aber auch sparsam, denn bei der Artikelansicht über Beckenbauers Auslassungen sieht man zwar fünf Absätze, im Code kommt man aber mit einem einzigen aus. Klasse, Glückwunsch. So habe ich 1998 auch meine Webseiten erstellt. Doch in der Zwischenzeit habe ich mich erstens weiterentwicklet und zweitens habe ich dies nicht für einen renommierten Auftraggeber getan, den dieser Auftrag sicherlich viel Geld geskostet hat.

Die Welt

Schauen wir nach all dem Grauen mal die Welt an. Die Welt verwendet im Kopfbanner und in der Umfrage in der rechten Spalte Layouttabellen. Die Seite selber ist ohne Layouttabellen gemacht. Auch hier gibt es Absätze, die nicht als Absätze, sondern als span ausgezeichnet sind. Aber die Regel sind sie nicht. Ein Großteil der Seite ist semantisch sinnvoll ausgezeichnet, richtig zufriedenstellend ist aber auch hier das Ergebnis nicht. Denn es ist nicht einsichtig, warum der eine Nachrichtencontainer einen korrekt ausgezeichneten Fließtext enthält und er nächste nicht. Meine Vermutung (aus der täglichen Praxis gespeist) ist, daß hier der Texteditor des CMS zur Fehlbedienung einläd.

Alles in allem kann man aber den Verantwortlichen bei der Welt und den Programmierern ein Kompliment machen. Die Seite ist von allen vier getesteten diejenige mit dem besten Code. Man hat dabei nicht nur den Ballast der Vergangenheit hinter sich gelassen, sondern hat auch noch die Bedienung der Seite durch sinnvoll eingesetztes Javascript zu einer Freude gemacht.

Ich erwarte bei solchen Seiten keine hundertprozentige Validität. Die geht entweder durch schlechte CMS-Editoren flöten oder durch externe Werbung – leider. Jens Meiert hat Recht, wenn er dazu aufruft, endlich diese Werbeungetüme valide zu machen. Wenn wir schon immer von diesen gigantischen Bannern genervt werden sollen, dann sollten diese wenigstens technisch sauber sein.

Fazit

Viel Geld und viel Zeit wurde verbraucht, doch letztlich haben drei von vier Zeitungen versagt. Einzig die Welt legt einen sauberen und zudem noch in Optik und Konzept interessanten Relaunch hin. Alle anderen sollten ihre Agenturen in Regress nehmen, denn einen solchen Mist sollte man im Jahr 2007 nicht mehr abliefern. Ich weiß, ich lehne mich damit sehr weit aus dem Fenster, aber es geht mir um Qualitätsstandards in unserer Branche. Überall werden diese als selbstverständlich angesehen, Unternehmen verpflichten sich zu Qualität. Im Netz scheint das in der Masse nicht zu gelten, selbst bei großen und renommierten Auftritten. Die Gründe können vielfältig sein. Zum einen sind die Auftraggeber selten vom Fach und wissen um die Möglichkeiten, können gut von schlecht unterscheiden. Zum anderen kann natürlich auch „Geiz ist geil“ zurückschlagen: wer die billigste Agentur haben will, kann auch billigen Schrott bekommen. Sollte die Agentur nicht billig sein, so ist es vielleicht deren Personalpolitik! Wenn man den Angestellten wenig bezahlt und keine Fortbildungen finanziert, dann kann man auch nicht ohne weiteres Qualität erwarten.

Letzten Endes bleibt aber immer jeder Webworker selber für die Qualität seiner Arbeit verantwortlich. Man kann sich auch privat fortbilden, das tut nicht weh und ist das Brot vieler Angestellter. Und ich kann mir zudem nicht vorstellen, daß der Projektleiter der Süddeutschen auf die Agentur zugegangen ist und gesagt hat:“Ich möchte aber ein Tabellenlayout haben. Dieses ganze DIV- und CSS-Gedöns ist mir nicht geheuer.“ Also, liebe Kollegen: packt Euch an die eigene Nase und bildet Euch fort. Ein Ausgangspunkt können die Linkliste und die Adventskalender bei den Webkrauts sein. Wichtig ist aber vor allem die Grundeinstellung: Neugier, Neugier, Neugier und niemals glauben, man wisse und könne alles.

Diesen Artikel kann man auch bei den Webkrauts lesen und nur dort kommentieren.

13 Responses to “Viermal Relaunch und Code aus der Vergangenheit”

  1. Eric Eggert sagt:

    Dabei hätte der Focus sich die Semantik nur bei mir abgucken müssen… http://yatil.de/Weblog/der-focus-im-fokus

    🙂

    Im Ernst: Die Unsemantik ist beim Focus noch immer das selbe wie vor knapp 14 Monaten. Es hat sich kaum was geändert. Das ist eine Schande. Wenn ich Markwort wäre würde ich sie alle entlassen. Alle!

  2. Andreas sagt:

    Der Focus hat das neue Layout angekündigt? Ich hab mich nur gewundert, dass Vorgestern die Kommentare abgeschaltet wurden und die Seite gestern dann plötzlich ein bisschen anders aussah. (Focus ist meine Startseite) 😀

    Nunja, optisch sicherlich eine Verbesserung, aber ich musste auch gleich mal schauen, ob sich auch technisch etwas verbessert hat. Das Ergebnis ist aber, wie du ja schon festgestellt hast, mehr als enttäuschend.

  3. molily sagt:

    Einfach nur danke für diesen wichtigen Artikel!

    Ich hatte mir gestern mal das Markup von diesen Sites und anderen großen angeschaut und einige statistische Auswertungen vorgenommen – wenn ich Zeit finde, schreibe ich dazu noch was. Eins vorweg: focus.de ist tatsächlich unter den großen News-/Zeitungs-Sites diejenige mit den meisten div-Elementen in Relation zur gesamten Elementanzahl.

  4. Sylke sagt:

    „Die Welt“ schneidet noch am besten ab. Soso. Sieht dort irgendwie anders aus, als vor 14 Tagen…
    Haben die meinen Artikel (http://www.lausitz-webdesign.de/die-welt-und-rtl.html) gelesen? 😉 Man kann jetzt sogar gefahrlos die Schrift vergrößern…

  5. Perun sagt:

    Alle anderen sollten ihre Agenturen in Regress nehmen, denn einen solchen Mist sollte man im Jahr 2007 nicht mehr abliefern.

    Dies solltest du wirklich mit <strong> da es sehr gut als Kernfazit dienen kann.

  6. Jens Grochtdreis sagt:

    Dieser Artikel ist jetzt auch bei den Webkrauts veröffentlicht. Ich schließe deshalb hier die Kommentare und bitte dort um Kommentierung.

  7. […] Man denkt an Muji und die vielen neugestalteten Zeitungsportale im klaren, bereinigten Stil. Und hat das Gefühl, Qualität in den Händen zu halten, die sich auf mich als Leser und die Inhalte konzentriert. Und darum sollte es gehen, bei Zeitschriften, um Inhalte und um Leser. “Sind alle leser so abgestumpft, dass man sie dauernd anbrüllen muss?” fragt Kommentator erik im fontblog. Nein, finde ich und ich bin als Leser dankbar, dass die PC Pro einen leiseren Ton anschlägt. […]

  8. […] Einen sehr interessanten Artikel hat Jens Grochtreis in seinem Weblog verfasst. […]

  9. […] F-LOG-GE Weblog über Webstandards, das Internet und vieles mehr. « Viermal Relaunch und Code aus der Vergangenheit […]

  10. […] Den vollständigen Artikel von Jens Grochtdreis könnt ihr auf der Webseite der Webkrauts lesen. […]

  11. […] [update]: Auch Technikwürze nimmt sich in der aktuellen Ausgabe dem Artikel von Jens Grochtdreis an, der aufzeigt, dass tabellenbasierte und, keinen Deut besser, zwanghaft tabellen- und semantikfreie Layouts bei Relaunches selbst renommierter Seiten noch immer an der Tagesordnung sind. Womit das Problem sich leider nicht nur auf die überschaubare Klein(st)shopszene von xt:Commerce erstreckt, in der sich diverse verbohrte Entwickler tummeln, die ihren Müll auch noch für der Weisheit letzten Schluss halten… […]

  12. […] Gibt es einen Retro-Trend bei den Webdesignern und -entwicklern oder gibt es wirklich so einen Haufen Nichtskönner, die teilweise für richtig bekannte Firmen Seiten relaunchen? Ich hatte ja schon auf den völlig daneben genangenen Realunch der Süddeutschen Zeitung hingewiesen. Doch der Relaunch des Toom-Marktes schießt demgegenüber noch den Vogel ab. […]

  13. […] Am Ende bleibt leider nur ein weiterer misslungener Relaunch. Qualitätsstandards sind in der Branche leider noch ein Fremdwort und so sparen sich viele Agenturen die Investition in Aus- und Weiterbildung ihrer Mitarbeiter. Für den abgelieferten Pfusch müssen sie sich sowieso nicht verantworten, weil die Auftraggeber, wie schon Jens Grochtdreis festgestellt hat, eben selten vom Fach sind und daher gute nicht von schlechter Arbeit unterscheiden können. 2 mal gelesen Geschrieben von Matt Abgelegt in Web, (X)HTML und CSS […]