Responsive Content für geile Webinhalte

(Gastartikel von +Pascal Horn): Den Begriff des Responsive Designs kennen nun fast alle Webmaster und Designer. Und viele bauen heute nur noch Websites im Responsive Design, was auch sehr userfreundlich ist. Aber was bisher nur wenige Webmaster umsetzen ist: Responsive Content. Hier eine kurze Einführung in das Thema des sich anpassenden Inhalts.

Der Unterschied zwischen Responsive Design und Responsive Content

Responsive Design hat grob das Ziel, die Ausgabe von Websites auf mobilen Endgeräten und Tablets so anzupassen, dass es auf dem jeweiligen Gerät die Anzeige der Website optimal darstellt. Häufig fallen dabei einige Widgets weg oder Sidebars und Footer werden komplett entfernt. Man braucht sie schlichtweg auf der mobilen Ausgabe nicht und sie würden die Darstellung nur unnötig verstopfen. Man fokussiert die mobile Ausgabe quasi auf das, was wirklich wichtig und interessant ist.

Responsive Content handelt ganz ähnlich, wird aber bisher kaum umgesetzt. Anstelle, dass das Design komprimiert wird, wird der hauptsächliche Inhalt komprimiert. Es wird auf dem Smartphone also nicht alles ausgegeben, was für einen PC-Nutzer umfassender relevant wäre.

Warum denn Responsive Content? Ich will dem Leser doch alles erzählen…

Klassischer Denkfehler. Wenn du unterwegs bist, möchtest du dich nicht durch mehrere hundert Wörter Text quälen. Die bist du vielleicht bereit, zuhause am PC zu lesen. Aber unterwegs willst du Fakten, und das schnell und leicht visuell aufnehmbar.

Ein Beispiel. Wenn du daheim nach einem geeigneten Hotel suchst, dann möchtest du dich umfassend darüber informieren. Eine blumige Sprache des Textes weckt hier durchaus das Interesse. Im Auto oder anderweitig unterwegs willst du das nicht. Du willst nur die harten Fakten wissen: Preise, Ausstattung, Komfort, Location. Möglichst aufgelistet und auch möglichst nicht zuviel Information.

Und hier tritt Responsive Content ins Spiel. Denn mit ein paar CSS-Tricks können wir Devices jeglicher Art exakt sagen, ab welcher Breite Bildschirmauflösung sie welche Informationen ausgeben sollen.

Responsive Content nur mit Responsive Design

Damit Responsive Content auch umgesetzt werden kann, ist Responsive Design zwingend vorher notwendig. Sonst sagt sich der Browser sinngemäß: „Hey, die Website ist insgesamt 1015 (oder X) Pixel breit, also kann ich mit dieser Methode nichts anderes ausgeben, was weniger als 1015 (oder X) Pixel hat.“

Es muss also vorher sicher gestellt werden, dass die Seite – ob Mobil oder per Größenverschiebung des Browserfensters auf dem PC – das Responsive Design einhält. Sonst wird es nicht funktionieren.

Responsive Content mit CSS umsetzen

Ist unsere Seite mit Responsive Design ausgestattet, können wir in der CSS-Datei ziemlich exakt sagen, ab welcher Bildschirmbreite sich ein Objekt verändern soll. Dazu benötigen wir lediglich folgende Zeilen in der CSS-Datei:


@media only screen and ( max-width: 767px ) {
HIER KOMMT ALLES CSS REIN
}


Was wir hier sagen ist: Wenn die Auflösung des Browsers (korrekt übersetzt: Die Breite des Bildschirms, aber egal…) kleiner ist als 767 Pixel, dann verwende folgende CSS-Elemente noch dazu („HIER KOMMT ALLES CSS REIN„). Und hier können wir ganz gewöhnlich die CSS-Sachen eintragen, die wir sonst so in die CSS-Datei schreiben würden.

Erzeugen wir hier also eine eigene Klasse mit dem Namen „hide767“. Die Klasse hat den Auftrag, ein HTML-Objekt ab einer niedrigeren Auflösung als 767 Pixel Breite nicht mehr anzuzeigen. Das sieht dann so aus:


@media only screen and ( max-width: 767px ) {
.hide767 {
display: none;
}
}


Jedes Objekt, das wir nun mit dieser Klasse ausstatten, wie etwa ein

<p class="hide767">MOBIL UNSICHTBARER TEXT</p>

wird nun mobil nicht mehr dargestellt, wenn das Gerät weniger als 767 Pixel Breite ausgibt.

Was für eine Möglichkeit. Wir können jedem Text, jedem Absatz, jedem DIV sagen, dass es unsichtbar sein soll, wenn es die bestimmte Breite unterschreitet.

Das geht natürlich auch für andere Größen. Um beispielsweise Text auf einem Smartphone im Querformat noch anzuzeigen, es im Hochformat aber nicht anzuzeigen, könnte man diese Breite verwenden:


@media only screen and ( max-width: 479px ) {
.hide479 {
display: none;
}
}


Was passiert mit den Inhalten?

Nun, jedes Element, das die Klasse besitzt, wird trotzdem an alle Geräte übermittelt. Der Unterschied ist nur, dass die Elemente ab Unterschreiten der jeweiligen maximalen Breite unsichtbar gemacht werden. Sie sind noch da, aber eben nicht für den User sichtbar.

Moment… ist das nicht Cloaking?

Nein. Cloaking bedeutet, man zeigt Content nur und ausschließlich nur für die Bots der Suchmaschinen an (wie dem Google Bot). Man möchte beim Cloaking erzwingen, dass nur Google den Text sieht, sonst aber niemand, um sein Ranking manipulativ zu steigern.

Im Gegensatz dazu sieht der Google Bot bzw. der Google Mobile Bot die Website eben exakt so, wie jeder andere sie auch sieht. Und da findet sich folgendes Zitat von Matt Cutts wieder:

[…] Ähnlich ist es, wenn jemand eure Webseite über ein Mobiltelefon abruft, zum Beispiel mit einem iPhone oder Android-Gerät. Dann stellt eure Webseite fest, dass es sich um einen ganz anderen User Agent handelt. Er besitzt ganz andere Funktionen. Es ist völlig in Ordnung, auf diesen User Agent zu reagieren und ihm eine kompaktere Version eurer Website zu liefern, die für den kleinen Bildschirm besser geeignet ist.

[…]

Matt Cutts, Quelle: http://googlewebmastercentral-de.blogspot.de/2011/11/was-ist-cloaking.html

Das sollte natürlich auch für die Ausgabe von unterschiedlichen Breiten der Displays gelten. Solange man den Google Bot nicht absichtlich hinters Licht führen und ausschließlich dem Google Bot andere Informationen übermitteln will, ist alles in Ordnung. Das bedeutet: Responsive Content verstößt nicht gegen die Google Webmasterrichtlinien.

Warum haben das bisher so wenig Webmaster im Einsatz?

Nun, der einfachste Grund ist: Zeit und Geld. Um sehr vernünftige, Responsive Content Inhalte zu erstellen bedarf es noch mehr Ressourcen, vor allem im Content Bereich selbst.

Ein Text ist relativ schnell geschrieben. Ihn gleichzeitig erneut für Tablets und noch einmal für Mobile zu schreiben, braucht Zeit. Und Ressourcen. Und die sind die Webmaster und viele Agenturen heute noch nicht bereit, extra zu zahlen.

Was sich aber ändern werden muss. Denn mit immer mehr Abfragen aus dem Mobile Sektor und der Zufriedenstellung der Besucher wird man auf mittel- bis langfristige Zeit nicht umher kommen.

Wer sich jetzt also mit Responsive Content beschäftigt, wappnet sich für die Zukunft.

Dies ist ein Gastartikel von +Pascal Horn – vielen Dank für diesen qualitativ hochwertigen und informativen Artikel! Weitere Informationen zum Thema Responsive Content findest du auf nblogs.de und auf karlkratz.de.