Die (mobile) Website der Zukunft

USAtoday.com – eine richtungsweisende, tabletoptimierte Website

Im September 2012 wurde das Online-Magazin USAtoday.com mit dem „Cutting-Edge-Award“ ausgezeichnet. Zu Recht: Die Site bietet ein browserbasiertes Interneterlebnis völlig neuer Art. Willkommen auf einer Reise in die Gegenwart und die Zukunft Tablet-optimierter Websites.

Der Tablet-First-Ansatz

Tablets werden immer beliebter. Ihr Einfluss auf die Gestaltung von Websites wird täglich größer. Dabei fing alles ganz harmlos an: Zuerst waren es einzelne Flash-Videos, die durch Quicktime-Movies ersetzt wurden, damit sie auch auf dem iPad angezeigt werden können. Es folgten Tablet-optimierte Bildergalerien in HTML5, die durch Wischen bewegt werden können. Mittlerweile entstehen ganze Portale, die nach dem Motto „Tablet first“ mit einer Vielzahl mobile-optimierter Features umgesetzt werden.

In den Desktop-Versionen der Portale werden die mobilen Bedien- und Gestaltungselemente zwar häufig auch angezeigt, sind hier aber eigentlich nicht erforderlich. Dennoch gehört es inzwischen zum guten Ton, die haptische Navigation einer mobilen Website auch im Desktopbrowser nachzuahmen.

Der Tablet-First-Ansatz ist bei crossmedialen Nutzungs-Szenarien besonders relevant. Das ist bei fernsehbegleitenden 2nd-Screen-Themen ebenso der Fall wie bei digitalen Versionen von Print- und Katalog-Angeboten. Hier ist das Tablet als „Couch-Medium“ das wichtigste Bindeglied zwischen klassischen Inhalten und den verschiedenen Devices.

 

Aufgrund dieser verbindenden Stellung werden immer mehr Webangebote für das Tablet optimiert, denn auf diesem Device können Inhalte der klassischen Medien (insbesondere Bewegtbild & Schlagzeilen) mit alten Gewohnheiten (z.B. Blättern von Seiten) kombiniert werden. Ein solches, Tablet-optimiertes Portal ist www.usatoday.com. Das Online-Magazin eröffnet Nutzungsszenarien, die bislang kaum von Websites und bestenfalls von Apps bekannt waren: Darunter eine 3d-Blätterfunktion, einen mehrstufiges Content-Layer-Konzept sowie allerlei neuartige Bedienelemente.

Navigation und Responsive Design

Die Device-optimierte Darstellung der Inhalte wird durch die Verwendung eines Responsive Designs ermöglicht. Beim Responsive Design werden die Inhalte der Site an die jeweilige Bildschirmauflösung angepasst. Dies ist beim Tablet häufig schon dann relevant, wenn der User zwischen Portrait- und Panorama-View wechselt, also das Tablet dreht und damit die Bildschirmbreite verändert.

Wer nicht auf dem Bürostuhl am PC sitzt, sondern mit seinem Tablet gemütlich auf der Couch liegt, navigiert auch anders: USAtoday.com kann aus diesem Grund bequem mit beiden Daumen navigiert werden. Selbst bei diesem äußert legeren „lean back-Szenario“ ist ein Wechsel zwischen den 1st-Level-Bereichen „News“, „Sports“, „Life“, „Money“ etc. ohne einen einzigen Klick auf die Hauptnavigation möglich – im Grunde kann man diese deshalb sogar weglassen.

Insofern mag es auch nicht verwundern, dass eine Sublevel-Navigation erst gar nicht vorhanden ist. Sie wird durch eine Auflistung von Schlagzeilen ersetzt. Die Logik ist dabei ähnlich wie bei der Anzeige von Facebook-Einträgen: Die Schlagzeilen können durch Klick auf den Button „show more news“ beliebig in Richtung Vergangenheit vertieft bzw. verlängert werden.

Darüber hinaus kann der User unterschiedliche Darstellungsoptionen beim Anzeigen der Headlines nutzen: Diese lassen sich entweder als Grid- oder als List-view darstellen. Eher visuell orientierte Leser können sich durch dieses Feature die Site bildhaft anschauen. Eher textlich orientierte Leser bekommen die Inhalte informativ präsentiert. Der Wechsel dieser Views ist ganz ohne Reload möglich.

Tablet-optimierte Integration von Werbung

Eine weitere Besonderheit ist die Tablet-optimierte Integration von Werbung: Die auf deutschen Portalen üblicherweise auftauchenden Skyscraper, Rectangles und Full-Banner etc. sind zwar auch international standardisiert (vgl. die Übersicht bei www.werbeformen.de), aber auf diesem Portal kaum zu finden. Dies ist ein mutmaßliches Zugeständnis an die Bildschirmauflösung, an das Responsive Design sowie vermutlich auch an die Nutzungsgewohnheiten von Tablet-Usern: Diese akzeptieren nämlich nicht ohne weiteres die von Desktoprechnern bekannten Werbeformate (vgl. zu diesen und ähnlichen Fragen den interessanten Artikel „Tablets verändern die Welt“ in der SZ).

Natürlich kommt auch dieses Portal nicht ohne Werbung aus: Ganz im Gegenteil! Diese ist jedoch – den Nutzungsgewohnheiten beim Tablet entsprechend – anders platziert als man dies bislang gewöhnt ist: Sie wird zum einen als Layer am rechten Rand über das Contentangebot gelegt. Der Layer kann durch einen Klick geschlossen werden, danach ist der Content nahezu werbefrei. Alternativ werden auf den Hauptseiten großflächige Werbeplätze am oberen Bildschirmrand verwendet. Diese sind entweder Display- oder Video-Ads. Damit sie angezeigt werden können, wird der Contentbereich komplett nach unten verschoben. Schließt man diese Werbeplätze, schnellt der Contentbereich wieder nach oben zurück. Erneut ist der Content nahezu werbefrei.

Sicher ist: Awareness ist dadurch garantiert! Man mag allerdings darüber philosophieren, ob diese Lösungen schon der Weisheit letzter Schluss sind. Doch gilt es zu beachten, dass die Platzierung von Werbung auf Tablets in Kombination mit Responsive Design neue Lösungsvorschläge fordert – auf USAtoday.com bekommt man zumindest eine grobe Ahnung, wie Tablet-taugliche Werbestandards der Zukunft aussehen und bedient werden können.

3D-Pageflip und Stöbermodus

Ein weiteres Highlight ist eine an Flipboard erinnernde Funktion: Das 3D-Blättern durch Schlagzeilen mit Fullscreen-Bildern. Die Performance dieser HTML5-basierten Lösung ist stark vom verwendeten Browser abhängig. Auf bestimmten Browsern wie z.B. dem Internet Explorer 8 wird das Feature gar nicht erst angeboten. Bei Firefox, Chrome und Safari ist es über das Blättern-Symbol in der Hauptnavigation aktivierbar. Anders als die anderen Hauptthemen ist dieser Modus nicht durch die seitlichen Hauptbuttons zu erreichen, sondern ausschließlich über die Hauptnavigation.

Wer sich für diese Ansicht entschließt, wird belohnt: Die sehr plakative Darstellung macht nicht nur auf dem Tablet Lust auf ewiges Weiterblättern. Wer sich für die Details einer Schlagzeile interessiert, kann durch einfachen Klick auf die Textteaser den Detail-View öffnen. Der zur Schlagseite gehörige Artikel wird dann als Layer über das angezeigte Bild gelegt. Dieser kann durch Klick auf das Schließen-Symbol am rechten Bildrand wieder geschlossen werden. Diese Lösung ist für Tablets besonders gut geeignet, da der geringe Platz optimal genutzt wird und man durch Schließen des Layers schnell zum Stöber-Modus zurückkehren kann, um weiter zu Blättern.

Feedback und Social-Media-Integration

In jedem Contentlayer ist am unteren Rand ein mit dem Inhalt assoziierter Bereich für Feedback und Social-Media integriert. Bei seiner Aktivierung werden erneut Layer geöffnet, die sich über den Contentlayer legen – quasi als „Layer über dem Layer“ (Multilayer).

Die schichtweise Architektur der Layer sieht damit etwa wie folgt aus:

• Level 1: Stöbern / Blättern / Headlines
• Level 2: Detail-View / Content
• Level 3: Feedback und Social-Media

Die konsequente Multi-Layer-Nutzung über das gesamte Portal hinweg ermöglicht es, komplexe und vernetzte Contents auf dem Tablet aus unterschiedlichster Richtung abzurufen und gleichzeitig den Ausgangspunkt nicht zu verlassen. Klassische Sitemap-Strukturen werden durch diese Architektur nahezu vollständig aufgelöst und durch eine mehrdimensionale Kachel- bzw. Matrix-Struktur ersetzt.

Mediathek und Suche

Ähnlich verhält es sich mit dem zweiten wichtigen Contentformat: den Videos. Über einen Klick auf das entsprechende Kamera-Symbol am oberen Bildschirmrand öffnet sich die Videothek, die sich ebenso wie die Text/Bild-Inhalte bequem mit Daumen oder Finger bedienen lässt. Aufgrund der Verwendung von HTML5 und Javascript erfolgt das Sortieren der Inhalte ebenfalls ohne Reload der Seite.

Alle Inhalte (Text und Video) lassen sich durch eine medienübergreifende Suchfunktion durchstöbern. Durch Klick auf das Suchsymbol am oberen Bildrand öffnet sich dabei ein Suchfeld. Nach Eingabe des Suchbegriffs werden die Treffer mit Video- und Text/Bild-Inhalten als Grid- oder Listview angezeigt. Diese Lösung hat Vor- und Nachteile: Zum einen ist sie im Hinblick auf das Tablet so umgesetzt, dass möglichst jedes Pixel platzsparend genutzt wird. Andererseits erwartet der User bei aufgeklappter Suche mehr als nur ein Texteingabefeld. Es ist jedoch vorstellbar, dass im Laufe der Zeit zusätzliche Features (z.B. Filter) im Suche-Bereich dazu kommen.

Fazit und Ausblick

USAtoday.com ist ein Tablet-optimiertes Online-Magazin völlig neuen Typs. Dies gilt sowohl im Hinblick auf die Darstellung und Strukturierung von Inhalten, aber auch im Hinblick auf die Navigation. Das Portal verdeutlicht zudem, welche Relevanz die Tablet-Optimierung für die Informationsarchitektur und das Contentmanagement besitzt: Durch Hauptseiten, 3D-Blättern und Suche wird ein mehrdimensionaler und universeller Zugang zu den einzelnen Contents erforderlich. Dieses Szenario kann mit dem layerbasierten Modulansatz erfolgreich bewältigt werden. Das gleiche gilt für die contentbezogene Integration von Feedback und Social-Media-Funktionalitäten.

Abschließend noch ein Wort zu HTML5

Der umfangreiche Einsatz dieser Technologie verdeutlicht zum einen tolle Möglichkeiten, aber zum anderen auch die (aktuellen) Grenzen bezüglich Browserkompatibilität und Performance: Um die mobile-optimierten Funktionalitäten der Website bestmöglich zu erleben, sollte man sein iPad nicht mit dem Safari-Browser, sondern mit einem zusätzlich installierten Google-Chrome-Browser nutzen – nur mit dieser Kombination ist das Erlebnis zur Zeit optimal. Wer aber regelmäßig Tablets nutzt, wird die Kombination von iPad und Google-Chrome ohnehin favorisieren: Viele Sites lassen sich so deutlich schneller abrufen, ganz gleich ob mit oder ohne HTML5.

Wer sich schließlich noch die App von USAtoday auf das Tablet downloaded, dem stellt sich wie von selbst die Frage: Wofür brauche ich überhaupt noch eine App auf dem Tablet, wenn der Browser bereits eine derart erlebnisorientierte Darstellung von Inhalten ermöglicht? Meine persönliche Antwort: Die App fürs Tablet braucht bei USAtoday keiner mehr, da bereits die Website nach dem Motto „Tablet-first“ erfolgreich und richtungsweisend umgesetzt wurde.

Das Portal macht Lust auf mehr – nicht nur dann, wenn man es auf dem Tablet nutzt!

Aus diesen und anderen Gründen hat das Portal den „Cutting-Edge-Award“ völlig zu Recht verdient: Das Online-Magazin verdeutlicht nicht nur eine völlig neue User-Experience, durch das Angebot wird auch eine Reihe von Trends und Herausforderungen sichtbar, die alle Portalbetreiber im Auge behalten sollten. Neben Tablet-gerechter Werbeformate zählen dazu 3D-Stöber-Funktionen, Facebook-Einbindung und Fragen der Browserkompatibilität im Hinblick auf HTML5.