Relaunch der Süddeutschen Zeitung - unter die Haube geschaut
Seit heute präsentiert sich die Süddeutsche Zeitung im neuen Gewand. Das weckt mein Interesse, denn schliesslich lese ich sie nicht nur hin und wieder gerne. Ich nehme sie in meinen Schulungen und Vorträgen auch immer wieder als leuchtendes Negativbeispiel. Zusammen mit dem Stern, denn beide Seiten zeichnen Überschriften auf der Startseite nicht als solche aus.
Ich war also gespannt, ob der Relaunch nicht nur ein attraktives Äußeres, sondern auch einen besseren Code gebracht hat. Neben den fehlenden Überschriften waren auch immer sinnfreie oder englischsprachige Alternativtexte für Bilder zu sehen. Möglicherweise hat die Redaktion auf die Pflege der Bilderdatenbank keinen Einfluss, ich weiss es nicht. Alternativtexte gehörten jedenfalls nicht zur Stärke der Datenbank.
Banale Fehler sollten nicht vorkommen
Im neuen Auftritt fallen eine Reihe Bilder auf, die mehr oder minder dekorativ sind und deshalb nicht zwangsweise einen Alternativtext benötigen. Deshalb sollte man ihn einfach leer lassen. Bei der Süddeutschen fehlt das Attribut. Damit wird Screenreadernutzern der Bildername vorgelesen.
Tabellen kann man mit Attributen gestalten, sollte man aber nicht. Jeder Frontendentwickler, der sich mit CSS gut genug auskennt, käme nicht auf die Idee, so etwas zu tun. Und da jede Zelle eine Klasse hat, spricht auch nichts dagegen, CSS die Kontrolle zu überlassen. Es sei denn, man will auch extrem abseitige Browser wie Netscape 4 noch unterstützen. Doch darüber sollten wir nicht ernsthaft diskutieren, oder?
Ergänzt wird das Bild schludrigen Codes durch die sechsfache Nutzung der selben ID innerhalb der Navigation. Hin und wieder die eigene Arbeit zu validieren hilft ungemein. Ich habe für sowas einen Grunt-Prozess. Dabei wäre auch aufgefallen, dass die Süddeutsche zwar das time-Element nutzt, aber nicht mit dem dazugehörigen Attribut. Dann kann man es auch gleich lassen. Denn ohne das Attribut ist es in der genutzten Form nicht maschinenlesbar und damit nutzlos. In einem anderen Fall wurde das falsche Zeitformat in das eigene Attribut data-time gesetzt, anstatt das korrkete datetime zu nutzen. Es wäre auch aufgefallen, dass einem Bild als Attribut width="100%" mitgegeben wurde. Das Prozentzeichen gehört hier nicht hin. Für solche Fälle haben wir CSS.
Übrigens: würden die Bilder zumindest ein leeres Alt-Attribut bekommen, die doppelten IDs entfernt werden und die time-Elemente die korrekten Attribute mit dem korrekten Format bekommen, wäre die Seite fast fehlerfrei.
Und die Überschriften?
Kommen wir also zu meiner Ausgangsfrage: wie sieht es mit Überschriften aus? Auf der Startseite finden sich ein paar. Es sind aber nicht die, die wir erwarten. Im Megamenü sind ein paar Überschriften vierter Ordnung verstreut. Dann kommt das Logo als Überschrift erster Ordnung. Dem Logo folgt sinnloserweise eine h4, die das Kürzel "sz.de" umfasst. Der Sinn dieser Aktion erschliesst sich mir nicht. Es muss also etwas mit SEO zu tun haben.
Nun folgen Überschriften zweiter Ordnung, die Bereichsüberschriften darstellen, wie bspw. "Artikel aus dem Ressort München". Die eigentlichen Artikel haben allerdings keine Überschriften. Stattdessen sehen wir Links mit eingeschachtelten Inline-Elementen:
<a href="ein-toller-link.html" class="entry-title" rel="bookmark" data-pagetype="STANDARD_ARTICLE" data-id="1.2406293">
<strong>
Starke Konjunktur
</strong>
<em>Steuereinnahmen steigen rasant</em>
</a>
Optisch sieht dieses Arrangement auf der Starseite folgendermassen aus:
[caption id="attachment_2774" align="alignnone" width="570"]
Der Stern hat ebenso solche Konstrukte. Da schienen die Entwickler nach aussen ihre Hilflosigkeit dokumentieren zu wollen, indem sie den Überschriften eine Klasse h2 mitgaben. Jedesmal, wenn ich solche Konstrukte sehe, stelle ich mir die Frage nach dem Sinn. In einem Kommentar zu einem Artikel von Marco Zehe wird der Eindruck erweckt, zumindest in der letzten Iteration der Süddeutschen wurde aus SEO-Gründen auf Überschriften verzichtet. Das hört sich widersinnig an, denn schliesslich kann Google (andere Suchmaschinen interessieren in Deutschland nicht) mit semantischem HTML etwas anfangen und goutiert es sogar. Meine Frage an zwei SEO-Experten und eigene Recherchen brachten auch keinen Beweis für die These, viele verlinkte Überschriften wären nachteilig.
Und selbst wenn dem so wäre: erstens ändert Google sowieso alle paar Monate den Algorithmus. Was einmal als Gesetz galt, kann dann abgestraft werden. Zweitens schreiben wir Webseiten idealerweise für Menschen, nicht für Maschinen. Und drittens ist HTML in erster Linie Handwerk. Der Verzicht auf Überschriften ist schlechtes Handwerk.
Auf den Unterseiten sieht es nur wenig besser aus. Aus dem seltsamen Konstrukt von oben wird tatsächlich eine h2. Allerdings werden dabei zwei unterschiedliche inhaltliche Ebenen miteinander verwoben und nur durch ein strong voneinander getrennt.
<h2>
<strong>
Starke Konjunktur
</strong>
Steuereinnahmen steigen rasant
</h2>
Besser wäre gewesen, beide Texte als unterschiedliche Überschriften zu interpretieren, die sie auch sind. Eine Überschrift ist eine inhaltliche Klammer.
<h2>Starke Konjunktur</h2>
<h3>Steuereinnahmen steigen rasant</h3>
Unter "Starke Konjunktur" kann man sich noch weitere Artikel vorstellen, deshalb funktioniert diese Überschrift als eigene inhaltliche Klammer.
Die Bildunterschriften bekommen nun auf einmal auch Überschriften und reihen sich somit in die Logik der eigentlichen Zwischenüberschriften ein. Das dürfte für Screenreadernutzer verwirrend sein. Es ist auch nicht gerechtfertigt.
Validität und Überschriften sind doch unwichtig
Man mag einwenden, dass ich kleinlich bin, wenn ich richtige Attribute, richtig eingesetzte Elemente anmahne und mich an fehlenden Überschriften aufhänge. All das sind Zeichen für richtig oder falsch geschriebenes HTML. HTML hat zwei Ebenen: die syntaktisch richtige Anwendung und die inhaltlich korrekte Anwendung. Das Attribut datetime muss richtig geschrieben werden und Überschriften als solche ausgezeichnet werden. So einfach ist das.
Genauso einfach ist es mit der Anwendung der deutschen Sprache. Sie muss syntaktisch korrekt genutzt werden, das nennt man Rechtschreibung. Und sie soll inhaltlich Sinn ergeben. "Wechselstaben verbuchteln" ist witzig, weil es mit dem zweiten Aspekt spielt. Als seriöse Tageszeitung sollte ein solcher Unsinn allerdings nicht der Normalfall sein.
Aber warum wird eine falsche Schreibweise bei den Inhalten nicht akzeptiert, bei HTML scheint dieser Aspekt hingegen egal zu sein?
Was noch so auffällt
Die Seite wartet mit Conditional Comments für den IE 10 und den IE 11 auf. Dummerweise wurden die Conditional Comments mit dem IE 10 abgeschafft.
Auf der Artikelseite wird anstatt eines header-Elements ein section-Element genutzt. Das macht keinen Sinn. Die neuen semantischen Elemente, die mit HTML5 eingeführt wurden, scheinen bei der Süddeutschen bekannt zu sein. Doch leider wurde ihr Sinn und ihr Einsatzzweck nicht verstanden. Auch das ist schlechtes Handwerk.
Responsive? Bleib mir fort!
Zum Schluss, nach all der Codeorgie, interessiert mich, ob die Süddeutsche nicht nur optisch, sondern auch konzeptionell modern ist. Insbesondere bei solche Massenseiten wie der Süddeutschen sollte es selbstverständlich sein, dass ein Relaunch auch ein responsiver Relaunch ist. Aber wir befinden uns in Deutschland. Hier ist die Internet-Infrastruktur mittelmäßig bis schlecht, unsere sogenannten Eliten haben keine Ahnung vom Medium und unsere Nachrichtenhäuser scheinen mehrheitlich ängstlich dem Internet gegenüber zu sein.
Die Süddeutsche bringt keinen responsiven, eher einen adaptiven Webauftritt. Wenn ich das richtig sehe, wird mittels Browsersniffing die Notwendigkeit für ein mobiles CSS erkannt. Beschönigend wird sowas auch RESS genannt. Kann man machen, ist zumindest besser, als die mobile Extra-Seite, die bspw. die Frankfurter Rundschau präsentiert und die zudem extra hässlich ist.
Ich wünsche mir, dass es auch in Deutschland ein offenes, modernes Verlagshaus oder Rundfunkanstalt gibt, das wie der Guardian und die BBC in England ihren Entwicklungsprozess öffentlich dokumentieren und dabei sogar neue Techniken entwickeln und propagieren. Es wird, so fürchte ich, ein Wunschtraum bleiben.
Fazit
Alle meine Ausführungen lesen sich sicherlich für manche wie Krümelkotzen, kleinlich und oberlehrerhaft. Aber mein Punkt ist, dass Frontendentwicklung ein Handwerk ist. Es folgt relativ einfachen Regeln, die all diejenigen beherrschen sollten, die es ausüben. Perfektion gibt es in der Frontenentwicklung nicht, dafür gibt es zuviele Zweifelsfälle im Bereich Semantik. Und manchmal muss man wegen des Designs Kompromisse eingehen und einen zusätzlichen Container um den Inhalt legen. Aber abseits dieser Kompromisse sollte man sich um guten Code bemühen. Wer das nicht will oder kann, sollte keinen Frontendcode schreiben. Dazu gehört zuallererst Selbsterkenntnis und daneben die passende Erkenntnis der Vorgesetzten.
Im Falle der Süddeutschen spricht nichts gegen guten Quellcode. Ansätze sind ja da, denn HTML5 scheint prinzipiell bekannt zu sein. Das Team dürfte nicht klein gewesen sein. Der Auftraggeber ist finanziell potent genug, sich auch externen Rat über Codequalität holen zu können. (Ich habe das selber schon bei einem ähnlich großen Projekt für einen Fernsehsender gemacht.) Und die Projektdauer von zwei Jahren spricht auch dafür, dass man nicht unter enormem Zeitdruck im Frontend stand. Trotzdem ist kein wirklich gutes Ergebnis dabei herausgekommen. Die Optik gefällt mir, aber die ist nur die halbe Wahrheit. Handwerklich ist die neue Sueddeutsche.de nicht gut.
Nachtrag
Während der Abfassung dieser Analyse, die doch länger als geplant wurde, kam mir ein Link zu dem Magazin "Wired" unter. Ich las das Interview mit Sascha Lobo und da ich gerade bei der semantischen Analyse der Süddeutschen war, interessierte mich die Überschriftenstruktur von Wired. Überschriften scheinen eindeutig überbewertet zu sein, denn Wired besitzt keine einzige. Das ist miserables Handwerk. Das Augenmerk lag offenbar nur auf der Optik. Dagegen ist der Code der Süddeutschen ja richtig gut.
- ← Previous
Linkfutter 196 - Next →
Linkfutter 197 - Australische Konferenzen