Überspringen zu Hauptinhalt

5 x 5 – ARD setzt bei Relaunchs auf Responsive Design

Relaunch ARD-Angebote

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

Dieser Beitrag hat 37 Kommentare

  1. Man darf eines nicht vergessen. Ein Verlagsangebot muss z.B. Werbeung berücksichtigen. Das sind Dritt und teilweise Vieranbieter die hier mitmischen und die sich nur in einer perfekten Welt so individuell einbinden lassen. Wer in der Branche GENAU arbeitet (und damit meine ich nicht Webentwickler allgemein sondern jemanden konkret aus der Verlagswelt), der weiß dass man viel reden, fordern und behaupten kann. Letztlich aber doch an Vermarktungsgrenzen stößt die man einzuhalten und zu bedienen hat.

    Da hat es so ein Angebot natürlich leicht.

    AUf großen Bildschirmen ist Responsive übrigens in den meisten Fällen eher schlecht als recht (gelöst). Die Texte laufen zu lang und sind nur von gefühlt einem Meter Entfernung angenehm lesbar.

    Bloß weil man jeden Pixel eines Monitors nutzt, heißt das nicht dass man es richtig oder ideal gemacht hat. Mir ist die ARD-Seite z.B. zu groß, ich habe dabei die pure Qual beim lesen.

  2. …ich sehe da keinen echten Fortschritt, aber immer noch deutlich besser als die Times (schlimmer geht’s nicht)…

  3. Endlich! Eine grosse Seite setzt ein Responsive Design um. Mir gefällt der Grössen-Switch am Seitenende. Auch die Auswahl der Grössen (inkl. TV=XL) sollte man sich merken. Das könnte ein Standard werden.

  4. @nitnat
    Genauso ist es! Leider sorgt das wieder dafür, dass wir unseren Kunden erklären müssen warum eine solche Umsetzung Schwachsinn wäre. Zukunftsorientiert ist das nämlich keineswegs.

  5. Naja, optisch sieht die Seite nicht wesentlich besser aus als vorher. Jedenfalls im Desktop View. Ich habe vorher noch nie diese Seite aufgerufen und werde es in Zukunft auch nicht machen. Dafür ist mir eine gute Gestaltung einfach zu wichtig.

  6. Wie schon Klaudi schrieb: Mir ist die Seite auch viel zu groß. Die gesamte Umsetzung empfinde ich als Rückschritt bzgl. der Übersichtlichkeit, zumindest wenn ich von der Darstellung auf einem klassischen Monitor ausgehe. Offensichtlich ist man bei der Neugestaltung von den allgegenwärtigen Smartphones ausgegangen und hat bei den weiteren Größen dann ggf. einfach mehrere dieser Fenstergrößen nebeneinander gesetzt. Das kann es nicht sein. Ich persönlich empfand den bisherigen ARD-Auftritt angenehm ruhig und klar strukturiert. Gestalterisch vllt. nicht so sehr innovativ, aber das steht für mich bei einem solchen Auftritt auch gar nicht im Vordergrund.
    Ich hatte vorher wesentlich mehr Informationen und besser strukturiert auf dem Monitor. Zusätzliches Ärgernis ist die schlechte Schriftdarstellung, die das Lesen der Texte sehr erschwert.

  7. Ich bin begeistert. Perfekte technische Umsetzung. Ich kann die Bedenken bzgl. der schlechteren Übersichtlichkeit und Textdarstellung nicht teilen. Im aktuellen Firefox auf dem Mac sieht die Schrift sehr schön klar aus. Hier uns da könnte man den Zeilenabstand sogar wieder ein wenig verengen, aber das ist meckern auf hohem Niveau.

    @Achim: In der Tat ist es ein adaptive Website-Layout, denn bei einer adaptive Website, werden verschiedene Ansichten für exakte Viewports entwickelt. Und das ist hier der Fall, denn es gibt mit S-XL 5 Viewports. Bei responsive Websites gibt es ein Fluid-Raster, dass sich an jeden zur Verfügung stehenden Platz anpasst.

  8. Ich persönlich halte eine adaptive Umsetzung für zu unflexibel in in einem modernen Webumfeld. Hier wird auf bestimmte Geräte optimiert und grundsätzlich immer der identische Inhalt geladen. Sobald sich die Technik weiterentwickelt muss daher ständig nachbessert werden. Ebenso vermisse ich ein Inhaltskonzept welches “reaktionsfähig” ist. Die ARD hat meiner Ansicht eine große Möglichkeit verpasst hier eine Messlatte zusetzen (auch wenn ich den Relaunch für gelungen halte).

Kommentare sind geschlossen.

An den Anfang scrollen