Content Posit

Content Posit (by nenovbrothers)

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

Kommentare

  1. Pascal Horn

    Jens Umland hat auf Twitter eine gute Frage gestellt:

    „@TecReflex Gibt es eine Seite die das strikt so unsetzt? Frage mich gerade was Google von den ganzen display:none’s hält. @nBlogsDE“

    Ich selbst habe bei fremden Websites noch keinen Einsatz von Responsive Content gesehen. Zumindest habe ich nie einen Hinweis wahrgenommen, dass es sich bei der mobilen Ausgabe um diese Art von Responsive Content gehandelt hat. (Das Texte-Verstecken via Akkordeons, die einfach aufgeklappt werden können, sind kein Responsive Content in diesem Sinne.)

    Es gibt aber bereits Plugins für WordPress, die genau das umsetzen können. Wie dieses hier: https://wordpress.org/plugins/so-visibility-classes/

    Bzgl. was Google sagt: Nun, offiziell habe ich noch keine wirklich feste Aussage von Google gehört. Inoffiziell (weil nur vom Hören-Sagen gehört, dass es auf der SMX München 2014 ein kurzes Gespräch zwischen Karl Kratz und John Mueller), soll die Aussage wohl gelautet haben, dass das Thema sehr interessant sei. Welche Schlussfolgerungen man daraus nehmen möchte überlasse ich natürlich jedem selbst.

    Wenn aber wie gesagt die Aussage von Matt Cutts aus 2011 zutrifft und es kein Cloaking sein soll, allen Usern mit einer kleineren Auflösung weniger Inhalt zu zeigen, warum sollte das für Responsive Content nicht auch zutreffen?

    Ich meinerseits versuche in diversen Artikeln Responsive Inhalte unterzubringen. Mein letzter Artikel ist dieser hier, der sich ab >479px deutlich verkleinert (und einen Hinweis gibt, das Smartphone in die Horizontale zu schwenken):

    http://nblogs.de/html-title-tag-seo-4353/

    In naher Zukunft werde ich mal versuchen ein Statement von Google (vielleicht über John Mueller) zu erhalten.

    Schöne Grüße

    Pascal

    1. Dominik

      Hallo Pascal,

      vielen Dank für die Antwort auf diese Frage, hatte das gar nicht mehr auf dem Schirm.

      Bezüglich Cloaking: Google ist seit etwa einem halben Jahr in der Lage, Websites zu rendern und zusätzlich die gerenderten Inhalte auszuwerten, sodass die Crawler nicht mehr nur auf Code-Analysen angewiesen sind.

      Aus diesem Grund denke ich, dass Google ziemlich einfach erkennen kann, welche Inhalte dargestellt werden, welche nicht und welche Inhalte nur auf nicht-mobilen Geräten angezeigt werden sollen. Da Google mittlerweile auch das Vorhandensein und die Qualität von mobilen Seiten-Versionen in die Bewertung von Websites mit einfließen lässt, denke ich, dass der Algorithmus dazu in der Lage ist, geräte-abhängige Inhalte korrekt interpretieren zu können.

      LG

      1. Pascal Horn

        Ja, da stimme ich voll zu. Bei der Rendering-Analyse in den Google Webmastertools zum Beispiel-Artikel wird auch alles korrekt gerendert dargestellt.

        Da Google seit Monaten aktiv sagt, dass Webmaster ihre CSS- und JS-Dateien dem Bot zugänglich machen sollen weil Google sie mittlerweile lesen und rendern kann, sollten die „Chance“ als Manipulatior aufzutreten eher gering sein.

        1. Dominik

          Kurze Ergänzung zum Thema, wie Google mit versteckten Inhalten auf Smartphones umgeht: Laut John Müller (Webmaster Hangout) hält sich Google relativ stark an die Desktop-Versoin der Seiten, ist sich aber natürlich auch darüber im Klaren, dass mobile Websites oft Informationen weglassen, um den Besucher nicht mit Content zu überhäufen. Sollte also meinem Verständnis nach kein Problem darstellen.
          LG

  2. Pascal Horn

    Vielleicht das noch zur Ergänzung:

    Auf http://uptimized.ch/responsive-content-so-gehts/ habe ich noch etwas technischer detailliert beschrieben, was man sonst noch mit CSS-Responsive-Content machen kann. Etwa nicht nur das Verstecken von Inhalten ab Unterschreiten einer maximalen Pixelbreite, sondern auch das explizite Anzeigen von Inhalten unterhalb einer bestimmten Breite. Und was das wiederum für Möglichkeiten ergibt.

    Und als ein weiteres Beispiel würde ich gerne den Artikel http://nblogs.de/html-title-tag-seo-4353/ empfehlen. Nicht wegen des Inhalts (der unpassend zum Thema ist), sondern um zu zeigen, wie man effektiv Responsive Content wie in diesem Beispiel umsetzen kann. Einfach mal den Artikel auf einem sehr schmalem Browser-Fenster anzeigen lassen und dann mit der Breite des Browserfensters spielen, dann sieht man den Unterschied, den Responsive Content im Einsatz ausmachen kann.

    Schöne Grüße. 🙂

    Pascal

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *