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
Relaunch von Tagesschau.de
Das neue Tagesschau.de auf dem 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
In meinen Augen dürften “Ad-Einblendungen” bei öffentlich-rechtlichen überhaupt keine Rolle spielen, “Danke für Ihre Gebühren”.
Leider auf wesentlich langsamer als vorher und Darstellungsprobleme auf Handys bevor die Seite geladen ist…
Leider ist die Navigation nicht überarbeitet worden, so dass man oft nur per Google findet was man sucht, z.B. Organigramme oder der Livestream.
Sehr verwirrend auch: es wird kreuz und quer von einer Seite auf eine andere verlinkt¡ die zusätzlich zum verwechseln ähnlich ist (tagesschau, daserste, ard etc…). Warum so viele doppelte Inhalte und keine klare Abtrennung der Webseiten? Nach dem Relaunch ist es noch schwieriger zu wissen wo man eigentlich ist….Unverständlich auch warum alle Seiten mit Home auf andere ard.de verlinken und man oft nicht mehr zurückkommt..
Wozu dienen die Links Ratgeber Wissen Kultur auf jeder Seite und auf gleicher Ebene Fernsehen und Radio? Unter wissen z.B. finde ich keine Radiosendungen zum Thema Wissen. Und was ist mit Spielfilmen, Musik und Comedy? Soll das alles pauschal Kultur sein? Auch verstehe ich nicht warum ndr, wdr, br, sr, usw. nur im Footer versteckt werden.
Die allererste ard homepage (siehe archive.org) war irgendwie besser strukturiert: eine Startseite mit verlinkten Logos zu allen Sendern…
Ich fühlte mich erschlagen von der Startseite. Ich habe mein Browserfenster auf meinem 26″ immer maximiert, da finde ich die XL-Ansicht einfach zu mächtig.
Nach zwei Mal strg + – ging’s aber.
Ne Initialzündung gibts erst, wenn die Kunden freiwillig sagen “wir zahlen gerne für den Extraaufwand”. ;)
Momentan ists eher “Responsive Design? Das ist doch sicherlich mehr Aufwand als ne normale Seite oder? Das zahlen wir dann aber nicht, machen sie uns ne normale Seite, das muss reichen”.
Bezüglich der Adaptive/Responsive Debatte muss ich einigen Vorpostern zustimmen, dass es sich bei den Relaunches um adaptive und nicht um responsive Webseiten handelt. Die Gründe dafür wurden ja schon detailliert dargelegt. Ein visuelles Beispiel, was Responsive Design ist, kann man z.B. hier begutachten: Define :: Responsive.
Was bei dem adaptiven Ansatz auf dem ersten Blick als “ganz cool” aussieht, empfinde ich technisch gesehen keinesfalls gelungen. Anstelle sich im Bezug auf Responsive Design mehr Gedanken über die Darstellung der Inhalte zu machen (Content first), wurde “nur” eine adaptive Lösung gewählt und sich dabei auf die gängigsten Auflösungsgrößen und Endgeräte fixiert. Und das ist für mich nicht zukunftsweisend, da es eben nicht nur diese “paar” Endgeräte gibt, sondern eine Vielzahl, die von Tag zu Tag mehr wird, mit umso mehr Auflösungsgrößen. Wenn man gut ist, bedient man mit seinem Design die meistgenutzten Endgeräte, wenn man besser ist, bedient man mit seinem Design so viele Endgeräte wie möglich und lässt sich keine Grenzen/Breakpoints durch die Auflösungsgrößen der ausgewählten Endgeräte setzen. Und…ich habe den Quelltext jetzt nur kurz überflogen…sehe ich das richtig, dass die mithilfe gesetzten Breakpoints bei den Media Queries in Form verschiedener Stylesheets durch Javascript aufgerufen werden? Wenn ja, was soll das?!
Bezüglich einer Verbesserung oder Verschlechterung der Inhaltsdarstellung kann ich nicht viel sagen, da ich die vorherigen Webauftritte nur sehr selten besucht habe. Allerdings kann ich zum Relaunch sagen, dass mir einige Textboxen (vor allem in den kleineren Auflösungen) zu eng sind, sprich mehr “padding” hätte ich bevorzugt. Dass man die verschiedenen Breakpoints/Layouts auch manuell aufrufen kann, empfinde ich mehr störend als hilfreich. Der erste Gedanke, der mir dazu kam, war “Das soll bestimmt als eine Art Anleitung für ältere Besucher der Internetauftritte dienen was Responsive/Adaptive Webdesign ist”. Zudem frage ich mich, ob es die nicht so versierten Nutzer, die vorher oder auf anderen Webseiten zwischen Web- und Mobilansicht wählen konnten, mit fünf (mit “Auto” sind es sogar sechs) Auswahlmöglichkeiten überfordert sein könnten. Des Weiteren stört es mich, dass auf dem neuen Auftritt der Tagesschau in der XS-Ansicht die Bilder in den Textboxen nicht über die ganze Breite der Textbox gehen.
Wikipedia definiert so:
“Beim Responsive Webdesign (im Deutschen auch responsives Webdesign) handelt es sich um einen gestalterischen und technischen Ansatz zur Erstellung anpassungsfähiger Websites. Daher wird anstelle von „responsiv“ häufig auch von einem „adaptiven Layout“ gesprochen. Der grafische Aufbau einer „responsiven“ Webseite erfolgt anhand der Anforderungen des jeweiligen Gerätes, mit dem die Seite betrachtet wird. Dies betrifft insbesondere die Anordnung und Darstellung einzelner Elemente, wie beispielsweise Navigationen, Seitenspalten und Texte. Technische Basis hierfür sind neuere Webstandards wie HTML5 und CSS3 und JavaScript.”
Für mich resultiert daraus:
Responsiv = Oberbegriff
Adaptiv = Verwendung von Breakpoints
Liquid = Vollständige Anpassung
Gast, Deine Zuordnung der Begriffe gefällt mir.
Bevor ich hier an der Debatte nach den Vor- und Nachteilen des adaptiven Design partizipiere sei nur folgendes gesagt:
Ich besuche die Tagesschau Seite nun seit einigen Jahren und habe daher schon recht viel Zeit auf dieser Webpräsenz verbracht. Den Weg, der jetzt mit dem Relaunch eingeschlagen wurde, halte ich grundsätzlich für Richtig. Zwar braucht es natürlich eine gewisse Zeit, bis man die Orientierung auf der Seite wiedergefunden hat und sich wieder mit der alten Selbstverständlichkeit auf der Page bewegen kann, doch dies nehme ich hier gerne in Kauf. Durch die Entzerrung der Inhaltsbereiche, das Auflösen der 3-spaltigkeit in einigen Abschnitten und durch die (leichten) Änderungen an der Farbgestaltung sehe ich hier ein deutliches Plus bezüglich der Übersichtlichkeit. Analog zum Relaunch der Süddeutschen vor einiger Zeit, bekommt man zwar weniger Content zur selben Zeit auf den Bildschirm, aber hier folge ich persönlich dem abgegriffenen Ausspruch “Weniger ist manchmal mehr”.
Als jemand, der regelmäßig sowohl auf ard.de als auch auf tagesschau.de geht, ist mir jetzt eben ein absoluter Kardinalfehler für ein Nachrichtenformat aufgefallen. Ich wollte eben nämlich kurz schauen, welches Datum wir heute haben. Fehlanzeige. Gibt es dort nicht mehr… Vielleicht soll es ja die Zeitlosigkeit des Relaunches unterstreichen… ;-))
Die Bilder werden immer größer, die Nachrichten immer kleiner. Das ist nichts neues, nur schlimm, dass ich das auch bezahlen muss.