Relaunch ARD-Angebote

5 x 5 – ARD setzt bei Relaunchs auf Responsive Design

Relaunch ARD-Angebote
Bild:colourbox.com/ARD.de

Die ARD macht ihre Webportale fit für die Zukunft. Gestern wurden gleich fünf ARD-Onlineangebote umfassend relauncht. Ein Multi-Plattform-Relaunch, der Zeichen setzt, vor allem in Sachen Responsive Design. Es könnte die von vielen Webdesignern und -entwicklern erhoffte Initialzündung sein, die das Thema Responsivität von Webangeboten nachhaltig befeuert. Hier mein Eindruck vom Erstbesuch der neuen Angebote.

Kurzer Rückblick: Als das ZDF vor ziemlich genau einem Jahr den Relaunch von ZDF.de und Heute.de ankündigte, waren die Erwartungen an das neue, minimalistische, mobile und vom Bewegtbild getrieben Konzept groß. Wie sich später herausstellen sollte (dt berichtete), konnten diese Erwartungen allerdings ob der Mängel bezüglich der Technik (Ladezeit, Performance!) und dem Design (Handhabe, Darstellung) nicht oder nur bedingt erfüllt werden. Der Nachrichtenüberblick im Kopfbereich von Heute.de ist nicht wirklich das, was man sich als Informationssuchender wünscht. Derlei Animationen stören nur. Die Texthäppchen sind zudem nicht das, was man von einem Fernsehsender erwarten darf. Ich war gespannt, ob sich die ARD in ähnliche Spielereien verliert oder ob sie es besser macht.

Fünf auf einen Streich

ARD.de, Tagesschau.de, Sportschau.de, Boerse.ARD.de und DasErste.de – alle Angebote wurden innerhalb nur eines Tages relauncht. Wahrlich kein Kleinigkeit. Die Ausfälle hielten sich, soweit jedenfalls meine Beobachtung, in Grenzen. Ein per Twitter an die ARD-Redaktion weitergegebener Fehler wurde zwischenzeitlich behoben, sodass anzunehmen ist, dass ähnliche Kinderkrankheiten ebenfalls zeitnah ausgestanden sein werden.

Webformate in Konfektionsgrößen

Alle Onlineangebote setzen ganz auf Responsive Design – eine Entwicklung, die man nur begrüßen kann. Der Aufbau der Seiten orientiert sich automatisch am jeweiligen Endgerät, mit dem ein Nutzer das Angebot aufruft. Jeder Webauftritt skaliert in fünf Stufen, die dem Nutzer in Form von Konfektionsgrößen erklärbar gemacht werden: XS = Smartphones, S = Smartphones + kleinere Tablets, M = iPad und ähnlich große Tablets, L = Desktop (1024px) und XL = Fernseher. Anfänglich wurde für Nutzer von Breitbildmonitoren noch die XL-Größe ausgeliefert. Offenbar nahm sich die ARD die Kritik der Webnutzer zu Herzen, denn rasch wurde auf die L-Größe als Standard für alle Desktop-Anwender umgestellt. Ein Webauftritt mit einer Breite von 1430 Bildpunkten ist selbst für großformatige Monitore in der Tat gewöhnungsbedürftig. Bleibt die Frage, ob zusätzliche Apps wie die Tagesschau-App angesichts dieser Fülle an Formaten überhaupt noch erforderlich sind.

Was hat sich geändert?

Neben der automatischen Anpassung des Formats war vor allem auch die stärkere Ausrichtung hin zum Bewegtbild Triebfeder der Relaunch-Maßnahmen. „Dieser Schritt bedeutet eine klare Positionierung: Videos und Audios sind unsere Stärke. Diese stellen wir mehr heraus“, so Lutz Marmor, Vorsitzender der ARD. Auf Tagesschau.de befindet sich nun oberhalb der Topmeldung ein Slider-Modul mit vier aktuellen Videos. Reine Text-Bild-Nachrichten treten in den Hintergrund.

Größere Bilder und Texte haben alle neuen Webauftritt gemein. „Wir haben uns mit den anderen Redaktionen zusammengetan und ein gemeinsames Design entwickelt, so dass wir künftig als zusammengehörige Familie leichter erkennbar sein werden.“ so Andreas Hummelmeiter, Redaktionsleiter Tagesschau.de. Die Arbeit keinesfalls erleichtert haben dürfte dabei der Umstand, dass die Redakteure jeweils mit unterschiedlichen Contentmanagmentsystemen arbeiten, welche an die gestiegenen Anforderungen angepasst werden mussten.

Die wichtigste Änderung aus Sicht der Nutzerführung ist die Verlagerung der Hauptnavigation weg vom linken Rand hin in den oberen Bereich. Verspätet folgt die ARD damit einem seit vielen Jahren anhaltenden Trend. Die jeweiligen Portale kommen nun ohne einen grafischen Header aus, die bislang das jeweilige Angebot im Sinne eines Absenders gekennzeichnet hatten. Stattdessen erhielt jedes Portal eine Hintergrundgrafik, die über eine feste Position verfügt, sodass sie auch beim Scrollen im sichtbaren Bereich bleibt.

Schade, dass in diesem Zusammenhang nicht auch die horizontale Navigationsleiste beim Scrollen sichtbar bleibt, etwa wie beim ebenfalls kürzlich relaunchten ARTE.tv. Gerade die Bedienung auf Smartphones würde so erleichtert werden, da sich das Wischen zurück nach oben erübrigte. Nicht alle iPad-Nutzer wissen, dass sie solch einen Sprung auch vollziehen können, indem sie auf die Uhr tippen. Übrigens werden weiter unten befindliche Bilder erst dann geladen, wenn sie wirklich erforderlich sind, der Nutzer also weiter runter scrollt. Auch dies ein Grund für die vergleichsweise gut Performance.

Die Usability verbessert wurde hingegen an einer anderen Stelle. Da nun (endlich) zwischen verlinktem und nicht-verlinktem Text farblich unterschieden wird, sind Links sofort als solche erkennbar. Eine signifikante Verbesserung! Sensitive Texte sind blau, nicht-verlinkter Text fortan schwarz dargestellt. Die Hausschrift der ARD, die Thesis, kommt nun als Webfont zum Einsatz, und nicht nur, wie in vielen Fällen, lediglich als Überschrift, sondern, soweit ich das überblicken konnte, tatsächlich im gesamten Webauftritt. Auch darin hebt sich die ARD vom ZDF ab, dessen von  Erik Spiekermann und Ralph du Carois gezeichnete ZDF-Schrift zwar als Überschrift zu gefallen weiß, in geringen Schriftgrößen und in digitalen Anwendungen jedoch schnell an ihre Grenzen stößt. Nicht so die Thesis, die unabhängig von der Größe und vom Endgerät für ein klares und sauberes Schriftbild sorgt.

Beteiligt an dem fünfachen Relaunch waren die jeweiligen Redaktionen in der ARD. Der Gesamt-Relaunch wurde komplett Inhouse entwickelt. Für Konzeption, Gestaltung und Realisierung sind die Redakteure, Grafiker und Techniker der beteiligten fünf Redaktionen verantwortlich. Lediglich in Sachen Projektmanagement holten sich die Redaktionen Unterstützung von außen.

Fazit

Die übliche, anfängliche Negativkritik seitens der Stammleser („Verschlimmbesserung“) dürfte schon bald abebben. Insgesamt hinterlässt das neue Design der ARD-Onlineangebote einen sehr positiven Eindruck, gerade auch im Verbund der fünf Onlineangebote. Sobald die technischen Fehler behoben sind, verfügt die ARD über Webauftritte, die so manch Verlagsangebot konventioneller Machart ziemlich altbacken aussehen lassen. Die Mediennutzung ändert sich, und mit ihr auch die Konventionen. Gut, dass man sich dieser Veränderung bei der ARD gestellt hat.

* * *

Update 02. Mai: Nachgereicht sei noch ein Statement von Clemens Gramespacher, Leiter des Grafikteams von ARD.de

Wie viele Gestalter/Entwickler/Konzepter/Redakteure waren an den Relaunchs beteiligt?
Das Ganze ist ja ein gemeinsames Projekt der fünf Gemeinschaftseinrichtungen. Man kann daher grob sagen, dass aus jeder Gemeinschaftseinrichtung von Anfang an jeweils disziplinübergreifend mindestens eine Vertretung aus den Bereichen Redaktion und Technik beteiligt war, dazu jeweils ein Designer von ARD.de, tagesschau.de und DasErste.de. (sportschau.de und boerse.ARD.de haben keine „hauptamtlichen“ Designer).

Von welchen Angeboten habe Sie sich inspirieren lassen? Haben Sie eher us-amerikanische Sender studiert oder sich doch eher hierzulande beim ZDF oder bei ARTE umgeschaut?

In der Anfangsphase gab es natürlich eine sehr umfangreiche Sondierung, bei der bewusst eher über den deutschen Tellerrand hinausgeschaut wurde – schon weil wir die deutschen Medienangebote ohnehin stetig im Blick haben. Viel wichtiger war uns allerdings die Analyse des eigenen Bedarfs und die Erfahrungen der letzten zehn Jahre. Wir haben dazu die unzähligen in unseren Angeboten entstandenen Module analysiert und herausgearbeitet, welche für die Angebote wirklich sinnvoll und notwendig sind.

Dazu war auch sehr schnell klar, dass wir angesichts der Unmenge von Geräte-, OS-, Browser- und Screengrößen-Kombinationen, auf denen die Angebote funktionieren müssen, einen sehr generischen Weg gehen müssen, damit das Ganze in der Umsetzung irgendwie kontrollier- und vorhersehbar bleibt. Dieser Ansatz hat sich m.E. durchaus ausgezahlt. Bei den Tests mit etwa 50 repräsentativ ausgewählten Kombinationen – vom Android 2.3-Smartphone über den Desktop-Browser bis zum HD-Fernseher gab es eine erfreulich hohe Zuverlässigkeit in der Darstellung. Allerdings ist der Markt bekanntermaßen so in Bewegung, dass wir da natürlich dauerhaft am am Ball bleiben müssen.

Sind derzeit auch Arbeiten an der Mediathek geplant?
Ja, die Mediatheken sollen später nachgezogen werden.

* * *

Relaunch von ARD.de

ARD.de Relaunch

Relaunch von Tagesschau.de

Tagesschau.de Relaunch

Das neue Tagesschau.de auf dem iPad

Tagesschau.de (iPad)

Darstellung auf dem iPad / Smartphone

Vorher und Nachher (Desktop-Ansicht)

Weiterführende Links:
tagesschau.de hat ein neues Gesicht | tagesschau.de
Audio: Neugestaltung der ARD-Online-Angebote | tagesschau.de
DasErste.de bekommt ein neues Gesicht | daserste.de

37 Kommentare zu “5 x 5 – ARD setzt bei Relaunchs auf Responsive Design

  1. Grosse Teaser sind nun mal im Trend. Ich finde diese aber insbesondere im Newsbereich sehr gelungen aufgrund der Größe!

    In meinen Augen dem Stil treu geblieben und ohne viel Schnörkel übersichtlich dargestellt.Vielleicht etwas zu übersichtlich, denn die vielen Inhalte könnte man besser darstellen.

    Die Mediathek hingegen finde ich sehr positiv!

    Auf der Home fehlt mir jedoch definitiv ein grosser main Teaser. Den hätte man schön umbauen können oder switchen sollen.

    Liebe Grüße

  2. Technisch erscheint mir der Relaunch sehr solide umgesetzt.

    Konzeptionell kann ich mich einigen Vorrednern anschließen, insbesondere der vielfach genannten Schwäche in der Desktopauflösung. So ist die Informationsdichte mit Blick auf die Zielstellung des Angebots (Information) eher nicht passend und auch die Lesbarkeit schwach. So geht aktuell mein erster Weg nach unten (weit nach unten), um den Viewport manuell auf „M“ zu setzen und die Bilder/Texte so konsumierbar zu machen. Leider merkt sich das System meine Vorliebe nicht. Vielleicht wäre eine Platzierung (oder Speicherung) der Viewport-Settings hier ein erster sinnvoller Usability-Workaround.

    Desweiteren ist es – auch im Zuge des vieldiskutierten Bewegtbild-im-Internet-Trends – sicher ein verständlicher Ansatz, das eigentliche Kernprodukt, sprich die Tagesschau und dessen Berichte, in den Vordergrund bzw. nach oben zu schieben. Hier fühlt sich die aktuelle Lösung aber wirklich inkonsequent an. Geradezu Platzverschwendung. Noch nicht ein einziges Mal habe ich mich bis jetzt genötigt gefühlt, auf einen der Video-Links oben zu klicken. Pauschale „Aktuelle Videos“-Überschriften helfen da nicht. So sollten sich das Online-Team in den nächsten Wochen mal die Klick-Auswertung anschauen.

    Beste Grüße,
    Thomas Grünewald

  3. Die Umstellung auf Responsive Design, zeigt nur dass auch die ARD endlich im Jahr 2013 angekommen ist. Die Nutzung des Responsive Webdesign speigelt die Wünsche der Kunden wieder.

  4. Grundsätzlich gefällt mir die neue Seite gut. Zwei Dinge zu Fokus/Hover:

    – Wenn man die Hauptnavigation mit der Tastatur (Tabulator) navigiert, erfolgt keine Fokusmarkierung bei den Dropdown-Unterseiten.

    – Es irritiert mich, dass ich beim Hovern über die Teaser der Startseite keine visuelle Reaktion erhalte. Nur die ergänzenden Links unter den Teasern gibt es sehr helle Hover-Darstellungen (Farbänderung des Hintergrundes).
    Auf Unterseiten hingegen (z.B. Teaser auf der Seite „tagesschau in 100 Sekunden“) werden die Teaser beim Hover stark markiert.

  5. (bin gerade am rss-feed nachlesen, drum der späte kommentar)

    Erster Eindruck – schick, gut lesbar.

    Zweiter Eindruck, nach studieren der Kritikpunkte hier: ja, stimmt, wäre gut wenn es zu jedem der 5 breakpoints dann angepasst fluide wäre. Auch die Schriftgröße ließe sich per CSS an die Fenstergröße anpassen.

    Mir persönlich taugt die L und auch XL Version auf dem Desktop. Ich sitze ein ganzes Stück weg vom 22″ Monitor, da ist es angenehm, größere Schrift zu lesen.

    Man wird mit einer Standard-einstellung nie alle User glücklich machen. Das schöne an HTML+CSS ist aber, dass jeder User das selbst beeinflussen kann. Man kann das so lösen wie die ARD, dass der User eine vorgegebene Größe auswählt und per Browser-Zoom feinanpasst. (Da wäre dann aber noch ein Cookie nötig, oder ein Browser der sich das anders merken kann, damit man das nicht jedesmal neu einstellen muss).
    Fluides Design ist noch eleganter. Thorsten hat ja schon ein schönes Beispiel genannt, wobei das dort gut im Blog in freier Wildbahn auszuprobieren ist. Was man da schön sehen kann: das Design funktioniert bei jeder Größe des Browser-fensters, und man kann zusätzlich noch den Browser-Zoom verwenden, ohne dass das zu Problemen führt.

    /aside: Bald wird hoffentlich „flex-box“ breit unterstützt. Da freue ich mich sehr drauf :)

  6. Ich empfinde die neuen Seiten der ARD als sehr gelungen und kann das ganze Gemecker nicht verstehen. Vor dem Hintergrund, dass der Desktop immer mehr an Bedeutung verliert und verstärkt mobile Geräte wie Tablets oder Smartphones zum Surfen verwendet werden, kann ich gut verstehen, dass Lesbarkeit der Seiten auf diese Anwendungsfälle hin optimiert wurde.

    Und dass der Einsatz von Javascript auf der ARD-Homepage ein Sicherheitsrisiko darstellt – das halte ich für ein Gerücht (JavaScript != Java-Applet). Performanceprobleme beim Betrachten moderner Webseiten lassen sich übrigens meist durch Installation aktueller Browser (am besten Google Chome oder Mozilla Firefox) beheben. Wer heute noch mit Internet Explorer < Version 9 surft, tut sich wirklich keinen Gefallen…

Pingbacks

Kommentar verfassen

Folgende HTML-Elemente können verwendet werden: <b> <i> <img src="meineurl"> <a> <blockquote>