Die massenhafte Verbreitung mobiler Endgeräte hat dafür gesorgt, dass digitaler Content geräte- und plattformübergreifend richtig dargestellt werden muss. Als vitale Strategien haben sich in den vergangenen Jahren das Responsive und Adaptive Design etabliert. Allerdings bleibt bei beiden Ansätzen der Aspekt der Content-Experience auf technische Fragen begrenzt. Das will nun der Ansatz des Multi-Device-Design ändern.

Digitale Medien unterliegen nicht mehr den gleichen Einschränkungen wie traditionelle Medien. Statt sich wie bisher an den Vorgaben eines physischen Trägers zu orientieren, gibt es nun eine Fülle unterschiedlicher Publikationskanäle für digitalen Content.

Veröffentlichungen im Netz unterscheiden sich deshalb fundamental von Publikationen im Printbereich. Im Unterschied zur klassischen Ausgabeform ist im digitalen Bereich nicht mehr gewährleistet, dass das, was beispielsweise auf Desktop-PCs funktioniert, automatisch die beste Lösung für mobile Endgeräte, Smartwatches oder Smart-TVs ist.

Die mobile Revolution hat es nicht nur möglich gemacht, dass die Nutzer von nahezu überall und jederzeit auf Content-Angebote zurückgreifen können. Die Entwicklung hat es außerdem zu verantworten, dass sich die Ausgabe, Gestaltung und Präsentation von Inhalten im Online-Bereich je nach Plattform und Gerät unterscheiden muss, um eine gute Content-Experience gewährleisten zu können.

In einer stark vernetzten Welt emanzipieren sich die Inhalte deswegen immer mehr von ihrer Form. Im Mittelpunkt der Content-Produktion steht mittlerweile ihre Funktion, die darin besteht, den Usern geräte- und plattformübergreifend die bestmögliche Erfahrung im Umgang mit digitalen Angeboten zu bieten.

User Experience: Responsive oder Adaptive?

Inhalte, die nur auf ein Gerät oder auf eine Plattform zugeschnitten sind, spielen daher im Netz kaum noch eine Rolle. Um für eine einheitliche Anzeige und Lesbarkeit zu sorgen, haben sich Jeremy Girard zufolge in den vergangenen Jahren zwei Strategien etabliert: das Responsive und das Adaptive Design.

Responsive Design: Bei der responsiven Gestaltung wird ein Layout mithilfe von HMTL5 und CSS3 Media-Queries an sämtliche bestehende sowie künftige Bildschirmauflösungen angepasst. Die Reduzierung auf einen Entwurf wirkt sich nicht nur positiv auf die Design- und Entwicklungsphase aus, sondern vereinfacht ebenfalls die anschließende Instandhaltung und Pflege.

Nachteile: Im Nachhinein gestaltet sich eine Anpassung der Seiteninhalte als äußerst schwierig. Solche Umbauten erfordern meistens ein kostspieliges und zeitintensives Redesign. Da sämtliche Designentscheidungen auf allen Geräten und Plattformen funktionieren müssen, sind die Optionen für Gestalter oftmals sehr limitiert. Die Inhalte mögen so zwar richtig dargestellt werden; die visuelle Umsetzung ist aber nur selten ideal. Der größte Kritikpunkt liegt jedoch darin, dass durch den Einsatz einer einzigen Ausgabequelle die Optimierung der Ressourcen – wie etwa Bilder oder Videos – sehr schwer fällt.

Adaptive Design: Das Adaptive Design reagiert auf die Nachteile des Responsive Design. Bei der adaptiven Gestaltung werden auf Grundlage zuvor festgelegter Break-Points verschiedene Seitenlayouts entworfen, die für unterschiedliche Auflösungen und Geräte optimiert sind. Auf diese Weise besitzen Designer einen größeren Gestaltungsspielraum und Entwickler können die Ressourcen besser an die Ausgabequellen anpassen.

Nachteile: Die Vorteile des Adaptive Designs sind zugleich dessen Nachteile. Im Gegensatz zur responsiven Gestaltung erstreckt sich die adaptive Anpassung nur auf Displaygrößen, die im Vorhinein festgelegt wurden. Exotische oder noch unbekannte Auflösungen können durch diesen Ansatz nicht erfasst werden. Außerdem erhöht die Ermittlung verschiedener Break-Points nicht nur die Design- und Entwicklungsdauer, sondern auch die Seitenpflege nimmt mehr Zeit in Anspruch.

Die Kombi macht’s: Multi-Device-Design

Die Nutzer erwarten allerdings heutzutage nicht nur, dass Dienste und Services richtig dargestellt werden. Sie wollen die unterschiedlichen Angebote auf mehreren Geräten miteinander verknüpfen und ihre Gehalte plattformübergreifend mit anderen teilen. Hierbei steht weniger die technische Umsetzung, sondern vielmehr die User Experience im Mittelpunkt.

Zwar ist bei der adaptiven Umsetzung die Frage der UX durchaus präsent; wie Jeremy Girard aber ganz richtig argumentiert, entfalten die beiden Designprinzipien erst in Kombination ihr vollständiges Potenzial. Durch die Verbindung von responsiven und adaptiven Ansätzen richtet sich der Fokus nicht mehr länger ausschließlich auf die technische Umsetzung und die Verbesserung der Anzeige sowie Lesbarkeit. Stattdessen rückt die Erfahrung der Nutzer bei der geräte- und plattformübergreifenden Optimierung des Contents in den Mittelpunkt.

Girard verdeutlicht diesen Punkt anhand von zwei Beispielen. Bei Adaptive Images etwa erfolgt die Skalierung der Inhalte weiterhin responsiv. Allerdings werden per JavaScript die Auflösungen ermittelt und die Dateien automatisch angepasst. Bei der RESS-Methode hingegen kommt ein responsives Layout zum Einsatz, dessen Elemente serverseitig an die Anforderungen der jeweiligen Gerätetypen angepasst werden.

Adaptive Images und RESS zeigen, wie die technischen Vor- und Nachteile der beiden Ansätze so miteinander kombiniert werden können, dass sie in erster Linie die Erfahrung der Nutzer positiv beeinflussen. Denn sowohl die Verbesserung der Performance als auch die Verringerung der Ladezeit sind zwei wesentliche Faktoren einer guten User Experience.

Situationsspezifische Daten sammeln

Jedoch muss die Steigerung der UX im Multi-Device-Design nicht bei der Performance enden. Die serverseitige Ermittlung von Daten macht nicht an der Bestimmung der Auflösung und Ladegeschwindigkeit halt, sondern kann weitergehende kontext- und personenbezogene Daten umfassen.

So hat Karen McGrane eine ausführliche Liste zusammengestellt, welche Faktoren Einfluss auf die Gestaltung des Contents nehmen können:

• Device (Betriebssystem, Mobile, Tablet, Desktop, Bildschirmauflösung)
• Kontext (Zeit, Ort, Geschwindigkeit und Temperatur des Geräts)
• Person (Alter, Geschlecht, Lebensabschnitt, Sprache, Beziehungsstatus)

 

Erleben Sie Karen McGrane live auf der webinale 2016 in Berlin:

Die Auswertung von Meta- und Echtzeitdaten erlaubt es – wie es Ric van Westhreenen mit seinem Konzept des „Situational Web Design“ gezeigt hat – kontextbezogene und personenspezifische Aspekte in den Multi-Device-Design-Vorschlag von Girard zu integrieren.

Darüber hinaus bietet der Adaptive-Content-Ansatz von McGrane einen guten Leitfaden, wie bereits bei der Content-Erstellung der Fokus auf eine situationsgerechte Anpassungsfähigkeit und Wiederverwendbarkeit von Inhalten gelegt werden kann.

Wird das Konzept von Girard durch diese zwei Punkte erweitert, kommt man zu folgendem Ergebnis:

Multi-Device-Design: Die Verbindung von responsiven und adaptiven Techniken sorgt dafür, dass der Content durch die Kombination technischer, kontextbezogener und userspezifischer Informationen nicht nur geräte- und plattformübergreifend, sondern auch situationsgerecht dargestellt wird. Dadurch steht die User Experience nicht nur bei der technischen Umsetzung, sondern bei allen Punkten der Skalierung und Ausgabe von Inhalten im Mittelpunkt.

Fazit

Der Multi-Device-Design-Ansatz kombiniert responsive und adaptive Methoden, um die Anpassung des Contents nicht nur geräte- und plattformübergreifend, sondern ebenfalls situationsgerecht umzusetzen. Kontext- und personenbezogene Daten sorgen dafür, das die User Experience nicht nur bei technischen Fragen, sondern bei sämtlichen Prozessen der Content-Erstellung und -Distribution in den Mittelpunkt rückt. Das Ziel: den Nutzern die bestmögliche Erfahrung im Umgang mit digitalen Inhalten zu ermöglichen.

Aufmacherbild: Hands Holding Digital Devices via Shutterstock / Urheberrecht: Rawpixel.com