Die Webseite der Tagesschau wurde von Affenspaß.de schon einmal ausführlich gelobt (Warum Tagesschau.de die beste Nachrichtenseite ist). Nun soll es aber um ein ästhetisches Problem der Tagesschau-Webseite gehen, und zwar eines, das sehr leicht und schnell behoben werden kann.
Responsive Webdesign
Zunächst die Grundlagen: In den frühen Jahren des World Wide Webs war Webdesign recht einfach, da es nicht besonders viele Klassen von internetfähigen Geräten gab. Zwar war es insbesondere in den 90er-Jahren für die Webmaster schwierig, den unterschiedlichen Browsern mit ihren eigenen und teils eigenwilligen „Standards“ gerecht zu werden (Wikipedia: Browserkrieg), aber wenigstens brauchte man sich nur auf für bestimmte Display-Größen zu konzentrieren. Mit Aufkommen von Smartphones und Tablets wurde es aber immer wichtiger, dass Webdesigner auch Lösungen für kleinere Displays finden. Darunter sollte aber das Browsing-Erlebnis mit größeren Displays nicht leiden. Die Lösung war, ein zweites Template zu erstellen, also ein komplett neues Design, welches von der Webseite ausgegeben werden würde, wenn das Display des genutzten Gerätes eine bestimmte Breite unterschritt. Es gab also einen Scheidepunkt: Kleine Geräte bekamen andere Webseiten zu sehen als größere.
Heute nutzt man in der Regel ein Design für alle Gerätegrößen. Das eine Design, das responsive Design reagiert auf die Größe des Displays, und zwar unmittelbar. Testen kann man dies am heimischen Desktop-PC (oder Convertible) selbst ganz einfach, indem man die Größe des Browserfensters mit der Maus variiert. Heutzutage reagieren die meisten Seiten auf diese Größenveränderung. Nicht nur die Breite von Textabsätzen, sondern auch die Anzeige von größeren oder gekürzten Menüs reagiert darauf. Es gibt dann meist „Breakpoints“ oder Stufen, an welchen die Anzeige springt. Dadurch wird es für den Designer einfacher, zugleich „einheitliche“ aber dennoch unterschiedliche Lösungen für verschiedene Geräteklassen zu schaffen. Von diesen gibt es nämlich mittlerweile sehr viele: Smartphones, Phablets, Tablets, Convertibles, Netbooks, Desktop-PCs und viele mehr.
Ein falscher Breakpoint auf Tagesschau.de
Wie sieht dies nun auf der Webseite der Tagesschau aus? Prinzipiell sehr gut: Sie passt sich an, weil sie verschiedene Breakpoints für die Design-Größen Extra-Small, Small, Medium, Large und Extra-Large definiert hat.
Die Darstellungsgröße kann man am Ende jeder Seite manuell wählen, aber standardmäßig wird automatisch je nach Display-Größe die passende Darstellung gewählt:
xs.css – vertikal gehaltene Smartphones (etwa das iPhone 6 mit einer Breite von 375 px)
Für Bildschirme mit einer Breite zwischen 0 Pixel (px) und (stets „inkl.“) 479 px sieht die Tagesschau-Seite folgendermaßen aus (Augenmerk auf Menüleiste, Breite des Inhalts und grundlegende Designelemente):
Fix ist in der Extra-Small-Darstellung für die kleinsten Geräte die Breite der Inhaltsboxen, wie dem Slider mit „Live: tagesschau24“. Diese Boxen haben eine Breite von 312 px. Links und rechts von diesen Boxen sieht man in der variablen Breite das blaue Welt-Hintergrundbild. Ebenso sieht man, dass das Menü der Tagesschau-Seite, ebenso wie die „ARD-Navigation“, auf eine Schaltfläche reduziert ist.
s.css – horizontal gehaltene Smartphones (beim iPhone 6 667 px)
Bei etwas größeren Geräten mit einer Bildschirm (bzw. Browserfensterbreite) von 480 px bis 767 px scheint die Darstellung gleich der obigen zu sein. Die Inhaltsboxen (div class=“box“) haben nun im Small-Design allerdings eine Breite von 472 px. Die Darstellung der Menüs hat sich nicht verändert, wohl aber die Anordnung in den Boxen, und auch der Abstand zwischen dem links angeordnetem Tagesschau-Logo und dem rechten Menü.
m.css – Tablets (etwa das Kindle Fire HD 7 Zoll mit 800 px Breite)
Hat das Browserfenster eine Breite zwischen 768 px und 1009 px, so gibt es einen größeren Design-Unterschied. Das Tagesschau-Menü mit der Auswahl zwischen „Videos & Audios“, „Inland“, „Ausland“ usw. wird ausgefaltet und ist leicht zugänglich, also mit weniger Klicks. Die Content-Boxen haben nun die feste Breite von 754 Pixeln, außen bleibt der Rand variabel, wie gehabt. Ebenso ist nun die ARD-Navigation völlig sichtbar, wie auch das Eingabefeld für die Suchfunktion.
Dieses Medium-Design ist gedacht für die kleineren Tablets, die 7-Zoll-Klasse, oder eben große Phablets. Die kleinen 7″-Tablets bekommen also folgende Ansicht:
Diese Ansicht ist problematisch, wie man leicht sieht: Das Tagesschau-Menü ist nun zweizeilig, weil es in die 754 px nicht hineinpasst. Das Menü hat zu viele Punkte für die Breite von 754 px. Dies ist natürlich weder aus technischer Sicht, noch aus funktioneller Nutzer-Sicht ein Problem. Aber ästhetisch kann man es eben nicht nennen. Wegen dem einen Punkt „Mehr“ muss eine neue Zeile erscheinen, die ansonsten vollkommen leer ist. Dieses Design für die 7-Zoll-Geräte wird dem ansonsten hohen Niveau von Tagesschau.de nicht gerecht.
l.css – Notebooks und Tablets (etwa das iPad mit 1024px oder das iPad Pro mit 1366 px)
Die nächstgrößere Stufe des Tagesschau-Designs, das Large-Design, konzentriert sich auf „normale“ Tablets, in Abgrenzung zu breiten Desktop-PC-Displays ab 1900 px oder etwa dem Microsoft Surface Studio. Die nun tadellose Ansicht ist abrufbar ab einer Display- bzw. Browserfenster-Breite zwischen 1010 px und 1900 px.
Das Optimum scheint nun erreicht: eine saubere Menüleiste ohne verschwendetem Platz und dazu alle sonstigen Bedienelemente an dem ihnen zugedachten Ort. Die Content-Boxen haben nun stattliche 996 px in der Breite. In diese 996 px passen jetzt auch alle Menüpunkte hinein.
Eine Darstellung und Diskussion für Display-Größen ab 1900 px (Extra-Large) folgt nun nicht, da sich nichts Wesentliches verändert. Die für die einzelnen Geräteklassen entscheidenden Design-Breakpoints wurden gezeigt.
Das für diesen Artikel zentrale Problem der Tagesschau-Webseite betrifft also die Darstellung auf Displays mit einer Breite zwischen 768 px und 1009 px, also das Medium-Design, die m.css-Datei. Hier findet man die (versehentlich) zweizeilige Menüleiste.
Die Lösungsmöglichkeiten
andere Breakpoints
Verantwortliche hinter einer großen Webseite, wie Tagesschau.de eine ist, brauchen in der Regel nicht mehr als einen kurzen Hinweis auf das Problem, nicht aber eine ausführliche Beschreibung eines Lösungsweges. Die Lösungsmöglichkeiten sind nämlich simpel:
Man könnte etwa den Breakpoint verändern und das Menüband vergrößern.
Die Webseite unterscheidet im Javascript-Code zwischen verschiedenen Display-Breiten:
An dieser Stelle sind im Javascript-Code die Breakpoints definiert. Man könnte nun die Gültigkeit des 480px-767px-Designs (Small), welches für vertikal gehaltene Smartphone-Displays gedacht ist, erweitern auf etwa 810 px, sodass das Menü erst bei größeren Displays vollständig sichtbar wird. Die CSS-Datei für die 7″-Displays (m.css, Medium-Design) würde also vielleicht nicht schon bei Kindle Fire HD 7″, sondern vielleicht erst bei dem iPad aufgerufen werden. Wichtig ist hierbei allerdings, dass man auch die Breite der Inhaltsbox von 754 px um etwa 50 Pixel vergrößert. Sonst würde sich schließlich nichts verändern.
Also: Das Menüband muss größer werden, und ebenso die Mindestbreite des Displays für dieses Design.
kleineres Menü: Inhalt oder Design
Eine weniger elegante Lösung ist es freilich, einen Menüpunkt, etwa „Wetter“ oder „Ihre Meinung“ wegzulassen, sodass „Mehr“ noch in die eine Zeile passt.
Das ist offensichtlich Quatsch. Das Design sollte immer dem Inhalt gerecht werden, nicht aber sollte der Inhalt weichen müssen. Auch sollte man nicht an der Schriftgröße herumdoktern müssen. All dies kann keine ernsthafte Lösung sein.
Sicher könnte man auch die Breite des Menübands, wie auch der Content-Boxen, variabel gestalten, aber grundsätzlich ist am Tagesschau.de-Designkonzept nichts auszusetzen, sodass die erste Lösung umzusetzen wäre.
Werkzeuge
Es folgt noch eine (sehr) kurze Auflistung der nützlichen Werkzeuge für diese Analyse: Wodurch hat der Webseitenbesucher Zugriff auf diese, hier dargestellten Informationen, oder: wie kann der „kleine“ Webmaster bzw. Webdesigner die Darstellung in diversen Geräteklassen testen?
Das „Screenfly“-Tool der Webseite quirktools.com ist nur eines von vielen im Netz verfügbaren Werkzeugen, um Webseiten auf verschiedenen Geräten zu simulieren. Mit wenig Aufwand kann man ohne den eigenen physischen Besitz eine Webseite auf Smartphones und Tablets anzeigen lassen.
Mindestens ebenso wichtig ist es, einen Browser zu haben, der nicht bloß den Konsum-Modus für Webseiten hat, sondern Webentwicklern nützliche Werkzeuge bietet. Googles Chrome oder Chromium haben solche Tools.
Mit Chrome ist es kinderleicht, relevante Zeilen aus dem HTML-Code und der CSS-Datei für Elemente aus einer Webseite zu finden. In diesem Abschnitt sieht man beispielsweise, dass die Anzeige für Displays mit einer maximalen Breite von 479 Pixel und einer Mindestbreite von 0 Pixel geschaffen wurde. Die relevante CSS-Datei für diese Geräteklasse ist xs.css. Mit Chrome kann man außerdem einzelne Zuweisungen von Eigenschaften für Elementklassen aktivieren und deaktivieren, um die Wirkungen einer Zeile Code zu sehen.
Fazit
Die heutige Zeit stellt mit ihrer vielfältigen Hardware-Landschaft besondere Anforderungen an Webdesigner. Diese haben geschickte Lösungen dafür entwickelt. So auch die Designer hinter Tagesschau.de. Für eine Geräteklasse ist ihnen allerdings ein Fehler unterlaufen, der sich nicht gut einfügt in das Gesamtbild dieser Webseite. Dieser kann leicht behoben werden. Mit den richtigen Tools kann jeder Webdesigner schnell den Fehler erkennen.
In diesem Fall müssen bloß zwei Zahlen verändert werden: Zum einen darf die m.css-Designdatei nicht für zu kleine Displays aufgerufen werden und zum anderen muss die Breite des Menübandes (bzw. aller Content-Boxen) um wenige Pixel vergrößert werden.
Was für Tagesschau.de gilt, betrifft ebenso Sportschau.de. Das Design ist strukturell gleich, ebenso der (ästhetische) Fehler bei dem Medium-Design:
Vielleicht ist das unschöne zweizeilige Menü also kein Unfall, sondern in Kauf genommen, oder gar gewollt …
