Responsive Web Design

„Mobile first“ und „Responsive Web Design“ sind zur Zeit heiße Themen. Nur wenige Sites nutzen responsive web design, aber bei Gesprächen insbesondere über Planung für 2013/2014 kommt das Thema fast immer auf.

Im Grunde ist responsive gar nicht so neu. Die Idee, daß man je nach „Klasse“ von Endgerät unterschiedliche Designs anbietet (Site sieht auf Telefon ganz anders aus als auf PC), und daß innerhalb einer Klasse die Seiten sich anpassen (Wenn ich die Größe meines Browsers leicht ändere, werden Teile der Seite größer oder kleiner aber nichts ändert sich fundamental) gibt es schon seit dem letzten Jahrtausend.

Neu ist, daß mittlerweile so gut wie alle Endgeräte mit modernen Browsern arbeiten und daß man daher die komplette Anpassung per CSS erledigen kann. Neu ist auch, daß es gute Frameworks gibt. Und neu ist, daß mittlerweile viele dieser Frameworks „mobile first“ implementieren.

Für die Inhalte und die erzeugenden Autoren bedeutet das einen Schritt in die Richtung Trennung von Inhalt und Form, oder, um den offensichtlichen Vorteil anzuführen: Man muß Inhalte nur noch einmal bereitstellen. Das HTML ist immer gleich, Mehrarbeit hat nur der Designer mit dem CSS.

Soweit zur Situation.

Webanalyse und Responsive

Warum sollte uns Webanalysten interessieren, wie Inhalte angezeigt werden?

Mehrere Gründe:

• Analyse hilft beim Aufspüren von Engpässen.

  Konversion schlecht auf Telefonen? Shoppingcarts werden auf PCs liegengelassen? Tabletnutzer steigen aus, wenn sie Kreditkartendaten eingeben sollen?

  Wer gerade auf responsive umgestellt hat will sichergehen, daß es keine technischen Gründe für solche Unterschiede gibt.

• Analyse kann aufzeigen wo noch Potential besteht.

  Auch wenn Probleme wie im ersten Punkt angeführt keine technischen Gründe haben ist es immer noch hilfreich, wenn man bei der Planung von A/B Tests schon auf Segmente zurückgreifen kann, deren Sicht der Website ähnlich ist. Tests funktionieren besser, wenn sie gezielt gemacht werden.

• Die allgemeine Frage stellt sich auch: hilft responsive eigentlich ganz generell?

Wenn also klar ist, daß wir uns dafür interessieren sollten, dann bleibt die Frage: Was sollen wir tracken?

Als Grundlage sollte man eine conversion variable benutzen und in dieser die jeweils benutzte Geräteklasse speichern, also z.B. „Telefon“, „Tablet“, „Laptop / Kleiner PC“, „Großbildschirm“.

Man erhält dann Reports wie diesen:

Auf dieser Nachrichtenwebsite scheinen PCs mit großen Bildschirmen nicht so verbreitet zu sein, und diese Benutzer sind unterdurchschnittlich beim Weiterleiten von Artikeln. Das könnte technische Gründe haben, Gründe die von der Demografie dieser Benutzer abhängen (vielleicht sind das alles die Autoren?) oder ganz andere Gründe.

Ansonsten sieht es so aus, als wäre „mobile first“ für diese Site eine gute Idee, immerhin sind „Telefone“ (also kleine Bildschirme) die zweitwichtigsten Konsumenten.

Und wo wir gerade bei Mediensites sind: Die Segmentierung würde man auch gleich für’s Targeting bei den Anzeigen einsetzen, sinnvollerweise. Auf „Telefonen“ kann man Apps bewerben, was auf PCs eher weniger interessant ist.

Wie bekommt man die Daten in die eVar?

Mit Javascript.

Dummerweise ist das Zusammenspiel zwischen CSS und DOM noch nicht ganz perfekt, man kann zur Zeit nicht einfach per Javascript auslesen, welche Geräteklasse der Browser ausgewählt hat. Daher muß man die Breite des Browserfensters abtesten und die gleichen Grenzen abfragen, die auch im CSS angegeben sind.

Das ist unschön und fehlerträchtig (wenn z.B. das CSS geändert wurde und nicht das Javascript), aber zur Zeit geht’s nicht anders.

Mehr Analyse?

Mein Kollege Carl Sandquist schlägt vor, auch die Breite des Browserfensters zu tracken sowie die Ausrichtung. Beide sind sinnvoll, aus den gleichen Gründen wie oben. Die Breite kann man auch mit SAINT klassifizieren und daraus die Geräteklasse ableiten, wenn man das möchte.

Wer noch mehr Kontrolle / Analyse möchte, könnte noch einen Success Event einbauen, der immer dann gesendet wird, wenn sich die Ansicht ändert. Das passiert zum Beispiel wenn jemand sein Tablet dreht oder auf dem PC das Browserfenster verkleinert oder -größert.

Interessant wäre an diesem Event, ob es eine Korrelation gibt mit anderen Events. Daraus könnte man folgern, daß für bestimmte Dinge auf der Site Portrait besser funktioniert als Landscape, oder daß Buttons außerhalb „normaler“ Fenstergrößen liegen.

Was mich interessieren würde: Wer hier benutzt schon responsive?