Start Relaunch

5 x 5 – ARD setzt bei Relaunchs auf Responsive Design

37

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

  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. 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.

  3. @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.

  4. 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.

  5. 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.

  6. 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.

  7. 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).

  8. Mal ehrlich, adaptive oder responsive hin oder her. Beide Techniken verfolgen die selben Absichten und bringen die gleichen Vorteile mit sich.
    Ob eine Webseite sich responisve oder adaptiv verhält ist für den normalen Nutzer in der Regel auch überhaupt nicht ersichtlich. Die Inhalte werden seinem Endgerät entsprechen optimal dargestellt.
    Mag sein, dass bei einer Zahl von Tabletts/Smart-Phones mit abweichenden Bildschirmgrößen (bezogen auf die 5 festgelegten Ausgabegrößen) rechts und links der Webseite mal mehr oder mal weniger Fleisch zu sehen ist. Bei 5 Ausgabegrößen deckt man aber so ziemlich jede Ausgabegröße optimal ab, weshalb das Argument der fehlenden Flexibilität bei mir nicht zieht. Hätten die Verantwortlichen die Seiten für 2 Größen optimiert – okay. Aber eine solch breitgefächerte Optimierung deckt alles ab, und das wird es auch in der Zukunft noch tun.

    Und natürlich werden immer die identischen Inhalte geladen, das ist ja auch Sinn und Zweck der Sache. Die Inhalte werden aber entsprechend der Relevanz neu platziert und optisch angepasst.

    Für mich ein riesen Schritt und die Bestätigung, dass auch die »Großen« erkannt haben, welchen Stellenwert eine in dieser Art umgesetzte Webseite mit sich bringt.

    Bei manchen Kommentar-Autoren rätsel ich, wie die hier ersichtlichen Vorteile und die auf den ersten Blick saubere Umsetzung nicht wahrgenommen werden können.

  9. Bei responsive Websites gibt es ein Fluid-Raster, dass sich an jeden zur Verfügung stehenden Platz anpasst.

    Jeden auch nicht. Auch bei responsiven Websites werden Breitbildmonitore nicht im Vollbild ausgefüllt, macht ja auch gar keinen Sinn. „Fluid“ sind responsive Umgebungen nur bis zu einem bestimmten Grad. Ab einer gewissen Größe ist meist Schluss. Insofern scheint mir diese Definition nicht der Weisheit letzter Schluss und die Bezeichnungen nicht zu 100% trennscharf.

    Ich weiß um die Spitzfindigkeit: „Reaktionsfähig“ ist die ARD-Weblösung ja – das Interface passt sich dem jeweiligen Endgerät an, reagiert also auf die technischen Spezifikationen. „reaktionsfähig“ bedingt nicht, wie oben erwähnt, stets die Ausnutzung des Vollformats, so zumindest mein Verständnis.

    Es ist ja auch nicht so, dass responsive Lösungen ausschließlich Vorteile bieten und einhellig die bessere der beiden Ansätze wäre, wie etwa auf blog.kulturbanause.de zu lesen ist.

    Wäre es denn abwegig, „Responsive Design“ als Oberbegriff zu definieren? » „adaptiv“ wäre hierbei eine Gattung.

  10. @Achim: Gut das war jetzt keine umfassende Definition. Es ging mir lediglich um den existierenden Unterschied. Natürlich kann man sagen, dass eine Adaptive Website eine Art der Responsive Website ist. Da würde ich mitgehen.

  11. Liebe Kolleginnen und Kollegen, ein paar Anmerkungen vor mir und ein bisschen Erfahrungsbericht, warum das alles nun so ist wie es ist:
    Zum Thema adaptive vs. responsive trifft es der letzte Eintrag von Achim Schaffrina sehr gut. Reinrassig responsiv wäre sicher der liquide Ansatz. Weil aber die Seite auch jetzt erheblich mehr auf die Bildschirmgröße reagiert als mit dem einfachen Umsortieren und Skalieren des Vorhandenen, nämlich beispielweise durch unterschiedliches Verhalten von Elementen oder unterschiedliche Bilder, die für eine Auflösung resp. eine benötigte Darstellungsgröße verwendet werden, ist m.E. das Attribut “responsiv” durchaus gerechtfertigt.
    Wir haben uns nach anfänglichen Versuchen mit dem liquiden Ansatz für die Lösung mit fünf festen Größen entschieden, weil wir damit:
    – (etwas) mehr Layout-Kontrolle hatten
    – die relativ aufwändigen js-Layout-Berechnungen im Rahmen bleiben
    – wir eine breite Gerätepalette mit einer guten bis sehr guten Darstellung bedienen können
    Wenn ein Layout nicht exakt zur Gerätegröße passt, wird evtl. mehr vom Hintergrund sichtbar, was dann kein Nachteil sein muss, wenn der Hintergrund nicht nur “dekorativ”, sondern auch identitätsbildend ist (zum Beispiel die tagesschau-Welt).

    In Zukunft wird es wahrscheinlich auch nicht mehr reichen, die Bildgröße alleine zur Grundlage des ausgespielten Layouts zu verwenden. Ein Beispiel: Die Auflösung 1920*1080px hat sowohl ein HD-Fernseher als auch ein Widescreen-Desktop-Monitor, aber natürlich mit ganz und gar unterschiedlichen Nutzungssituationen (Betrachtungsabstand, Gerätebedienung etc.). Während in einem Fall die jetzige XL-Darstellung in Ordnung wäre, würde man auf dem Desktop eine kleinteiligere Anordnung der Inhalte wünschen. Das heißt, dass zur Bildschirmgröße auch noch die “Geräteklasse” berücksichtigt werden müsste.
    Es gibt also noch ordentlich Handlungsbedarf, aber mit dem jetzigen Relaunch ist ein erster Schritt in diese Richtung getan.

  12. Dass die ARD es mit einem Responsive Design versucht ist super und zeigt, dass sie vielleicht doch noch den Muff von 60 Jahren ablegen kann. Und die Umsetzung mag technisch auch ganz nett sein (wobei ich mich schon frage, warum dafür allzu “aufwändige js-Layout-Berechnungen” notwendig sein sollen).

    Aber inhaltlich / zielgruppenorientiert ist es kompletter Murks. tagesschau.de war ein Angebot um Nachrichten zu lesen (und stand damit mehr oder minder in Konkurrenz zum Marktführer SPON) und eben keine zweite Mediathek um Video-, Audio- und vereinzelte Texte zu entdecken. Die letzte Tagesschau hatte ich auch so schon gefunden, jetzt springt sie mir förmlich ins Gesicht. Im Gegenzug überblicke ich auf meinem Desktop von S bis XL nur noch einen ganzen Artikel, wenn ich runterscrolle kriege ich 2,5 rein. Auf einem 4″-Smartphone seh ich zum Start ganze null Artikel, maximal 1,5 gleichzeitig wenn ich scrolle – hochkant wohlgemerkt (im Querformat ist es 0,5…). Die Schrift ist zu riesig (Tipp: Mit 2/3-Zoom wird auch XL ertragbar), die Zeilenabstände machen die Texte teilweise trotzdem schwer lesbar. Die Bilder sind gigantisch. Generell wird Platz verschwendet. Auf großen Desktop-Bildschirmen wird kaum mehr Inhalt angezeigt als auf einem Smartphone. Die Seite wird einfach nur immer größer.

    Die alte Seite war schlicht, angestaubt, zuweilen wirklich hässlich. Aber sie hat ihren allerwichtigsten Zweck erfüllt: Man konnte Inhalte schnell erfassen.

    Und noch kurz zum Thema Positionierung: Auch wenn das die Oberen noch etwas anderes sehen sollte euch die Diskussionen zur Änderung des Rundfunkstaatsvertrages (12) doch gezeigt haben, dass die Gebührenzahler (also die Leute, denen ihr zu allererst verpflichtet seid) nicht nur eine “klare Positionierung” in Richtung “Videos und Audios” haben wollen: Wenn wir schon für Staatsmedien extra zahlen müssen, dann wollen wir auch Qualität und Konkurrenz zu den Privaten in Text gegossen.

  13. Was nützt mir das schönste Webdesign, wenn tagesschau.de den für mich primären Zweck signifikant schlechter erfüllt als vor dem Relaunch: nämlich mir schnell einen Überblick über das Weltgeschehen zu verschaffen und bei Interesse bzw. Neugierde gezielt Artikel auszuwählen. Wie auf der Vorher-Nachher-Ansicht unschwer zu erkennen ist, hat sich die Informationsdichte der Seite dramatisch verschlechtert. Zu große Schrift, zu großer Zeilenabstand, überdimensionierte Bilder, zu viele Videos, zumindest gefühlt längere Ladezeiten (nervig bei mobilem Internet).

    Ehrlich gesagt war ich etwas geschockt, als sich auf meinem 1366×768-Bildschirm die Seite nach dem Relaunch das erste Mal aufbaute. Seitdem habe ich mich nicht daran gewöhnt.
    Möge der Relaunch als zukunftsweisend gepriesen werden, Fakt ist, dass ich die Seite nun wesentlich seltener und als Erstinformationsquelle für Nachrichten gar nicht mehr nutze.

  14. Ist schön und innovativ, dass auch die ARD auf die neue responsive Technik im Internet setzt. Vorallen schön anzuschauen sind die Seiten auf meinem Smartphone und dem Tablet. Dennoch: Was ich groß an der Technik und auch dem neuen ARD-Internetauftritt kritisiere ist, das die Menschen die weiterhin ihre (zurecht bevorzugten) Flachbild-Monitore nutzen viel zu kurz kommen.

    Die Gestaltung für für den klassischen Desktop sieht meiner Meinung nach leider nach einem Rückschitt aus, als hätte man das Design mit Microsoft Word zusammengesetzt.

    Die vorherige Seite der ARD fand ich für die Desktop-Monitore dafür schon schöner und übersichtlich gestaltet, das ganze verliert sich beim neuen Internetauftritt.

    FAZIT: Die neue Website passt und wirkt sehr schön auf den mobilen Endgeräten. Genau das aber vermisse ich auf den Desktop-Geräten, das scheint hier nicht gegeben zu sein (bspw. viel zu große Bilder und Freiflächen wie bei DasErste.de). Schade, dass immer mehr die schöne Gestaltung der Desktop-Seiten mit dieser Technik in den Sand gesetzt werden. (Beispiel: Die Internetseite der Kollegen vom ZDF)

    Grüße vom Tegernsee,
    Andi

    Auszubildender zum Mediengestalter Online

  15. @Finn: Sehr einfach — weil “Vorteile” nur aus einem Blickwinkel Vorteile sind, aus anderen nicht. Es gibt zwei Probleme bei der Umsetzung, und ein Grundsätzliches.

    “Bei 5 Ausgabegrößen deckt man aber so ziemlich jede Ausgabegröße optimal ab, weshalb das Argument der fehlenden Flexibilität bei mir nicht zieht.”

    Genau das tut es eben nicht. Denn was machen die verschiedenen Größen? Sie skalieren einfach den Inhalt, im Sinne einer Zoom-Funktion. Das grundsätzliche Layout — im Wesentlichen eine Spalte, Menü oben — bleibt stets erhalten, und bei 16:10 Widescreens ist das schlicht und ergreifend eine gigantische Platzverschwendung.

    Wenn ich die Seite auf meinem Desktop jetzt bildschirmfüllend haben möchte, dann ist alles gewaltig groß und ich sehe nach dem ersten Laden ein Bild (und wenn ich Glück habe, noch die Schlagzeile darunter). Stelle ich die Größe dagegen so ein, dass mir Bild und Text richtig erscheinen, habe ich eine Art Wurst in der Mitte, und 2/3 (!) meines Bildschirms ungenutzt. Wo eines von beiden “optimal” ist, sehe ich wirklich nicht. Die bisherige Seite war optimal (für Desktops) — denn die dreispaltige Aufteilung, insbesondere mit dem Menü links, nutzte die Breite gut aus, und verkürzte die Länge, wodurch sich viel mehr Information auf einem Bildschirm sammelte, was den Überblick erhöhte, und die Scrolllängen verkürzte.

    Zweites Problem: Javascript. Das ist ein technisches Problem, kein design-basiertes, aber man muss sich trotzdem darüber unterhalten. Javascript, wenn eingeschaltet, erhöht im Internet das Sicherheitsrisiko beträchtlich. Auf der anderen Seite erhöht es auch die CPU-Last sehr merklich. Nicht jeder hat einen High-end Prozessor. Auf meinem Netbook ruckelt die Seite beim Scrollen fürchterlich. Insbesondere mit dem ersten Problem ergibt sich hier eine fatale Kombination: Ich bin gezwungen, viel mehr zu scrollen als früher, kann es aber nicht. Javascript habe ich nun also abgeschaltet. Damit geht mir auch noch der letzte Rest an Vorteilen flöten, den das Design hatte. Adaptive, responsive oder liquid ist bei mir jetzt gar nichts mehr.

    Und schließlich, die grundsätzliche Frage. Warum gehe ich zu ts.de? Weil ich schnell und seriös über die wichtigsten Schlagzeilen des Tages informiert werden möchte. Dafür wichtig sind Parameter wie Übersichtlichkeit, Informationsdichte. Dafür völlig unwichtig sind Parameter wie irgendwelche Designschmankerl oder tolle neue Bildchen oder sonstiger Schnickschnack. ts.de kann gerne bieder, altbacken und so gar nicht trendy sein. Sie muss nur die eine Aufgabe erfüllen, mich schnell zu informieren. Das tat die alte Seite hervorragend. Die neue nicht. Also sind sämtliche Argumente für und wider völlig egal, weil die Kernkompetenz nicht mehr vorhanden ist, und damit ist das neue Design Murks, so schön es sonst auch sein mag.

    Fazit:
    “Die übliche, anfängliche Negativkritik seitens der Stammleser („Verschlimmbesserung”) dürfte schon bald abebben.”

    Genau das sehe ich nicht. Oder anders gesagt, ja, natürlich wird sie das. Weil nämlich viele einfach der Seite fernbleiben werden. Aber das kann ja wohl kaum der Sinn sein.

    .
    Das Ganze übrigens auch @Herrn Gramespacher, aber ich denke, Sie werden wohl bereits um die Problematik wissen — es wurde ja breit genug darüber im meta.ts Thread darüber diskutiert.

  16. Ich stelle mir die Frage, ob der responsive Ansatz für solch größere bzw. contentlastigere Seiten überhaupt der Richtige sein kann. Wenn ich mir tagesschau.de genauer anschaue, muss ich den eher negativen Stimmen hier recht geben.
    Vielleicht sollte die ARD – ganz wie früher – “Optimiert für 10-Zoll Tablets” einblenden. Denn das ist es meiner Meinung nach. Auf großen Desktop-Monitoren ist die Darstellung suboptimal und auf einem 4,7 Zoll Smartphone werden breite Ränder rechts und links angezeigt! Das soll wohl ein Witz sein, nicht jedes Smartphone ist ein iPhone! Und selbst nach dem Kippen in Landscape bleibt es bei ca. 300 Pixel Breite für den Content. Das kann’s doch wohl nicht sein!?

    Die Problematik der Ad-Einblendung, wie von Klaudi im ersten Kommentar hier bereits erwähnt, ist eine Sache auf die kaum in solchen Diskussionen eingegangen wird . Obwohl es ein sehr wichtiger Faktor ist, der gegen responsive bei Magazin-/Nachrichtensites spricht (die auf Werbung angewiesen sind).

  17. 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…

  18. 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.

  19. 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”.

  20. 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.

  21. 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

  22. 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”.

  23. 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… ;-))

  24. 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

  25. 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

  26. 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.

  27. 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.

  28. (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 :)

  29. 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…

Kommentieren


7 − 3 =

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