Mit responsiven Inhalten die Website personalisieren: Content ist wie Wasser
Was sind eigentlich responsive Inhalte? Gemeint ist damit zunächst einmal ganz allgemein, dass sich die Inhalte einer Seite abhängig von bestimmten Bedingungen dynamisch anpassen. Diese Bedingungen lassen sich grob in zwei Kontexte fassen: Den gerätebezogenen und den besuchsbezogenen Kontext.
Der gerätebezogene Kontext
Der gerätebezogene Kontext ähnelt stark unserem Vorgehen beim Erstellen responsiver Layouts, bei dem wir durch Abfragen von Gerätefähigkeiten via CSS-Media-Queries in verschiedene angepasste Layouts verzweigen. So wie sich Layouts für einen optimalen Lesegenuss anpassen, können Inhalte für verschiedene Geräte unterschiedlich aufbereitet eingebunden werden:
- Inhalte könnten abhängig von der Viewportgröße, der Größe des Container-Elements oder der aktuellen Scrollposition geladen und angezeigt werden.
- Inhalte können entweder grundsätzlich abweichen oder anders sortiert sein, je nachdem, was für ein Gerät auf die Website zugreift.
- Auch die Art des Eingabegeräts lässt sich zu Rate ziehen, Interaktionselemente könnten dazu passende Formen annehmen.
Tatsächlich hat sich das Thema der gerätebezogenen responsiven Inhalte schon unbemerkt in unseren Entwickleralltag geschlichen, und zwar in Form des <picture>-Elements: Abhängig von den Fähigkeiten des Geräts und der aktuellen Anbindung entscheidet der Browser, welchen Bild-Detailgrad und Bild-Ausschnitt er anzeigt.
<picture> <source media="(min-width: 45em)" srcset="large.jpg"> <source media="(min-width: 32em)" srcset="med.jpg"> <img xsrc="small.jpg" alt="The president giving an award."> </picture>
Listing 1
Bislang ist das <picture>-Element der einzige native HTML-Baustein, der über solche Fähigkeiten verfügt.
Ein weiteres Szenario für gerätebezogenen Kontext könnte eine Site sein, die ergänzende Inhalte in einer Seitenleiste bereitstellt, sobald der Bildschirm des Besuchers entsprechend Platz hergibt.
Dieser Effekt lässt sich zwar auch in CSS über Mediaqueries bewirken, das hat aber den großen Nachteil, dass das betroffene HTML weiterhin komplett an das Zielgerät gesendet wird. Es müsste also serverseitig jedes Mal mit mehr oder weniger vielen Datenbankabfragen zusammengebaut werden. Zudem würde der Browser es auch parsen und alle darin befindlichen Bilder nachladen. Die Last bliebe also nahezu gleich.
Besser ist deshalb ein Ansatz, bei dem nur der Hauptinhalt Bestandteil des HTML-Dokuments ist und ergänzende Inhalte bei Bedarf via AJAX dazugeladen werden. Zu diesem Zweck kann man sich window.matchMedia() bedienen, dem JavaScript-Pendant zu den CSS-Mediaqueries:
if (matchMedia("(min-width: 60em)").matches) { // Das Gerät verfügt über genug horizontalen Raum }
Listing 2
Wer den Ansatz nicht mag, ganze Inhaltsblöcke bei kleinen Layouts wegzulassen, für den gibt es auch die Möglichkeit, auf eine inhaltlich komprimierte Fassung zu wechseln. Das setzt allerdings Mithilfe durch die Kollegen aus der Redaktion voraus, denn die müssen dann verschieden lange Versionen ihrer Inhalte produzieren.
Der besuchsbezogene Kontext
Der besuchsbezogene Kontext betrachtet die individuellen Charakteristiken des jeweiligen Besuchs: Handelt es sich um einen wiederkehrenden Besucher? Auf welchem Transportweg wird die Seite abgerufen? Und von wo? Zu welcher Tageszeit? Und was lässt sich daraus für ein Bedürfnis des Besuchers ableiten? Websites, die dieses Bedürfnis vorwegnehmen und optimal bedienen, steigern die Zufriedenheit Ihrer Besucher. Ben Brown prägte 2013 dafür den Begriff des „Reader Aware Design“ [1].
Ein Szenario wäre eine Website, die beim ersten Besuch auf ihrer Willkommensseite den Besucher an die Hand nimmt und ihn zunächst ausgewogen auf seinen Strauß von Inhalten hinweist. Beim darauffolgenden Besuch fällt das An-die-Hand-Nehmen jedoch weg. Und vielleicht liegt der Inhalt, den sich der Besucher zuletzt angeschaut hat, nun viel prominenter im Zugriff. Technisch lässt sich das am einfachsten durch Setzen von Markierungen im Local Storage des Browsers bewerkstelligen:
// Datum und Thema des letzten Besuchs speichern localStorage.setItem('lastVisit', (new Date()).getTime()); localStorage.setItem('lastTopic', 'services'); // Datum und Thema des letzten Besuchs abfragen var hasVisited = !!localStorage.getItem('lastVisit'); // true / false var lastVisit = new Date(localStorage.getItem('lastVisit')); var lastTopic = localStorage.getItem('lastTopic');
Listing 3
Das nächste Beispiel ist eine Job-Website, die von Betriebssystem und Browser des Besuchers abhängig macht, welche Jobangebote prominent hervorgehoben werden. Auch wenn dem Ganzen der Geruch des Schubladendenkens anhaftet, so kann man doch sagen, dass die Wahl der Systemplattform und des Browsers gewisse Hinweise auf den Beruf respektive den privaten Lifestyle geben (je nach Tag und Tageszeit). So könnten Apple/Safari-Benutzer stärker auf Designer-, Apple/Chrome-Benutzer auf Programmierer-, Linux-Benutzer auf Administratoren- und Windows/Internet Explorer-Benutzer auf administrative Stellenangebote hingewiesen werden.
Besondere Preise für Apple-Nutzer |
Im Jahr 2012 kam heraus, dass das US-amerikanische Reiseportal Orbitz Apple-Benutzern deutlich luxuriösere Hotels und Mietwagen anbot als allen anderen Besuchern. Inwieweit diese Maßnahme das gewünschte Ergebnis gebracht hat, ist nicht übermittelt. |
Eine Restaurant-Website ist ebenfalls ein guter Kandidat für responsive Inhalte. So könnte die Site je nach Tageszeit entweder die Mittags- oder die Abendkarte in den Vordergrund rücken oder aber, mit Blick aufs Datum, deutlich darauf hinweisen, dass gerade Ruhetag ist. Des Weiteren könnte die Site den Bereich Anfahrt/Parken für den Fall prominent hervorheben, dass die Site via Mobilfunk und nicht WLAN aufgerufen wird, weil das darauf hindeuten könnte, dass der-/diejenige dorthin unterwegs ist.
Chrome auf Android, der Android-Browser und auch FirefoxOS unterstützen die Netinfo-API, über die man herausbekommt, wie der Benutzer gerade ans Netz angebunden ist:
if (navigator.connection && navigator.connection.type === 'cellular') { // Benutzer ist per Mobilfunk unterwegs }
Listing 4
Alternativ könnten Entwickler auch die Geolocation-API befragen und alle Parkplatzinfos in den Vordergrund rücken, sobald der Benutzer einen bestimmten Abstand zum Ziel unterschritten hat.
function distance(coords1, coords2) { var radlat1 = Math.PI * coords1.lat / 180, radlat2 = Math.PI * coords2.lat / 180, theta = coords1.lng - coords2.lng, radtheta = Math.PI * theta / 180, dist = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta); return Math.acos(dist) * 20014.1238528 / Math.PI; }
Listing 5
Eine Veranstaltungssite wiederum könnte offline-fähig gemacht werden, sodass sie nach einem ersten Besuch für immer unter ihrer URL abrufbar bleibt, auch wenn die Verbindung gerade einmal weg sein sollte. Durch eine Abfrage von navigator.onLine ließe sich fortan per JavaScript herausfinden, ob ein Aufruf gerade mit oder ohne Netzzugriff stattgefunden hat (true oder false). Im letzteren Fall könnten alle Links zum Kauf von Tickets auf eine Unterseite für telefonische Bestellungen umgeleitet werden. Auch ließe sich dann eine dynamische Google-Maps-Karte auf einer Anfahrtsseite durch eine statische Version ersetzen [2].
Inhalte Umsortieren leichtgemacht
Modernes CSS macht es zum Kinderspiel, Inhalte basierend auf solchen Tests gemäß unseren Vorstellungen umzusortieren. CSS-Flexbox zum Beispiel kennt eine Eigenschaft namens „order“, mit der wir die Anzeigereihenfolge von Inhaltsblöcken ganz einfach durch Setzen einer Klasse beeinflussen können:
<div class="container contact-ontop"> <div id="welcome" class="item">Welcome</div> <div id="menu" class="item">Menu</div> <div id="contact" class="item">Contact</div> </div>
Listing 6
.container { display: flex; flex-direction: column; align-items: stretch; } /* Kontakt/Anfahrt nach oben sortieren */ .contact-ontop #contact { order: -1; }
Listing 7
Externe Helfer
Wer keine Lust hat, diese ganzen Mechanismen händisch zu implementieren, findet Hilfe bei diversen JavaScript-Bibliotheken, die sich auf das Thema konzentrieren.
Da wäre zum einen Aware.js [3] des weiter oben erwähnten Ben Brown – ein jQuery-Plugin, das zum einen die Besuchsfrequenz überwacht und zum anderen auch Informationen zur Tageszeit während eines Besuchs bereitstellt. Diese Informationen tauchen sowohl als CSS-Klassen im <body> -Element auf:
<body class=“first-visit“>
Listing 8
als auch in Form eines abfragbaren reader-Objekts:
if (reader.firstVisit) { // Benutzer ist (mit diesem Browser) zum ersten Mal auf der Seite }
Listing 9
Einen weiteren interessanten Ansatz verfolgt Rik Schenninks Conditioner.js [4], der allerdings eine gewisse Bereitschaft voraussetzt, sich mit dem JavaScript-Modulloader RequireJS auseinanderzusetzen. Er macht es möglich, responsives Verhalten direkt im HTML auszuzeichnen. Der nachfolgende HTML-Schnipsel startet zum Beispiel als purer Link auf eine Google-Karte und mutiert anschließend auf großen Bildschirmen zu einer eingebetteten Karte:
<a href="http://maps.google.com/?ll=51.741,3.822" data-module="ui/Map" data-conditions="media:{(min-width:40em)}>Karte anzeigen</a>
Listing 10
Conditioner.js liefert reichlich seiner „Conditions“ mit, die man nicht nur einzeln, sondern auch in Kombination via „and“ oder „or“ einsetzen kann:
- Media-Queries: media:{media query}
- Element-Queries: element:{min-width:x}, element:{max-width:x}
- In den Viewport gescrollt: element:{seen}
- Anwesenheit eines Zeigegeräts: pointer:{available}
- Bestehende Internetverbindung: connection:{any}
Wem das nicht reicht, der kann den Conditioner relativ leicht mit weiteren Abfragen ausrüsten. Die bei zutreffender Bedingung zu ladenden Module muss man grundsätzlich selbst schreiben, aber sowohl für selbstgeschriebene Conditions als auch für diese Module hält die Dokumentation verständliche Code-Gerüste bereit.
Nicht zuletzt gibt es noch eine Bibliothek namens intention.js [5], die ähnlich wie Conditioner.js aus HTML heraus responsives Verhalten steuert. Hier dürften sich all jene zu Hause fühlen, die der RequireJS-Bestandteil in Conditioner.js abschreckt. Intention.js setzt jQuery und Underscore.js voraus (oder das damit kompatible lodash.js) und liefert in Form einer Huckepack-Datei namens context.js eine Reihe von vorgefertigten Gerätetests mit. Darüber hinaus kann (und sollte) man eigene Tests schreiben. Diese lassen sich anschließend im Markup in besonderen HTML-Attributen referenzieren, welche die betroffenen Elemente entweder mit zusätzlichen CSS-Klassen ausstaffieren, deren Attribute, wie etwa „href“ und „src“ manipulieren oder die Reihenfolge der Elemente im DOM verändern.
Wenn Entwickler wie oben beschrieben wollen, dass eine Veranstaltungssite im Falle fehlender Onlineverbindung einen Menüeintrag „Karten kaufen“ von einem Shop auf eine telefonische Bestellseite umleitet, so würden wir zunächst einen Test für den Verbindungsstatus erstellen:
var intent = new Intention(), connection_axis = intent.responsive({ ID: 'connection', contexts: [ { name: 'online', val: true }, { name: 'offline', val: false } ], matcher: function(measure, context){ return measure === context.val; }, measure: function(){ return navigator.onLine; } });
Listing 11
Anschließend lässt sich das Link-Element folgendermaßen auszeichnen – ein überschaubarer Aufwand, der aber für Nutzer und Veranstalter große Vorteile bietet:
<a href="/shop" intent in-connection-href="/phone-order"> Karten kaufen</a>
Listing 12
Die mitdenkende Website
Das Thema „Responsive“ ist, wie wir sehen, noch lange nicht zu Ende gedacht. Der Originalbegriff ließe sich ja am besten mit „sich anpassend“ beschreiben – aber warum sollten wir ausschließlich unsere Layouts für den Besucher maßschneidern und nicht auch unsere Inhalte? Im Idealfall steht am Ende der Reise eine Site, die bei jedem Individuum zu jedem Zeitpunkt in Details anders ausschaut und arbeitet – weil das Interface Nutzeraktionen antizipiert und mitdenkt.
Überfordert das den Benutzer? Möglicherweise. Der hat allerdings in der Vergangenheit schon gelernt, dass eine Site je nach Gerät und Browser anders aussehen kann. Wenn er also nicht im Dunkeln darüber gelassen wird, was da vor seinen Augen stattfindet, so bin ich überzeugt, dass er die Idee gutheißen und sich an den neu gewonnenen Komfort gewöhnen wird.