Anzeige
Anzeige
UX & Design

Mit responsiven Inhalten die Website personalisieren: Content ist wie Wasser

Fünf Jahre nach Erfindung dürften die Grundprinzipien des „Responsive Webdesign“ bei den meisten neu konzipierten Websites Anwendung finden: Layouts passen sich Geräten an und Interaktionselemente berücksichtigen Maus- wie Wischgesten. Zeit, sich dem nächsten Baustein zu widmen: responsive Inhalte.

8 Min.
Artikel merken
Anzeige
Anzeige

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

Anzeige
Anzeige

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.

Anzeige
Anzeige
Unterschiedliche Bilder, abhängig von der Gerätegröße
<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.

Anzeige
Anzeige

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.

Anzeige
Anzeige
Das Online-Magazin The Chap liefert für schmalere Bildschirmbreiten kleinere Artikelbilder aus und sortiert die Nachrichten untereinander statt dreispaltig.
Das Online-Magazin The Chap liefert für schmalere Bildschirmbreiten kleinere Artikelbilder aus und sortiert die Nachrichten untereinander statt dreispaltig.

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:

Horizontalen Raum ermitteln
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.

Die neuseeländische Kiwibank zeigt mobilen Besuchern eine komplett andere Site – so wird etwa an promintenter Stelle auf die telefonische Beratung hingewiesen.
Die neuseeländische Kiwibank zeigt mobilen Besuchern eine komplett andere Site – so wird etwa an promintenter Stelle auf die telefonische Beratung hingewiesen.

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].

Anzeige
Anzeige

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:

Markierungen im Local Storage
// 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.

Anzeige
Anzeige

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:

Abfrage Netzanbindung durch Netinfo-API
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.

Abstand zwischen zwei (Geo-)Positionen in Kilometern
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].

Anzeige
Anzeige

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:

Anzuzeigende Inhaltsblöcke
<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

CSS für die Umsortierung der Blöcke
.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:

Anzeige
Anzeige
CSS-Klasse für den ersten Seitenaufruf
<body class=“first-visit“>

Listing 8

als auch in Form eines abfragbaren reader-Objekts:

Abfrage wievielter Seitenbesuch
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:

Link auf Map oder Einbettung
<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:

Anzeige
Anzeige
  • 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:

Verbindungsart herausfinden
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:

Link bei mobiler Verbindung
<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.

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
Kommentare

Community-Richtlinien

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Kommentar abgeben

Melde dich an, um Kommentare schreiben und mit anderen Leser:innen und unseren Autor:innen diskutieren zu können.

Anmelden und kommentieren

Du hast noch keinen t3n-Account? Hier registrieren

Anzeige
Anzeige