Bloomberg im Dr. Web Sitecheck

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010...

Nachrichtenportale scheinen nicht immer empfänglich zu sein für eine zeitgemäße Gestaltung und den Einsatz neuer Techniken wie HTML5 und CSS3. Oftmals wird auf ein starres Layout gesetzt, was der klassischen Bannerwerbung entgegenkommt. Eine gelungene Ausnahme ist die Website des US-amerikanischen Nachrichtenportals Bloomberg, welches vor allem für seine Wirtschaftsnachrichten international bekannt ist.

drweb-sitecheck-bloomberg-teaser_DE

Responsives Layout und übersichtliche Navigation

Während viele Nachrichtenseiten oftmals getrennte Desktop- und Mobilversionen haben, setzt Bloomberg auf ein responsives Layout. In der Desktopansicht findet man eine recht übersichtliche Navigation im Kopfbereich. Deutlich abgesetzt sind dort zwei Menüs angesiedelt. Oben auf der Seite gibt es einen schmalen schwarzen Balken mit Links unter anderem zum Unternehmen und seinen Produkten. Darunter ist ein größerer Bereich mit der eigentlichen Navigation. Über wenige großzügige Links erreicht man die Hauptbereiche des Portals sowie die Suche. Per Mouse-over auf die Links klappt sich ein Layer auf, der je nach Bereich zusätzliche Links und Teaser zu aktuellen Artikeln darstellt.

bloomberg_startseite_navigation
Ausgeklappte Navigation

Über einen Pfeil-Button klappt sich eine ausführliche Navigation auf, über die Unterseiten der jeweiligen Hauptbereiche direkt ausgewählt werden können. Von dort gelangt man auch zu den anderen Nachrichtenseiten „Politics“ und „View“. Bloomberg schafft mit seiner Navigation den schwierigen Spagat zwischen Übersichtlichkeit und Ausführlichkeit.

Bei Bedarf wird die übersichtliche Navigation mit ihren wenigen Links einfach erweitert. So wird man nicht sofort mit einer Vielzahl an Menüpunkten konfrontiert und kann sich sehr komfortabel weiteren Inhalten annähern.

In der Ansicht für Mobilgeräte reduziert sich die Navigation auf den Pfeil-Button sowie die Suche. So bleibt auch die mobile Navigation sehr übersichtlich.

bloomberg_startseite_mobil
Mobilansicht ohne und mit ausgeklappter Navigation

Kennst du unser E-Book-Bundle? Spare jetzt 6,99 €!

E-Book Bundle von Andreas Hecht

Schön ist zudem, dass Bloomberg auf einen überladenen Footer verzichtet. Auch dort findet man nur einige wenige Links.

Mehrspaltigkeit, die sich anpasst

Eine Gemeinsamkeit zu vielen anderen Nachrichtenportalen ist die Mehrspaltigkeit. In der Desktopansicht sind es vier Spalten, auf die die Inhalte verteilt werden. Die zwei schmaleren äußeren Spalten werden für Top-Nachrichten sowie Kommentare und Meinungen genutzt. In den beiden breiten Spalten sind Teaser zu einzelnen Artikeln zu finden. Da die linke Spalte deutlich länger ist als als die anderen drei, sorgt die Website per JavaScript dafür, dass sich die linke Spalte beim Scrollen schneller bewegt als die anderen. So entsteht kein unschöner Freiraum unterhalb der anderen Spalten.

bloomberg_startseite_mehrspaltigkeit
Unterschiedliche Mehrspaltigkeit – je nach verfügbarer Breite

Die Anzahl der Spalten reduziert sich bei schmaler werdender Darstellung. So verschwindet zunächst die rechte und bei noch schmalerer Darstellung auch die linke Spalte. In der Mobilansicht ist letztendlich nur noch eine Spalte vorhanden. Wie es sich für ein ordentliches responsives Layout gehört, werden die Spalten nicht ausgeblendet, sondern als Block innerhalb der verbliebenen Spalten beziehungsweise der letzten verbleibenden Spalte integriert.

Da die Bereiche für die Top-Nachrichten sowie Kommentare und Meinungen ohnehin farblich abgesetzt sind, integrieren sie sich auch gut in die verbliebenen Spalten und unterscheiden sich dank unterschiedlicher Farbgebung auch von den Artikel-Teasern.

HTML5 und CSS3 – aber Flash-Videos

Weitestgehend vorbildlich ist auch der Quelltext und der Einsatz von HTML5 und CSS3. Neben dem „<main>“-Element werden einzelne Bereiche mit dem „<section>“-Element ausgezeichnet. Teaser und Artikel sind per „<article>“-Element umschlossen. Lediglich die Navigation wird nicht mit dem passenden „<nav>“-Element ausgezeichnet.

Aber auch andere HTML-Elemente kommen zum Einsatz. So wird beispielsweise das „<time>“-Element eingesetzt, um das Veröffentlichungsdatum eines Artikels zu deklarieren.

Bei der Gestaltung wird auf CSS3 gesetzt. CSS3-Animationen werden jedoch sehr zurückhaltend eingesetzt. Zum Einblenden von Social-Media-Links werden Animationen verwendet. Während auf Desktoprechnern die Social-Media-Links per Mouse-over eingeblendet werden, lassen sie sich auf Mobilgeräten über einen Button einblenden.

bloomberg_videos
Videoeinbindung

Überraschend ist, dass die Videos der Website standardmäßig über Flash bereitgestellt werden. Lediglich auf Mobilgeräten werden Videos im HTML5-Format angeboten. Das überrascht ein wenig, da ansonsten doch recht vorbildlich HTML5 verwendet wird.

Auffallend bunte Gestaltung

Gestalterisch ist die Farbauswahl für eine Website, die sich vor allem auf Wirtschaftsnachrichten und politische Nachrichten fokussiert hat, durchaus gewagt. Der Grundton ist ein leuchtend dunkles Blau, das durch weitere eher knallige Farben ergänzt wird. Jeder Bereich erhält eine eigene Akzentfarbe.

Während die Startseite von Bloomberg noch eher zurückhaltend und konservativ gehalten ist und die knalligen Farben nur relativ dezent für Linien und Überschriften eingesetzt werden, sind viele Übersichtsseiten der verschiedenen Themenbereiche schon deutlich knalliger in der Gestaltung.

bloomberg_technology
Themenbereich „Technology“

Da rücken die Akzentfarben in den Vordergrund und sorgen für eine ungewöhnlich auffallende Gestaltung. Hier zeigt Bloomberg sehr deutlich, wie sich die Website von anderen Nachrichtenportalen unterscheidet. Insgesamt erhalten die Übersichtsseiten der Themenbereiche teils abweichende Layouts. Gemeinsame Klammer ist jeweils der Kopfbereich, der jedoch auch immer die jeweilige Farbe des Bereichs annimmt.

Dezente Werbung und Barrierefreiheit

Gerade kostenlose Dienste kommen ohne Werbung nicht aus. Das gilt auch für Bloomberg. Allerdings verzichtet die Website auf allzu große Banner. Es gibt im oberen Bereich meist ein Banner und vereinzelt in den Spalten. In keinem Fall sind die Banner aufdringlich oder haben sich über Inhalte gelegt.

Aufgrund des Einsatzes von HTML5-Elementen sind die meisten Inhalte semantisch bereits so ausgezeichnet, dass Screenreader diese entsprechend interpretieren können. Bemängeln kann man bestenfalls, dass zusätzliche ARIA-Eigenschaften für eine noch bessere Auszeichnung einzelner Elemente für Menschen mit Sehbehinderungen gesorgt hätten.

Fazit

Die Website von Bloomberg gehört gestalterisch und technisch derzeit sicher zu den Vorzeigeseiten – vor allem, was Nachrichtenportale betrifft. Responsivität und der Einsatz von HTML5 und CSS3 machen die Seite zu einem Beispiel guter Webentwicklung. Hier und da gibt es sicher Optimierungsmöglichkeiten. Aber den Vergleich zu Mitbewerbern braucht Bloomberg sicher nicht zu fürchten.

(dpe)

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Sortiert nach:   neueste | älteste | beste Bewertung
Frank Hübner
Gast
Wow! Ich hätte nie gedacht, dass ich das mal über eine Nachrichtenseite sagen werde aber die ist wirklich ein kleines Meisterwerk. Soviele Rubriken, mit sovielen Unterobjekten… und alles fliesst und passt sich an. Wenn ich solche Seiten sehe, tun mir immer die Entwickler leid denn kein Besucher wird ihre Arbeit zu würdigen wissen – wahrscheinlich auch nicht der Kunde. Für die User ist es nur eine Seite auf der Texte und Bilder laden und wenn man irgendwo draufklickt lädt halt eine andere Seite. Ich werde jedenfalls öfter mal dort vorbeischauen (wo mich doch die “BLÖD” jetzt aussperrt). Und an Dr.… Read more »
Stephan
Gast
Mhmm, ich kann den Lobgesang nicht ganz Nachvollziehen. Warum: Ich finde das Design sehr unruhig, und das liegt nicht an den vielen verschiedenen Farben – soetwas gefällt mir eher – sondern vorallem an den vielen verschiedenen Schriftarten, Schriftgrössen und Schriftgewichten. Was ich schon finde, ist der Fortschrittsbalken beim Scrollen in Artikeln. Weniger gefällt mir hingegen das infinite-scrolling in Artikeln – das ist technisch schlecht umgesetzt. Es wird dabei zBsp die URL Manipuliert, eventuell aus SEO Gründen, dafür funktioniert das Browser-Zurück nicht mehr (ja, ich verwende das). Weiters läd die Seite (unkontrolliert) Ressourcen nach – selbst als inaktiver Tab, ist dies… Read more »
wpDiscuz