Wie man responsive Inhalte erstellt (mit Beispielcode)

Profi Geheimtipp für guten Content und SEO zugleich

Wir alle kennen responsive Webseiten, doch was sind responsive Inhalte?

Responsiver Content ist eine geniale und simple Möglichkeit, um „geile Inhalte“ mit echtem Mehrwert für den Nutzer zu kreieren. Zugleich optimierst du deine Conversion Rate und es ist auch noch eine Art von Onpage-SEO. Und obwohl es auf so vielen Ebenen Vorteile bringen kann, ist dieses Konzept kaum bekannt und daher schon eher als Profi-Tipp zu bezeichnen.

Es geht dabei schlicht zunächst darum, dass Nutzer je nach Endgerät eine etwas andere Seite – beispielsweise eine Produktseite in deinem Shop – angezeigt bekommen.

Aber Moment mal! Also doch responsive Seiten, oder? Wo sich je nach Bildschirmgröße etwas ändert?!

Ein ganz klares jein! Denn sicher nicht, wie du denkst!

Das Konzept, welches du kennst, passt das Layout einer Seite an: Die Schrift ändert sich vielleicht, wird größer oder kleiner. Ganz sicher ändert sich das Navigationsmenü, oft erscheint ein Burgermenu-Icon, über das man die Menüpunkte nun aufklappen kann. Blöcke, die vorher nebeneinander angeordnet waren, klappen nun untereinander.

Responsive Inhalte funktionieren anders!

Stell dir vor, du betreibst einen Onlineshop und du bietest dort E-Scooter an. Um mal ein topaktuelles Beispiel zu nennen. Wer weiß, vielleicht tust du das ja wirklich. Oder aber morgen 😉

Nun gibt es dort Produkt-Detailseiten. Links ein Bild des Scooters, daneben Thumbnails für weitere Bilder. Preis, Beschreibung, Call-to-Action („Kaufen!“) und und und.

In der Produktbeschreibung hast du einen schönen Fließtext verfasst, in dem du die tollen Eigenschaften des Scooters beschreibst und auf alles Wichtige eingehst. Richtig schön zu lesen und ein echter Mehrwert für deine Kunden.

Doch was ist mit den Besuchern, welche die Produktseite mit dem Smartphone aufrufen? Denkst du, die haben auch so viel Zeit und Lust, sich den ganzen Text durchzulesen? Vielleicht sind die gerade nur auf dem Sprung oder warten auf den nächsten Bus. Und nicht jeder hat Lust, viel Inhalt am Handy durchzulesen.

Und hier kommen responsive Inhalte ins Spiel!

Wie wäre es denn, wenn Desktop-Besucher eine tolle und ausführliche Detailseite zu sehen bekämen, Smartphone-Nutzer aber nur die wirklich wichtigen Infos – und diese auch nur in Stichpunkten? Genau das ist der Trick. Aber es geht noch weiter: Die abgespeckte Version könnte auch Texte und Begriffe der Großen beinhalten, diese aber mit leicht abgewandelten Worten und Formulierungen. Auf diese Weise differenzierst du den Content der Gesamtseite für Suchmaschinen weiter und lieferst auch auf technischer Ebene besseren Content.

Ist Responsive Content okay für Google?

Das Ganze ist übrigens kein Austricksen von Suchmaschinen und schon gar keine Bad Practice oder ähnliches Zwielichtiges. Auch eine Suchmaschine wie Google hat großes Interesse daran, dass die Besucher gute und passende – oder eben angepasste – Inhalte bekommen. Die zwei (oder drei, vier …) Versionen deiner Seite werden eben jeweils nur unter bestimmten Umständen wie der Bildschirmgröße angezeigt. Das Gesamtdokument beinhaltet aber alle Informationen: Deine langen Beschreibungstext und zugleich die kürzere Variante mit Stichpunkten und einer vielleicht etwas anderen Formulierung. Das kann sich durchaus auch positiv aufs Ranking auswirken, weil der Inhalt einfach reichhaltiger ist. Es ist somit ein wirklich guter SEO-Tipp. Und völlig gefahrlos, da du z.B. den Googlebot nicht täuscht, in dem du ihm unter bestimmten Umständen verschiedene Dokumente unterjubeln würdest.

Die technische Umsetzung

… ist gar nicht mal schwierig!

Für die ganz einfache Variante kommen wir mit ganz wenig CSS aus. Dazu nutzen wir die Media Queries, um nach Bildschirmgrößen die Sichtbarkeit zu steuern.

Ich habe hier für dich eine ganz einfache Beispiel HTML-Seite erstellt, die du direkt anschauen und ausprobieren kannst.

Damit der Effekt sichtbar wird, solltest du einen Desktop bzw. Laptop zur Hand haben und mit der Fenstergröße spielen, oder aber einmal mit dem Desktop und parallel mit dem Smartphone aufrufen.

Mein Beispiel ist nur für zwei Größen ausgelegt, aber es lässt sich auch noch weiterspinnen, um auch eine Tablet-Zwischengröße zu basteln.

Möglich wird das mit ein klein wenig CSS Code. Wir definieren uns zwei Klassen, hier .gross und .klein. Nun definieren wir weiterhin, dass die Klasse .gross grundsätzlich einmal sichtbar ist, .klein aber nicht:

.gross {
    display: block;
}
.klein {
    display: none;
}

Anschließend benötigen wir aber noch eine Media-Query, welche bei kleineren Displaygrößen diese Eigenschaften tauscht:

    @media screen and (max-width: 768px) {
        .gross {
            display: none;
        }
        .klein {
            display: block;
        }
    }

Und das war auch schon der ganze CSS-Zauber. Später in unserem Dokument schreiben wir zwei Versionen der Produktbeschreibung / des Textes / etc., und geben diesen jeweils die Klassen .gross und .klein. Also sehr simpel. Kann man sich auch alles im sehr simplen Quellcode meiner Beispiel-Seite abschauen. Ich habe das <section>-Tag noch zur Strukturierung genutzt, aber das muss man nicht.

<section class="gross">
    <p>Mein langer Text</p>
</section>

<section class="klein">
    <p>Mein kurzer Text</p>
</section>

Was du noch beachten solltest

Das technische Prinzip des responsive Content ist sehr simpel. Doch wirst du beim Erstellen deiner Inhalte, die du auf diese Weise optimieren willst, doppelten Aufwand haben. Einen großen Mehrwert wirst du nur bieten können, wenn du deine Zielgruppe und deren Verhalten ein wenig einschätzen kannst und die verschiedenen Versionen wirklich gut deine Nutzer abholen. Im Zweifelsfall wie immer einfach mal testen. Bietet sich doch wunderbar für einen A/B-Test an.

In Zukunft werde ich auch mal auf eine Erweiterung dieses Konzeptes eingehen, bei der man dem User in bestimmten Situationen einfach die Wahl lässt, was er sich denn gerade ansehen möchte. Aber das folgt dann in einem weiteren Artikel.

Natürlich sind der Fantasie keine Grenzen gesetzt. Du musst es ja nicht für Produktseiten nutzen. Grundsätzlich ist es überall nutzbar, selbst in Blogbeiträgen.

Noch mehr Ideen!
Hey Du! Willst du noch mehr kostenlose Tipps für dein eigenes Business? Dann jetzt schnell für meinen Newsletter anmelden!

Mach dein Ding!