Neue Tagesschauseite

[TobiW]

Heute ging die Tagesschau mit einem neuen Design online …

 

 

Was sagt ihr dazu? Ich finde es im Headerbereich etwas eng. Die obere Leiste durch dunklere Farbe und eine Haarline abzugrenzen gefällt mir aber es hätte insgesamt doch mehr Luft haben können oder?

 

Hier gibt’s mehr Infos …

[Kathrinvdm]

Aufgeräumt sieht es aus, kein überflüssiger Schnickschnack da, das ist positiv anzumerken. Die Haarlinie oben wirkt durch ihre geringe Stärke allerdings fast wie ein Fehler auf mich, da könnte es gerne etwas luftiger zugehen. Der Textsatz wirkt auf den ersten Blick etwas plump, aber das kann täuschen. Ich muss die Seite bei Gelegenheit mal genauer unter die Lupe nehmen. 

[TobiW]

Mach das mal bin gespannt auf dein Urteil — und das der anderen natürlich …

 

Was mir gerade noch aufgefallen ist, ist dass die obere Menüzeile, die ja sowas wie eine Sparte wählbar macht etwas dezenter hinterlegt sein könnte, weil sie ja kein Hauptmenü ist. Vielleicht könnte man die Haarline an der Stelle des ausgewählten Punktes einfach dicker machen …

[Ralf Herrmann]

Und bei der Beurteilung beachten, dass es je nach Browsergröße 5 verschiedene Darstellungen gibt. Nicht dass wir alle über etwas anderes reden.

[Þorsten]

je nach Browsergröße … verschiedene Darstellungen

Das nennt sich responsive web design und sorgt dafür, dass eine Website auch bei verschiedensten Fenstergrößen noch optimal funktioniert. Für eine so wichtige Medien-Website eigentlich ein Muss. Bravo! :biglove:

[Steff11]

Und bei der Beurteilung beachten, dass hier quasi 8 farblich und grafisch durchaus unterschiedlich anmutende Markenauftritte unter einer gemeinsamen Dachmarke vereint sind. Ich finde das Ergebnis sehr, sehr ansprechend.

Kritteleien der Art "man hätte dieses Element auch 1px breiter" oder "jenen Farbton auch eine Spur gesättigter verwenden können" ohne Argument, warum die getroffene Wahl nicht gut war ... nun, die fallen bei mir dann eher unter Meinung denn unter Kritik. A bisserl kleinkariert.

btw: die Haarlinie unter der Topnavi funktioniert in meinen Augen auf 6 der 8 Unterseiten bestens. Das sind genau die 6 Seiten, die ob ihrer farblichen Gestaltung die Haarlinie benötigen, um die Topnavi sicher vom Rest zu trennen.   Steff

[TobiW]

Hi Steff,

 

klar ist das meine Meinung, ich bespreche aber sowas hier weniger, um die Macher der Seite zu kritisieren sonder vielmehr um was zu lernen und zu sehen, ob mein kritisches Auge mit „hier zu wenig Luft“ auch „Recht“ hat – Stichwort: aus den Fehlern anderer Lernen

[Kathrinvdm]

 

Kritteleien der Art "man hätte dieses Element auch 1px breiter" oder "jenen Farbton auch eine Spur gesättigter verwenden können" ohne Argument, warum die getroffene Wahl nicht gut war ... nun, die fallen bei mir dann eher unter Meinung denn unter Kritik. A bisserl kleinkariert. (Steff11)

Für den Fall, dass Du mich ansprichst: Ich habe einen Grund genannt: Auf mich wirkt die zarte Haarlinie fast wie ein Fehler, »Blitzer« würde man im Printbereich dazu sagen. Und das war durchaus sachlich gemeint.

[Steff11]

Katrin, ich kam glaub ich giftiger rüber, als es gemeint war, sorry.

Natürlich kann man auch an einem solch großen, inhaltlich hochkomplexen Webauftritt eine Meinung zu Details äußern. Mir scheinen solche gestalterischen Feinheiten aber in diesem Fall wirklich nachrangig gegenüber der Beurteilung, wie stimmig das Gesamtkonzept ist, wie sicher und schnell man seine Zielinhalte findet, und vor allem heute, in Zeiten einer immer unübersichtlicher werdenden Zahl von Endgeräteformaten: wie gut funktioniert die Seite auf unterschiedlichsten Displays. Das schwebte mir im Kopf bei der harten Wahl "kleinkariert". Wenn ich von der Seite was lernen wollte, dann erstmal stundenlang an der Navigationsstruktur, zuallerletzt an solchen Details.

 

Nochmal zur Linie: mir scheinen 1px-Linien eine der allerselbstverständlichsten Mittel im Webdesign zu sein, um die Abgrenzung unterschiedlich genutzter Bereiche dezent aber erkennbar zu halten, bisweilen auch wie hier, um die Abgrenzung ähnlich-farblicher Bereiche fein zu verstärken. Zumeist aber doch als dunklere Linie vor hellerem Hintergrund. Hier nun trifft der ungewöhnlichere Fall vielleicht auf eine deformation-professionnelle von Printgestaltern, die feine helle Konturen auf dunklem Hintergrund möglicherweise (ich mutmaße, da nicht vom Fach) eher meiden, weils schwer zu drucken ist und das umgekehrt dann halt vorwiegend als Blitzer des versehentlich unbedruckten weißen Papiers kennen.

Ich hab die Linie grad fix mal testweise im Photoshop auf 2px weiß gesetzt. Wär mir persönlich schon zu dominant.

 

lg, Steff

 

nochwas: durchaus erstaunt bin ich, wie sauber die TheSans in allen möglichen Zoomstufen am Bildschirm funktioniert.

[Gast bertel]

Ich bin eher enttäuscht. Die Monitorversion (nur diese hab ich mir angeschaut) ist ein Sammelsurium einzelner Designs und es fehlt die Klammer außenrum, die klarmacht, dass das alles innerhalb der ARD stattfindet. Das Menü am oberen Rand kann das allein nicht leisten.

 

Die Auto-Schrift ist viel zu groß. Damit geht viel Inhalt auf dem Bildschirm verloren, der eigentlich hätte dargestellt werden können. Eine Anpassung der Schriftgröße fehlt leider völlig – die Umschaltung Auto, XS … XL bringt mich auf dem Monitor auch nicht weiter, weil sich dann eben auch die Darstellungsbreite verringert.

 

tagesschau.de ist von allen die unübersichtlichste – genau das Gegenteil dessen, was eine Nachrichtenseite leisten muss. Der blaue Menübalken geht dank mangelnder Abgrenzung im Hintergund unter, die unmotiviert im Hintergrund platzierte Weltkarte bringt nur Unruhe. "Kontrast" und "Augenführung" sind Fremdworte. Das Logo auch noch auf die Weltkarte zu stellen ist schon jenseits von grenzwertig. Dabei hab ich noch halbwegs gute Augen – ich wäre auf einen Feldtest mit der Hauptnutzergruppe gespannt gewesen, aber nun ist’s ja schon ausgerollt.

[Kathrinvdm]

Steff11 schrieb (29 Apr 2013 - 19:30):

Katrin, ich kam glaub ich giftiger rüber, als es gemeint war, sorry.

Alles gut!

Zitat

Natürlich kann man auch an einem solch großen, inhaltlich hochkomplexen Webauftritt eine Meinung zu Details äußern. Mir scheinen solche gestalterischen Feinheiten aber in diesem Fall wirklich nachrangig gegenüber der Beurteilung, wie stimmig das Gesamtkonzept ist, wie sicher und schnell man seine Zielinhalte findet, und vor allem heute, in Zeiten einer immer unübersichtlicher werdenden Zahl von Endgeräteformaten: wie gut funktioniert die Seite auf unterschiedlichsten Displays. Das schwebte mir im Kopf bei der harten Wahl "kleinkariert". Wenn ich von der Seite was lernen wollte, dann erstmal stundenlang an der Navigationsstruktur, zuallerletzt an solchen Details.

Verstehe ich! Deswegen hatte ich ja auch geschrieben, dass ich mir die Seite noch mal in Ruhe und ganz genau anschauen muss. Das war ja jetzt erstmal nur eine spontane Reaktion auf das von Tobi gepostete Material. Mit etwas mehr Zeit (als nur dem bisschen, was mir momentan vergönnt ist) werde ich mich da mal durch die Seiten navigieren und dann kann ich meine Bewertung vermutlich angemessener gewichten.

[Niklas]

Ich habe einen 1280x1024-Monitor (bei 17"), und finde die Schriftgröße eindeutig zu klein (Firefox 20). Ebenfalls ärgert mich übermäßig komplexes Layout, das sich durch einen mehrfachen Wechsel der Spalten auszeichnet:

4

1

3

1+1
2+1
1+1
4

1

4
Positiv hervorzuheben ist das traditionelle Zelebrieren der Blautöne und der saubere Look. Bei heute und generell beim ZDF beispielsweise sind immer wieder schwerfällige und überflüssige Design-Elemente zu beobachten, nach amerikanischem Vorbild. Man schaue sich nur mal diese schwülstige, langsame ZDF-Mediathek an. Die ARD ist hingegen einfach zuverlässig slick am Werk...
 

Edit: Außerdem ist das Bild zur Titelgeschichte derart breit (3,55:1), dass es durchs Beschneiden anderformatiger Bilder offensichtlich recht pixelig wird.

[Þorsten]

Ich … finde die Schriftgröße eindeutig zu klein (Firefox 20).

Das liegt aber an dir. In Firefox:

•   Strg  +  +  
• Edit → Preferences → Content → Font and Colors → Size Advanced … (und entsprechend natürlich auch in der dt. Version)

Was ist da jetzt genau dein Problem?

[Niklas]

Das liegt aber an dir. In Firefox:

•   Strg  +  +  
•  
• Edit → Preferences → Content → Font and Colors → Size Advanced … (und entsprechend natürlich auch in der dt. Version)
•  

Was ist da jetzt genau dein Problem?

 

 

Das stimmt. IE zeigt die Schrift größer an. Ich meine aber nicht, die Schriftgröße beim FF manuell geändert zu haben (kann es aber auch nicht huntertprozentig sagen). Größenprobleme werden natürlich mit Strg++ gelöst, bin immerhin mit dem FF gefühlt verheiratet.

[Þorsten]

IE zeigt die Schrift größer an. Ich meine aber nicht, die Schriftgröße beim FF manuell geändert zu haben

Ich sehe da kein Problem. Es ist gut möglich, dass IE und FF eben andere Standardwerte verwenden. Wichtig ist, dass tagesschau.de dir als Nutzer die Wahl lässt, wie groß du Mengentext auf Webseiten lesen willst. Genau so soll es sein.

[Gast bertel]

Wichtig ist, dass tagesschau.de dir als Nutzer die Wahl lässt, wie groß du Mengentext auf Webseiten lesen willst. Genau so soll es sein.

Das wäre wichtig, ja. Wenn ich in Safari ⌘+ und ⌘- drücke, werden zwar Bild- und andere Elemente größer/kleiner, aber nicht die Schrift.

[Þorsten]

Das ist dann ein Safari-Problem. An tagesschau.de liegt es nicht. Dort werden die Textgrößen ausschließlich relativ angegeben – und zwar für »normalen« Text mit 1 em, also genau der Größe, die du in deinem Browser für Mengentext eingestellt hast. 

 

Das ist vorbildlich. Besser kann man es für eine Nachrichtenseite kaum machen.

[Gast bertel]

In Safari kannst du keine Schriftart und keine default-Größe wählen. Apple hält das für nicht notwendig. Fatal, dass gerade die tagesschau-Seite den Text nicht skaliert, alle anderen Webseiten aber schon.

[Joshua K.]

Du kannst die Standard-Schriftart und -größe über Menü Safari/Einstellungen/Erscheinungsbild/Standardschrift einstellen. Stellt man die Schrift zu groß ein, kommt es jedoch zu Überlagerungen:

(Anklicken für großes Bild)

Das ist kein Wunder, weil auf der Seite leider relative und absolute Größenangaben gemischt sind.

Daß der Text in Safari nicht vergrößert wird, liegt daran, daß die Größe als Prozentwert („100.01%“) eingestellt ist, und Safari die Textgröße dann nicht verändert.
Siehe Stackoverflow: Safari zoom in/out ruins page layout (doesn't change font-size well)
und Stackoverflow: body { font-size: 100.01%; } vs body { font-size: 100%; }?

Die beste Möglichkeit ist wohl, für das html- oder body-Element eine Größe in Prozent vorzugeben (100%), und für untergeordnete Elemente die Größe dann in em festzulegen.
Siehe A List Apart: How to Size Text in CSS

[Gast bertel]

Du kannst die Standard-Schriftart und -größe über Menü Safari/Einstellungen/Erscheinungsbild/Standardschrift einstellen. 

 

Das war früher so. Beim aktuellen Safari unter 10.8 wurde das gecancelt.

 

[Gast Jmk]

Offiziell kannst Du Dir ein eigenes CSS definieren, dass Safari über die aktuelle Seite stülpt:

Safari -> Einstellungen -> Erweitert -> Style-Sheet.

 

Inoffiziell kannst Du auch die Safari-Konfiguration direkt ändert, siehe z.B. http://tidbits.com/article/13170

 

[Ralf Herrmann]

Man muss doch bei der Tagesschau-Seite nur entweder das Browser-Fenster groß genug machen oder manuell auf L oder XL schalten. Dann werden die Texte doch überdurchschnittlich groß. 

[Joshua K.]

Erstens ist diese Funktion ziemlich versteckt, bis jetzt ist sie mir gar nicht aufgefallen; zweitens ist sie nur bedingt brauchbar, weil sich dabei auch die Seitenbreite ändert; und drittens ist nicht gerade nutzerfreundlich, daß ein besonderes, seiteneigenes Verfahren zum Vergrößern nötig ist, anstatt einfach die Browser-Funktion dafür benutzen zu können.

[Þorsten]

Nochmal: Dass das nicht funktioniert, ist ein Safari-Bug. Die Tagesschau-Website ist hingegen völlig korrekt programmiert.

[Joshua K.]

Es ist doch ein alter Hut, daß die Browser alle ihre Fehlerchen haben. Zu ordentlicher HTML-Programmierung gehört deshalb, solche Fehler möglichst zu umgehen. Das haben die Verantwortlichen hier ja auch zum Teil getan, indem sie die Schriftgröße auf 100,01% statt 100% gesetzt haben. Irrwitzigerweise wird damit ein Fehler in älteren Ausgaben von Opera und Safari umschifft, das heißt, die Programmierer berücksichtigen ein fehlerhaftes Verhalten älterer Safari-Fassungen, nicht jedoch das fehlerhafte Verhalten der aktuellen Safari-Fassung.

 

Die beste Möglichkeit ist wohl, für das html- oder body-Element eine Größe in Prozent vorzugeben (100%), und für untergeordnete Elemente die Größe dann in em festzulegen.

Siehe A List Apart: How to Size Text in CSS

Diese Möglichkeit führt in den üblichen Browsern zum besten Ergebnis, wobei auch das Safari-Problem nicht auftritt. Das ist seit Jahren bekannt und sollte an einem professionellen Programmierer nicht vorbeigegangen sein.

Das alles ändert freilich nichts daran, daß die Safari-Programmierer, den Fehler in ihrem Programm beheben sollen. Was die gestrichene Möglichkeit zur Einstellung der Standardgröße in Safari angeht, wäre dies nicht so schlimm, wenn es unter OS X eine einfache Möglichkeit gäbe, die Systemschriftgröße/Bildschirmauflösung (in dpi) einzustellen (was unter Windows und Linux schon seit langem geht).