User Experience und Werbebanner im Responsive Design
Kommentare

Anhand von Case Studies zu sehen, wie andere Seiten Responsive Webdesign umgesetzt haben, dürfte für viele Entwickler spannend sein – immerhin lassen sich so Anreize gewinnen, ähnliche Konzepte auch bei eigenen Projekten umzusetzen.

In den letzten Wochen wurde die Online-Präsenz der britischen Zeitung The Guardian sowie deren US-amerikanischen und australischen Ausgaben neu gestaltet – mit dem Ziel, sowohl bei den Lesern für eine bessere User Experience zu sorgen, als auch den Werbepartnern verbesserte Werbemöglichkeiten zu bieten. Im The-Guardian-Blog beschreibt Patrick Stirling, wie man mit der Herausforderung, ein responsives Werbeformat zu designen, umgegangen ist.

Responsive Werbeanzeigen ohne User-Beeinträchtigung

Die Umgestaltung der The-Guardian-Website hat die Webdesigner vor einige Herausforderungen gestellt – insbesondere, was das neue Werbeformat angeht. Angesichts der Tatsache, dass die Website monatlich durchschnittlich von 6000+ verschiedenen Devices aufgerufen wird, ist ein Responsive Design unerlässlich. Gleichzeitig soll auch nicht auf den Einfluss von typischen Werbeaufmachungen wie Page-Skins und eindrucksvollen Werbeformaten für Desktop verzichtet werden.

Um diesem Anspruch der Werbepartner gerecht zu werden, enthält die neue The-Guardian-Website zum Beispiel diese drei Responsive Elemente:

1. Responsive Banner über die volle Display-Breite

Banner für Werbeanzeigen einzusetzen, ist nichts Ungewöhnliches. Das Responsive Banner kann an jeder beliebigen Position innerhalb der Seite eingefügt werden, egal, auf welcher Displaygröße die Seite angezeigt wird. Auch die Art des Contents nimmt auf die Darstellung des Werbebanners keinen Einfluss; es werden immer – je nach Größe des Browsers und Displays – alle Elemente der Werbung, die für die Darstellung auf jeder Displaygröße optimiert wurden, angezeigt.

Dafür wurden die einzelnen Elemente der Werbeanzeige individuell in die HTML5-Unit der Anzeige eingebunden, damit sie bestmöglich auf den vorhandenen Platz im Viewport reagieren kann.

2. Dehnbarer Mittelteil über die volle Breite

Wird die Werbeanzeige dem Leser zum ersten Mal präsentiert, wird sie automatisch ausgedehnt, um einen möglichst großen Einfluss mit der Aussage des Werbebanners auszuüben. Die Herausforderung bei der Implementierung dieses Verhaltens in ein Responsive Design liegt vor allem darin, die Usability – insbesondere die Navigation – nicht zu beeinträchtigen, egal welche Displaygröße oder -Ausrichtung der Leser nutzt.

Um das zu vermeiden, entschieden sich die Webdesigner der neuen The-Guardian-Website dafür, den Mittelteil des Banners nicht nur hinsichtlich der Breite, sondern auch hinsichtlich der Höhe des Viewports Responsive zu gestalten. Dabei wird die Höhe zunächst anhand des Viewports des Devices ausgegeben und an die Displayverhältnisse angepasst, wenn das Werbebanner sich im Viewport befindet – ohne dabei den User beim weiteren Interagieren mit der Seite zu behindern.

3. Parallax MPU

Das dritte Responsive Element, das auf der neu gestalteten The-Guardian-Website eingesetzt wurde, ist ein Parallax MPU, das für eine anhaltende Präsens der Werbelemente sorgt. Dabei scheint der Werbecontent hinter dem eigentlichen Seiteninhalt zu liegen, sodass beim Scrollen der Seite immer nur ein Ausschnitt des Werbebanners angezeigt wird.

Mit dieser Neugestaltung der Website ermöglicht theguardian.com eine bessere User Experience – sowohl für die Leser, als auch für seine Werbepartner. Dazu erklärt Patrick Stirling:

In isolation, each of these formats represents something new for both the Guardian and our clients […] Together, they provide the ability for advertisers to deliver the story they are hoping to communicate in a truly integrated way

Damit zeigt sich, dass ein gelungenes Responsive Design und die erfolgreiche Einbindung von Werbebannern ohne damit den User zu beeinträchtigen, sich nicht ausschließen müssen.

Aufmacherbild: Businessman selecting online internet advertising von Shutterstock / Urheberrecht: Mikko Lemola

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -