Werkstattbericht zum neuen Layout:Facelift in anderthalb Jahren

Wie gestaltet man eine Nachrichtenseite um? Die Layoutreform, die Sie in diesen Stunden auf Süddeutsche.de erleben, ist in einem langen Prozess vorbereitet worden - und noch nicht zu Ende. Einblicke in unsere Designarbeit.

Stefan Plöchinger

Liebe Leserinnen und Leser,

wir haben vor einiger Zeit beschlossen, Sie am besten nicht mehr als Nutzer anzusprechen oder neudeutsch User - sondern als das, was Sie auf unserer Seite in der Regel sind: eben Leser. Ein gängiges Vorurteil ist, dass es im Netz gar keine echten Leser gibt, sondern Leute nur klicken und bunte Bilder sehen wollen. Unsere Erfahrung ist anders. Sie kommen im Vergleich zu vielen anderen Nachrichtenseiten recht häufig zu uns, und Sie bleiben länger als bei den meisten Kontrahenten. Was uns freut und uns schließen lässt, dass Sie sich keineswegs nur fürs Oberflächliche interessieren, sondern gerne in die Tiefe unserer Texte gehen. Jetzt haben wir die Oberfläche unserer Texte reformiert: damit Ihnen künftig das Lesen leichter fällt.

Wie wir dabei vorgegangen sind und was wir uns dabei gedacht haben, wollen wir Ihnen erklären.

Begonnen hat die Reform vor anderthalb Jahren. Damals haben wir unsere Seite kritisch analysiert und beschlossen, Zug um Zug das Layout zu verändern - von außen nach innen: erst die Einzelteile unserer Homepage, dann Nebenseiten wie Fotostrecken, Themenschwerpunkte, Blogs und Videos, zwischendrin die Leserbeiträge am Artikelende und am Ende nun die eigentlichen Artikel.

Facelift

Der Beginn: Skizze eines Think Tanks der Redaktion - welche Möglichkeiten wir beim Gestalten von Artikeln vermissten, wie wir neue Elemente einsetzen wollen, all dies wurde hier festgehalten. Aus solchen Entwürfen leiteten Produktmanagement und Art Direction die Anforderungen ab.

(Foto: SZ)

Das Konzept, das Redaktion, Produktmanagement und Art Direction über all die Monate herausgearbeitet haben, lässt sich auf vier Kernpunkte reduzieren:

1. Decluttering - entrümpeln. Wir glauben, dass Sie auf unsere Seite kommen, um sich schlicht zu informieren, ein bisschen unterhalten zu werden und bei kontroversen Themen auch mal zu diskutieren. Unser Layout muss sich dem unterordnen: Es muss dem Inhalt die Bühne geben, darf nichts Überflüssiges oder Ablenkendes in den Fokus stellen, nicht mit grellen Farben schreien, sondern nur das Wichtigste akzentuieren. Die SZ als Zeitung, die ihr Aussehen ebenfalls gerade aufgefrischt hat, hält es seit Jahren so. Wir haben uns bei jedem Schritt unserer Layoutreformen gefragt: Braucht es dieses oder jenes Element wirklich? Ist es woanders besser aufgehoben? Geht es einfacher?

Facelift

Projektskizzen: Entwurf für simplere Social-Media-Funktionen und andere Neuerungen

(Foto: SZ)

2. Usability - simple Nutzbarkeit. In Deutschland werden Internet-Seiten gerne gelesen, indem Leser von oben nach unten scrollen, wie in einem Blog. Dem soll das Layout unserer Seite gerecht werden. Weshalb wir zum Beispiel die kaum genutzte Randspalte vielerorts abgeschafft haben - so auch im neuen Artikellayout. Wir präsentieren Fotostrecken, Videos oder Grafiken künftig direkt an der passenden Stelle im Text statt am Rande. Wir lassen eine Leiste mit Druck-, Mail-, Social-Media- und anderen Funktionen beim Scrollen fixiert neben dem Text stehen, damit man sie nicht lange suchen muss. Wir präsentieren am Ende jedes Artikels Informationen und Kontaktmöglichkeiten zu Autoren. Wir wollen Ihnen das Lesen und das Nutzen einfach einfacher machen.

Facelift

Schriftvergleich in verschiedenen Browsern: Wie mussten viel testen, damit die SZ Sans auch auf alten Rechnern mindestens so leicht lesbar ist wie früher die Arial oder Helvetica.

(Foto: SZ)

3. Opulenz - Wucht. Computerbildschirme werden größer, Internet-Leitungen schneller. Viele Leser wünschen sich größere Fotos, mehr Videos, interaktive Grafiken oder schlicht eine größere Schrift, damit man Texte auch auf den riesigen Apple-Monitoren noch lesen kann. Blattmachen nennt man das in Zeitungen, und wir sehen in gutem Online-Blattmachen die größte Chance einer Nachrichtenseite, sich von anderen abzuheben. Deshalb auch nutzen wir - einmalig für eine große Site - jetzt die hauseigene Schriftart für unsere Nachrichtenseite: die SZ Sans für Überschriften, Vorspänne und Begleittexte; die SZ Serif für den Fließtext. Dies ist technisch ambitioniert und hat einige Tests in vielen Browsern gebraucht, bis die Schriften auf allen Rechner in etwa so gut oder besser aussehen als Standardschriften.

4. Stringenz - Einheitlichkeit. Mit unserer Hausschrift, aber auch dem neuen Layout insgesamt wollen wir den eigenen Charakter unserer Seite stärken. Den Wiedererkennungswert steigern - so nennen das die Marketingexperten. Entsprechend haben wir das Artikellayout der Nachrichtenseite stark an das der bezahlten SZ-Digital-Apps für iPad und Windows 8 angelehnt. Ob es sich um die Apps handelt, um die Nachrichtenseite Süddeutsche.de oder eben um die gedruckte Zeitung: Überall sollen Sie auf den ersten Blick erkennen, dass das hier Ihre SZ ist.

Solche Prinzipien mögen logisch und alternativlos klingen - sie umzusetzen, ist eine kompliziertere Angelegenheit. Bei einem Produkt wie einer Nachrichtenseite haben viele Menschen mitzureden: die verschiedenen Teile einer Redaktion, die sich keineswegs immer darüber einig sind, was schön und/oder praktisch ist; die Anzeigenkunden, die Platz beanspruchen, und zwar in standardisierten Formen; die Designer, die vieles für selbsterklärend halten, was Usability-Experten lieber erklären würden; und so weiter.

Facelift

Viel zu bedenken: Die Skizze aus dem August zeigt, wie viele Seitentypen alleine bei einer Schriftumstellung betroffen sind (l.) und wie viele Elemente durch das neue Artikellayout grundsätzlich reformiert werden (r.).

(Foto: SZ)

In den vergangenen Monaten haben wir Produktentwicklungsprozesse umstrukturiert und ganze Abteilungen wie Digitales Design neu aufgebaut, mit dem Ziel, die Interessen besser zu kanalisieren und in Projekte zu übersetzen, die unsere Entwickler dann schnell programmieren können. Komplex wurde die Aufgabe, weil wir parallel immer weiter an einem neuen Stylebook für die digitalen Produkte der SZ gearbeitet haben, einem Stilbuch also, das Schrift- und Bildgrößen, Seitenraster und andere Layoutdetails festlegt. Die Prozesse griffen vielfältig ineinander; die Abfolge der Reformschritte - wann fassen wir die Videoseiten an?, wann die Artikel?, wann die anderen Teile? - wurde über die Monate immer wieder angepasst.

Die Überarbeitung des Artikellayouts stand schließlich am Ende des Prozesses, weil hier alles zusammenkam: neue Schriftarten, neu entwickelte Elemente, ein neues einspaltiges Grundraster für die Seite, ein sogenanntes liquides Textlayout, das sich an die Anzeigen im Artikel anpassen kann.

Schauen Sie genau hin: In manchen Texten stehen Fotostrecken oder Videos direkt neben Anzeigen und werden kleiner angezeigt, als wenn keine Anzeige danebensteht. Diese technisch nicht triviale Automatik ermöglicht erst unser neues Layout. Denn wenn die Elemente nicht kleiner werden könnten, müssten wir Anzeigen aus den Texten verbannen - was wir uns nicht leisten können.

Facelift

Aus der Design-Werkstatt: Konzept zur Skalierung von Elementen in Texten

(Foto: SZ)

Generell glauben wir, dass Layouts im Netz wegen der immer größeren, immer vielfältigeren Bildschirme flexibler werden müssen - und dass eine vereinfachte Optik dabei von Vorteil ist. Dass wir im Artikel jetzt keine Randspalte mehr haben, erlaubt es uns zum Beispiel, mit ein paar Korrekturen das Layout gleich auch für Mobilgeräte zu benutzen. Inzwischen gehen wir so vor, dass wie die normale und die Mobilversion unseres Layouts parallel entwickeln, möglichst sogar mobil zuerst, weil der Smartphone-Markt für uns immer wichtiger wird. In wenigen Wochen kommen deshalb auch neue Süddeutsche.de-Apps auf den Markt.

Uns ist bewusst, dass das neue Layout nicht gleich allen Lesern gefallen wird. Wir wollen deshalb genau erklären - mit diesem Artikel - und genau hinhören. Wir haben das nach jedem der vielen Reformschritte in den vergangenen anderthalb Jahren so gemacht. Wir schauen natürlich ständig in unsere Site-Statistiken, ob die schweigende Masse der Leser irgendwelche Teile unseres Angebots plötzlich nicht mehr wahrnimmt. Aber wir bitten Sie gern aktiv um Mails (an hallo@sueddeutsche.de), Tweets (an @SZ oder @ploechinger) oder jegliche andere Rückmeldung, wenn Sie etwas stört oder eine Neuerung schlicht nicht funktioniert.

Wir glauben nicht, dass die Überarbeitung unserer Seite damit abgeschlossen ist. Im Gegenteil: Unsere Technik ist darauf ausgelegt, dass wir spätestens alle 14 Tage Änderungen vornehmen können. Wir verstehen die weitere Entwicklung von Süddeutsche.de als einen Prozess ohne Ende - und freuen uns deshalb, wenn Sie uns jetzt sagen, woran wir Ihrer Meinung nach als Nächstes arbeiten sollen.

Ihr

Stefan Plöchinger, Chefredakteur Süddeutsche.de

Zur SZ-Startseite

Lesen Sie mehr zum Thema

Jetzt entdecken

Gutscheine: