Video Tutorial: Responsive Content mit CSS umsetzen

Heute fand ich mal die Zeit und Muße, ein Video Tutorial zur Einrichtung und Verwendung von Responsive Content mittels CSS zu erstellen. Wie setzt man es ein? Welche Inhalte eignen sich für Responsive Content und was sagt Google dazu? Hier das Video Transkript:

Immer mehr Menschen gehen mit Smartphones und Tablets ins Internet und deren Gewohnheiten unterscheiden sich von dem eines Desktop-Nutzers. Lange Artikel auf dem Smartphone zu lesen ist mühsam und viele Nutzer verlassen die Seite wieder, bevor sie zu aktionsorientierten Inhalten wie den Angeboten, Buttons oder weiterführenden Links kommen.

Für die User Experience und für unsere Conversion Rate ist das schlecht. Und hier setzt Responsive Content an. Während eine Responsive Website – also eine mit Responsive Design ausgestattete Website – nur einzelne Elemente verschiebt oder ausblendet, komprimieren wir mit Responsive Content den Inhalt eines Artikels selbst.

Voraussetzungen: Responsive Design

Gleich der Hinweis: Diese Form des Responsive Content – also die Umsetzung mit CSS – ist nur in Kombination mit einem Responsive Design möglich. Denn was wir gleich per CSS sagen werden ist, dass unsere Zusätze nur ausgegeben werden sollen, wenn Elemente unterschiedliche maximale Breiten haben können. Aber dazu gleich mehr. Zunächst aber die Theorie:

Die Theorie hinter Responsive Content

Nehmen wir an, wir haben eine Website mit Responsive Design, das für drei verschiedene Hauptauflösungen optimiert ist. Eine ist für die Darstellung auf den klassischen Desktop-Rechnern mit Vollauflösung optimiert, eine weitere für die Verwendung auf vertikalen Tablets und eine weitere Auflösung für vertikale Smartphones.

Responsive Design

Dazu schreiben wir einen Artikel, der beispielsweise über 1.500 Wörter verfügt. Diese 1.500 Wörter sind auf dem Desktop-PC leicht und angenehm zu lesen, mit einigen Hintergründen und einigen Schachtel- und Nebensätzen, die die Hauptaussagen näher erklären. Ideal für den PC, wenn man Zeit hat und mehr Informationen zu einem Thema haben möchte.

Der Smartphone-Nutzer hingegen ist eine faule Sau und hat häufig wenig Zeit. Ihm einen 1.500 Worte langen Text hinzuknallen, durch die er sich dann durchscrollen darf, ist nicht elegant und häufig keine so gute Idee. Was also tun?

Nun, wir verschlanken den Text einfach auf das, was der Smartphone-Nutzer gerade braucht: Informationen. Sprich: Wir entsaften den blumig ausgeschriebenen Text und liefern ihm den exakt gleichen Inhalt, aber in kompakter Variante.

Dazu ist es nicht notwendig, drei verschiedene Texte für drei verschiedene Geräte zu schreiben. Sondern wir schreiben einen langen Text, den wir dann einfach für kleinere Display-Ausgaben sozusagen kürzen. Weg vom blumig ausgeschriebenen Stil, hin zu den harten Fakten.

Ein Beispiel für die Umsetzung von Responsive Content

Ein Beispiel dafür habe ich in ein paar Artikel eingebaut, wie diesem hier: → SEO: Der Title Tag – Wissenswertes für die Suchmaschinenoptimierung. Der Inhalt ist erstmal egal, konzentrieren wir uns auf die Darstellung. Wir haben hier einen Text mit einer Länge von 1.100 Wörtern. Einzelne Bereiche sind blumig ausgeschrieben und zwar so, dass sie eine Hauptaussage haben und dazu jeweils eine Erklärung zu diesem Bereich.

Fokussieren wir uns also auf den Abschnitt „Title Tag – Was ist das überhaupt?“. Verkleinere ich die Breite meines Browsers, passiert zunächst noch nicht viel. Doch wenn die Breite des Bildschirms so klein wird, dass es die Breite eines hochkanten Smartphones annimmt, dann setzt Responsive Content ein.

Die Zwischenüberschrift H2 hat sich geändert. Das Wort „überhaupt“ ist verschwunden, damit die Überschrift nicht unnötig eine zweite Zeile einnimmt. Und auch der nachfolgende Text ist maximal auf seine Hauptaussage reduziert worden.

Damit der Smartphone-Nutzer trotzdem die Möglichkeit hat, alle Inhalte zu lesen, habe ich vor diesem Bereich einen kleinen Hinweis eingebunden. „Wechsle ins Querformat deines Smartphones, um den ganzen Artikel zu lesen. Du liest aktuell nur eine sehr abgespeckte Version des Inhalts, damit er auf deinem Smartphone leserlich ist.“

Verbreitere ich das Browser-Fenster – oder drehe ich mein Smartphone um 90° – wird der Hinweis wieder ausgeblendet. Mit diesem Effektkonnte ich die Ausgabe von vorher 1.100 Wörtern (auf der Desktop-Ausgabe) auf 361 Wörter reduzieren (auf der Smartphone-Ausgabe).

So. Wie können wir das nun mit CSS umsetzen?

Responsive Content umsetzen mit CSS

Im CSS müssen nur ein paar Anweisungen mit einer Media Query gegeben werden. Media Queries sind spezielle Angaben im CSS, in die man weiteres CSS schreibt, die aber nur unter bestimmten Voraussetzungen stattfinden sollen. Wie etwa, das ein Objekt mit einer bestimmten Klasse ab einer bestimmten Breite erscheinen oder verschwinden soll. Und genau das werden wir hier für zwei Devices zun: Einmal die Ausgabe auf Smartphones (hochkant) und dann die Ausgabe auf größeren Bildschirmen.

Dazu brauchen wir diese Anweisungen im CSS.

@media only screen and (min-width: 480px) {
#content .responsivehide {display: inline;}
#content .responsiveshow {display: none;}
}
@media only screen and (max-width: 479px) {
#content .responsivehide {display: none;}
#content .responsiveshow {display: inline;}
}

Mit dem @media startet unsere Media Query. Hier geben wir ihr die Anweisung, nur auf Bildschirmen eingesetzt zu werden und auch nur dann, wenn die Bildschirmbreite – oder der Browser – größer als 480 Pixel ist. Sollte der Bildschirm kleiner als 480 Pixel, werden die kommenden Angaben nicht berücksichtigt.

Eine zweite Media Query dreht den Spieß um und wird nur dann verwendet, wenn die Breite kleiner als 480 Pixel ist.

Darin definieren wir dann neue Klassen. In diesem Beispiel brauchen wir nur 2 Klassen:

• Eine Klasse, die nur auf Smartphones angezeigt wird und
• eine Klasse, die auf Smartphones ausgeblendet wird.

Diese heißen in diesem Beispiel entsprechend .responsivehide (für das Verstecken von Inhalten auf Smartphones) und .responsiveshow (für die explizite Ausgabe eines Inhalts nur auf dem Smartphone).

Tiefere Details erspare ich euch hier. Wichtig ist nur zu wissen, dass die Breite noch angepasst werden kann, falls der gewünschte Effekt auf euren Seiten nicht eintreffen sollte, wenn z. B. noch Außenabstände rechts und links vom Text im Design eingestellt sind.

Kopieren wir ansonsten das CSS, fügen es in unser CSS ein, laden die CSS-Datei wieder hoch und dann kann es losgehen.

Anpassungen des HTML-Textes mit CSS-Klassen

Hinweis: Ab diesem Bereich startet ein On-Screen-Tutorial (ab Minute), das schwer in Text darzustellen ist. Hier aber alles theoretische zu diesem Bereich:

Jetzt gibt es zwei Möglichkeiten, wie wir Responsive Content umsetzen können.

Variante #1: Doppelte Inhalte (einfach, schnell, aber scheiße)

Die schnellere, aber unelegantere Variante ist diese: Wir kopieren den bisherigen Inhalt, fügen ihn einmal neu ein und setzen DIV-Elemente um beide Absätze, die jeweils die entsprechende Klasse beinhalten. Dann müssen wir nur den kopierten, neuen Smartphone-Bereichen kürzen. Das heißt aber auch, dass wir am Ende zwei Texte haben, von denen einer immer unsichtbar ist.

Obwohl diese Version sehr einfach ist, rate ich aber davon ab. Denn wir haben zwei Texte, von denen einer immer versteckt werden muss und das könnte in Zukunft als Manipulation bei Suchmaschinen angesehen werden. Wenn man es so überhaupt machen möchte, sollte man den langen Text jeweils nur kürzen.

Variante #2: Nur einzelne Wörter entfernen (komplizierter, aber eleganter)

Die elegantere Variante ist, nur einen Text zu haben und nur einzelne Elemente daraus zu entfernen. Das erfordert mehr Training, ist aber definitiv die bessere Lösung. Dann passen wir nicht ganze Absätze mit <div>-Elementen an, sondern jeweils nur einzelne Sätze, Zwischensätze oder einzelne Wörter mit <span>-Elementen, die mit den entsprechenden Klassen ausgestattet werden.

Welche Inhalte eignen sich dafür?

Kommen wir noch zu der Frage, welche Inhalte sich denn für Responsive Content eignen. Grundsätzlich eignet sich jeder Inhalt, der mobil einfach zu lang ist. Das können sein:

• Produktbeschreibungen
• Beschreibungen von Dienstleistungen insbesondere für Dienstleistungen, die man unterwegs in Anspruch nimmt (wie etwa Werkstätten, bei Restaurants, Kontaktseiten, Events und Hotels)
• Beschreibungen von Ausstattungen oder Zusatzleistungen
• Blogartikel und Wikis
• Bei Tabellen, um Spalten zu verstecken und so die Breite zu gewähren
• Und eben alles, was mobil zu groß wirkt und zu lange zum Scrollen braucht, um an aktionsorientierte Elemente zu kommen (wie einem Kaufen, Buchen oder Anfragen-Button)

Was, wenn ich dem Leser die Möglichkeit geben will, alle Inhalte zu lesen?

Eine weitere Frage die sich stellt ist, ob es auch eine elegantere Lösung gibt als dem Leser auf Smartphones darauf hinzuweisen, dass er sein Smartphone quer stellen soll. Und ja, auch da gibt es Möglichkeiten. Zum Beispiel mit einem Dropdown-Feld, das man direkt am Anfang eines Artikels einsetzt. Wie auf diesem Artikel: → Responsive Content – Der Weg ins SEO Web 3.0?

Was sagt Google zu Responsive Content? Ist das nicht Cloaking?

Suchmaschinenoptimierer könnten in diesem Video mehrmals aufgezuckt haben, da wir ja unter Voraussetzungen andere Inhalte ausliefern. Ist Responsive Content möglicherweise gefährlich, weil es Text versteckt? Ist es Cloaking?

Nein, da kann ich alle SEOs beruhigen. Cloaking bedeutet, dass man Suchmaschinen – also zum Beispiel dem Google Bot – andere Inhalte ausliefert als dem Nutzer.

Das spielt bei Responsive Content aber keine Rolle, denn wir geben allen Nutzern und Bots die gleichen komprimierten oder unkomprimierten Inhalte aus.

Dass es für Google auch kein Problem ist, hat Matt Cutts schon 2011 gesagt. Zitat:

Ä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, 2011. → Blogpost im Google Webmaster Central Blog

Es ist eher eine Frage, wie stark man Inhalte komrpimieren kann und ab wann man es lieber sein lassen sollte. Alle Informationen – also wirklich alle Informationen – des großen Artikels sollten natürlich auch in den abgespeckten Versionen verwendet werden. Sonst enthalte ich dem Leser Informationen vor, die er gesucht hat und weswegen ich auch bei Suchmaschinen gut positioniert worden bin und senke so wiederum die User Experience. Und das wäre schlecht.

Um also keine Abstrafung oder ein schlechteres Ranking in der Zukunft zu riskieren liegt es in meinem höchsten Interesse, auch alle Informationen auf den Smartphones zu übermitteln. Nur die blumig ausgeschriebene Formulierung, die kann ich mir sparen.

Fazit: Responsive Content ist geil

Kommen wir also zum Fazit. Responsive Content ist nur in Kombination mit einem Responsive Webdesign möglich und ja, einen Inhalt zu einem Responsive Content zu machen erfordert etwas Übung und etwas Mehraufwand. Dennoch bietet sich die Methode wunderbar an, um die User Experience von mobilen Nutzern zu steigern, indem wir sie nicht mit Text erschlagen. Die User kommen schneller an aktionsorientierte Buttons und Angebote unterhalb der Artikel, was insgesamt die Conversion Rate nochmal steigern kann. Und der User freut sich, dass er schneller Informationen gefunden hat, als sich durch lange Texte durchkämpfen zu müssen. Und solange man nicht einen Mussbrauch versucht, sein Ranking manipulativ in Suchmaschinen zu erhöhen, sollten auch Suchmaschinen nichts gegen Responsive Content haben.

Eine Win-Win-Situation also. Für den Leser bzw. Käufer als auch für den Webmaster bzw. den Verkäufer.

Das war es dann mit diesem Video Tutorial zu Responsive Content. Wenn euch das Video gefallen hat, könnt ihr es gerne teilen und liken, da würde ich mich drüber freuen. Weitere Video-Tutorials in den Bereichen WordPress, SEO und Online Marketing sind auch in Zukunft geplant, von dem her kann ich euch auch das Abo ans Herz legen. Ansonsten wünsch ich euch jetzt viel Erfolg bei der Umsetzung eurer responsiven Inhalte. Und bis zum nächsten Mal.