Im Interview mit Opennews.org reden drei Mitarbeiter der New York Times über das Redeisgn der Website und die Strategien dahinter. // von Janina Gera

Die New York Times gibt erste Einblicke in ihr neues Online-Design: neue Artikelseiten, sowie Optimierungen und reizvolle Bedienelemente sind auf der gesamten Website zu finden. Opennews.org hat mit den beiden Designern Allen Tan und Renda Morton, sowie dem Entwickler Eitan Konigsburg, die an dem Projekt mitgewirkt haben, über technische Entscheidungen, Designideen und der grundlegenden Strategie hinter dem neuen Auftritt gesprochen. Janina Gera hat das Interview für Netzpiloten.de übersetzt.

Strategie und Gründe

Renda Morton, leitende Produktdesignerin: Wir sind ein sehr großes Unternehmen, das versucht schneller zu sein. Unsere Website ist unsere größte Plattform. Alles auf einmal neu zu gestalten wäre ein Albtraum. Deswegen haben wir uns dafür entschieden, mit der Story-Page zu beginnen und von dort an weiterzumachen. Was am 8. veröffentlicht wird, ist keine neu gestaltete Website, sondern nur eine neu gestaltete Story-Page. Außerdem gibt es kleine Bearbeitungen auf unserer Startseite, den Rubrikseiten und manchen Blogseiten; alles passend zu der Story-Page. Die Story-Page ist die Seite unseres Online-Auftritts, auf der sich die meisten unserer Leser aufhalten. Deswegen haben wir damit begonnen. Unsere Startseite findet oft wenig Beachtung.

Im nächsten Schritt werden die Startseite und die Rubrikseiten bearbeiten, wobei wir hier einen anderen Ansatz haben. Auf der Startseite wiederholen sich die neuen Gestaltungsmerkmale, nach und nach fügen wir weitere Funktionen und Feinheiten hinzu. Diese Neugestaltung ist eine langsame Entwicklung. Die Story–Pages werden stets weiter entwickeln. Wir wollen nicht, dass sie auf einem Stand bleibt und wir dann feststellen, dass wir wieder an dem Punkt angekommen sind, an dem es keine andere Chance gibt, als die Seite komplett zu überarbeiten.

Was möchte dein Team mit der Neugestaltung erreichen?

Renda Morton: Die meisten Prozesse sind noch nicht beendet, aber unsere Ziele sind folgende:

• Schneller zu sein.
• Ein flexibleres und anpassungsfähigeres Auftreten.
• Einheitlichkeit zwischen den Plattformen.
• Es soll für die Redaktion einfacher sein, die Seite zu herzustellen und zu pflegen.
• Für die Leser soll das Navigieren, Lesen, Teilen und Finden von Inhalten einfacher sein.
  Abonnenten zu halten und zu finden.
• Ein attraktives Umfeld für Anzeigen darzustellen.

Was war der Auslöser für das neue Design? Warum gerade jetzt?

Allen Tan: Es geht zum Teil darum, eine längst fällige neue technische Grundlage zu schaffen. Wir können den Legacy Code und Designelemente, die sich seit sechs Jahren (ja, tatsächlich so lange) angehäuft haben, ausmisten. Das bringt uns einen schnelleren und einfacheren Durchlauf.

Eitan Konigsburg: Ja, wir haben so etwas wie eine technische Barriere erreicht, als es darum ging, die Seite auszubauen. Eine Menge technische Schulden haben uns daran gehindert, die Website komplett zu modernisieren. Ein Re-Design zu wagen (ohne dabei die Infrastruktur zu überarbeiten) hätte sich als schwierig herausgestellt. Die Entscheidung für ein neues Design hat uns also die Chance gegeben, auch die technischen Grundlagen zu erneuern. Diese Entscheidungen gingen Hand in Hand. Denn sie haben nicht nur eine regelmäßige Bearbeitung des Designs vorangetrieben, sondern auch relevante Programmierelemente näher zusammen gebracht.

Dies beinhaltet die Nutzung von Github anstelle von SVN für Versionskontrollen, die Schaffung einer Vagrant-Softwareumgebungen, die Einführung von Puppet, die Nutzung von requireJS damit nicht fünf verschiedene Versionen von jQuery geladen werden, geeignete Build/Test Frameworks, die Schaffung von Funktionen in der Kommandozeile zur Erstellung von Grafikobjekten, die Nutzung von LESS mit einer Menge an Mixins, ein angepasstes Grid-Framwork, etc.

Allen Tan: Über Jahre hinweg gab es eine Bandbreite an Custom Types, die für die Startseite und bestimmte interaktive Elemente genutzt wurden – jetzt werden sie systematischer und umfassender genutzt. Dies hilft dem Leser zwischen „hard news“ und „soft news“, sowie zwischen einem Feature und einem Kommentar, zu unterscheiden. Auf der alten Seite, konnte man am Seitenanfang erkennen, um welche Rubrik es sich handelt, jetzt kann man es sogar fühlen.

Wir haben auch mit Matthew Carter an einer Version der Schriftart Cheltenham, die eine größere x-Höhe hat, gearbeitet. So sind Inhalte auch in kleiner Auflösung lesbar (die Proportionen sind eine Mischung der Schriftarten ITC Cheltenham und Georgia). Das hat den Erkennungswert erhalten und ist gleichzeitig gut lesbar.

Die großen Herausforderungen

Was waren die größten Herausforderungen, denen ihr während der Gestaltung und dem Ausbau der Website begegnet seid?

Renda Morton: Die größten Schwierigkeiten beim Design sind unser interner Prozess und unsere Struktur. Auf unserer Website treffen Bedürfnisse der Nachrichten-Redaktion auf ökonomische Ziele und Forderungen, sowie auf die Bedürfnisse und Erwartungen der Leser. Hier gibt es Überschneidungen, aber in der Regel müssen Kompromisse geschlossen werden. Das ist die Herausforderung. Manchmal ist man sich nicht sicher, ob es funktioniert. Alles andere, auch wenn es schwer ist, bereitet uns weitaus weniger Probleme.

Eitan Konigsburg: Viele Herausforderungen. Auch wenn wir von den Entwicklungen der Web-Browser sehr begeistert sind, gibt es immer noch Bereiche, in denen sich Design nicht gut mit den technischen Bedingungen vereinbaren lässt. Ein bekanntes Beispiel ist das Laden der richtigen Bildgröße (für Design / Seitenlayout – Zwecke, zusätzlich zur Performance), angesichts der Darstellungsfeld-Größe beim Nutzer. Mithilfe von JavaScript kann man damit umgehen, aber es ist (noch) nicht HTML spezifisch.

Ein weiteres Beispiel ist der Versuch, einen Weg zu finden, Inhalte nicht zu nah beieinander erscheinen zu lassen. Unsere Seiten versuchen Text- und Bildinhalte gleichmäßig zu verteilen (nachdem Inhalte nicht mehr in Seiten unterteilt werden, kann es zu sehr langen Webseiten kommen), aber auf schmäleren Bildschirmen erschienen sie oft zu nah beieinander. Das Web geht mit diesen hochkomplexen Layout Bedingungen nicht gut um. Der Trick dabei war, herauszufinden, wie Visual Testing eingesetzt werden kann. Abhängig vom Inhalt einer Seite gibt es eine Unmenge an möglichen Layouts/Konfigurationen, die dynamisch berechnet werden. Es hat viele Mühen gekostet, jedes Set an Möglichkeiten gut aussehen zu lassen.

Allen Tan: Die Layouts wurden so gestaltet, dass sie flexibel sind – wir müssen weg von einzelnen, feststehenden Templates, hin zu Konfigurationen, die folgendes beachten: sich ändernde Ansichten von Inhalten, die Größe des Darstellungsfeldes des Nutzers (sowie weitere Nutzer-Einstellungen), und eine große Vielfalt an Anzeigentypen. Die Website muss all diese Anforderungen zusammenbringen. Bis jetzt gibt es 126 Versionen und sobald mehr Eigenschaften hinzugefügt werden, sollen weitere dazu kommen.

Eitan Konigsburg: Außerdem ist es eine Herausforderung, eine Software-Umgebung zu schaffen, in der sich JavaScript-Widgets, auf der Basis bestimmter Ansprüchen, verhalten und interagieren können, ohne dabei um Website-Ressourcen zu kämpfen. Wir mussten eine Möglichkeit finden, Informationen auf Page-Level allen Widgets zur Verfügung zu stellen, um zu verhindern, dass sie individuell die Arbeit verdoppeln. So reagieren Widgets auf Zustandsänderungen von anderen Widgets, zum Beispiel auf die Anpassung bei geöffneter Kommentarspalte oder wenn der News-Alarm erscheint.

Letztendlich entwickeln unsere Grafik und Interactive – Teams wirklich fantastische (und manchmal sogar preigekrönte) Geschichten, die auf unseren Seiten funktionieren müssen. Es ist also nicht nur eine Herausforderung, eine gänzlich separate Anwendung in eine Seite einzubauen, es ist auch ziemlich schwer es einzurichten, dass sie auch bei fortschreitender Entwicklung von Web (und Web-Browsern) gut funktioniert.

Gibt es irgendwas technisch Unübliches, das im Verborgenen vor sich ging?

Eitan Konigsburg: Bemerkenswert ist das, was nicht Unüblich ist. Intern haben wir an fast allen Stellen unseres Systems Änderungen vorgenommen, vor allem weg von firmeneigenen Lösungen hin zu Standard-Lösungen. In Anbetracht der technischen Geschichte der Website, ist das etwas unüblich für uns. Ich glaube, dass vieles, das bei diesem Re-Design erreicht wurde, ohne die großartigen technologischen Lösungen der letzten Jahre nicht möglich gewesen wäre.

Wie viel Beachtung haben Anzeigen bei der Umgestaltung der neuen Artikel-Seiten bekommen?

Renda Morton: Werbung ist ein Kernteil unserer Website, deswegen wurden Anzeigen genauso beachtet wie alles andere.

Ablauf und Messung

Wie stellt sich euer Team zusammen? Wie habt ihr mit den vielen Redakteuren der Zeitung – und weiteren Designern – an dieser Neugestaltung zusammengearbeitet?

Renda Morton: Circa 40 Personen haben Vollzeit an diesem Projekt gearbeitet. Insgesamt waren mehr als 80 Arbeitskräfte nötig. Es gab Gestalter, Entwickler, Repräsentanten aus der Nachrichtenredaktion und der Wirtschaftsabteilung. Alle vier Gruppen waren im Arbeitsablauf involviert und präsent. Das Projekt hat fast zwei Jahre gedauert und die Art unserer Zusammenarbeit hat einiges geändert und entstehen lassen.

Allen Tan: Das digitale Designer-Team umfasst etwa 25 Personen, circa zehn arbeiten am Re-Design, davon sind mindestens vier bis fünf von Anfang bis Ende involviert, andere waren immer wieder kurzzeitig dabei. Wir haben ein wöchentliches „Show-and-tell“ – Treffen, bei dem die Mitarbeiter ihren Arbeitsprozess offenlegen und erklären können. Diese Treffen waren wegen der vielen, verschiedenen Arbeiten interessant – so hatten wir einen Überblick über die verschiedenen Arbeitsprozesse, darüber hinaus war kein weiterer formaler Prozess nötig.

Wie erkennt ihr ob das neue Design erfolgreich war?

Renda Morton: Wenn folgende Dinge passieren, dann sind wir gut.

• Schneller zu sein.
• Ein flexibleres und anpassungsfähigeres Auftreten.
• Einheitlichkeit zwischen den Plattformen.
• Es soll für die Redaktion einfacher sein, die Seite zu herzustellen und zu pflegen.
• Für die Leser soll das Navigieren, Lesen, Teilen und Finden von Inhalten einfacher sein.
  Abonnenten zu halten und zu finden.
• Ein attraktives Umfeld für Anzeigen darzustellen.

Anmerkung: Die Fragen und Antworten wurden geringfügig in Länge und Stil durch die Autoren von Knight-Mozilla OpenNews geändert, später hinzu gekommene Informationen wurden ergänzt.

Das Interview erschien zuerst auf Opennews.org und steht unter Creative Commons Namensnennung 3.0 (CC BY 3.0). Der Artikel wurde übersetzt von Janina Gera.

Teaser & Image by The New York Times