Warum ohne Responsive Design heute nichts mehr geht

von Timo Schnalzger | 27.10.2021 | SEO WIKI
SEO Beitrag zu Response Design

Flexibilität ist heute wichtiger denn je. Darum gehen so viele Menschen zum Yoga oder zum Mobility Workout. Das Mobility Workout für Deine Website heißt Responsive Design und ist heute unerlässlich, wenn Du in der Suchmaschinenoptimierung irgendeine Rolle spielen willst. Das Tolle daran: Im Gegensatz zum Yoga musst Du ein Responsive Design nur einmal machen. Wir erklären Dir, wie und warum.

[et_social_follow icon_style="slide" icon_shape="circle" icons_location="top" col_number="auto" outer_color="dark"]

Was ist ein Responsive Design?

Früher war jeder Bildschirm eine Röhre. Diese unhandlichen Dinger standen auf Schreibtischen in jedem Büro und später auch in vielen Privathaushalten. Später wurden die Bildschirme dann flach und konnten auch in Notebooks verbaut werden. Doch zwei Dinge änderten sich nicht: Die Bildschirme waren die einzige Möglichkeit, Inhalte aus dem Web abzurufen und die Bildschirmgröße war (ebenso wie die Auflösung) immer ähnlich groß, bei einem Format von 4:3. Webdesigner konnten sich darauf verlassen, dass eine Seite, die sie für einen Desktop-Bildschirm im Format 4:3 programmierten, bei praktisch allen Usern korrekt angezeigt wurde.

Internetnutzung ist eine mobile Angelegenheit geworden

Heute ist das ganz anders. Zwei Drittel der Internetnutzung findet heute mit mobilen Geräten statt. Diese sind nicht nur wesentlich kleiner als klassische Desktopbildschirme, sondern es existiert auch eine relativ große Vielfalt an Bildschirmgrößen und -formaten. Konnte man sich in den Anfangszeiten der mobilen Internetnutzung noch einigermaßen sicher darauf verlassen, dass die Screens der Geräte ein Seitenverhältnis von 4:3 haben, so sind heute auch 3:2 oder 16:9 sehr verbreitet. Dasselbe gilt mittlerweile für Monitore, die heute auf den Schreibtischen der Angestellten stehen.

Veranschaulichung des Responsive Designs

Die verschiedenen Bildschirmgrößen bedingen selbstverständlich, dass sich die Anzeige einer Website von Gerät zu Gerät unterscheidet. Was auf einem klassischen Monitor gut aussieht, ist auf einem Handybildschirm nicht zu lesen, umgekehrt ist das natürlich ebenso der Fall. Die Lösung für dieses Dilemma ist Responsive Design.

Jetzt mit Online Marketing durchstarten

Nutze Online Marketing um Deine Zielgruppen zu erreichen und mit Deinem Unternehmen zu wachsen.

SEO Rakete

So funktioniert Responsive Design

Damit sich eine Website dynamisch an unterschiedliche Endgeräte anpassen kann, muss sie natürlich erst mal erfragen, mit was für einem Device sie es zu tun hat. Das geht mit Media Queries, wie sie in HTML5 bzw. CSS3 implementiert sind. Sie ordnen verschiedene Formatvorlagen (sogenannte Stylesheets, zum Beispiel für Desktop, Tablet und Smartphone) einem bestimmten Gerät zu. Auf diese Weise lassen sich das Seitenverhältnis, die Schriftgröße, die Auflösung und viele weitere Aspekte des Layouts an die Endgeräte Deiner Besucher anpassen, ohne dass der Inhalt verändert werden muss.

Welche Bedeutung hat Responsive Webdesign für SEO?

Auf der technischen Ebene (also im Sinne der bloßen Verwendung von Media Queries) hat Responsive Webdesign keine Auswirkung auf Dein Ranking. Jedoch werden durch eine optimierte Darstellung Deiner Inhalte mehrere SEO-Faktoren positiv beeinflusst. Schauen wir uns einmal an, welche das sind.

User Experience

Dank CSS kannst Du für jedes Endgerät ein adaptives Layout erstellen. Hauptziel dieser ganzen Sache ist es, jedem Besucher die Nutzung Deiner Seite so angenehm wie möglich zu gestalten. Auf gut Englisch: die User-Experience zu verbessern. Ein Nutzer, der auf einer Website ein angenehmes Erlebnis hat, bleibt länger, scrollt tiefer und klickt sich weiter durch Deine Domain. All das sind wichtige Faktoren, anhand derer Google die Benutzerfreundlichkeit Deiner Domain bewertet – und die ist ein wichtiger Rankingfaktor.

Einheitlichkeit

Gefällt einem User Deine Website, wird er immer wieder kommen. Dazu werden die meisten User verschiedene Endgeräte verwenden, dementsprechend wichtig ist es, dass sie auf allen Devices eine einheitliche Nutzererfahrung machen. Es gehört zu den grundlegenden Erkenntnissen der Marketing-Psychologie, dass Menschen Dinge positiver bewerten, wenn sie ihnen vertraut sind. Responsive Webdesign leistet dazu einen entsprechend wichtigen Beitrag.

automation

Automation ist streng genommen kein SEO-Faktor, dennoch ist sie wichtig: Durch die automatische Anpassung des Designs an unterschiedliche Bildschirmgrößen ersparst Du Dir viel Aufwand im Vergleich zur manuellen Anlage einer eigenen mobil optimierten Website (s. u.). Du hast also auch abseits der Suchmaschinenoptimierung einen merklichen Nutzen, bei verhältnismäßig kleinem Aufwand. Aber wie funktioniert das jetzt mit dem Responsive Design?

Responsive Webdesign: Darauf solltest Du achten

Letztlich stellst Du mit einem Responsive Webdesign allen Benutzer die gleichen Inhalte zur Verfügung, jedoch in einem jeweils leicht unterschiedlichen Layout. Dabei geht es vor allem um eine Umstrukturierung der einzelnen Elemente auf der betreffenden Seite. So wandern zum Beispiel Bilder von einer Seite des Textblocks über oder unter ihn, da auf einem Smartphone-Display Text und Bild nicht sinnvoll nebeneinander dargestellt werden können. Buttons erstrecken sich in der mobilen Ansicht ebenfalls über die gesamte Seite der mobilen Ansicht und nehmen nicht nur, wie am Desktop, ein kleines Eckchen ein.

reduktion-ist-trumpf

Es ist eigentlich offensichtlich: Alle Inhalte, die auf einem 15-Zoll-Desktop Above the Fold angezeigt werden können, passen niemals auf ein 5-Zoll-Handydisplay. Du musst Dich also entscheiden, welche Elemente besonders wichtig sind und welche weiter nach unten wandern können (selbstverständlich auf die Gefahr hin, dass der User nicht so tief scrollt und sie darum gar nicht zu sehen bekommt).

Einige Elemente werden in der mobilen Version vielleicht gleich ganz weichen müssen, damit die Seite nicht zu lang gestaltet werden muss. Hier kommt es natürlich darauf an, die richtigen Elemente auszusuchen, sodass Deine Conversion Rate nicht negativ beeinflusst wird. Eine wertvolle Hilfe, um das herauszufinden, können Heatmaps sein, auf denen Du sehen kannst, welche Elemente Deine User besonders oft betrachten.

Responsive Design und „Mobile First“

„Mobil First ist nicht etwa der neue Wahlslogan von Donald Trump, sondern ein Grundprinzip von Google, wenn es um das Suchmaschinenranking geht. Wie wir gerade besprochen haben, wirst Du Deine mobile Seite wohl etwas abspecken müssen. Das bedeutet, dass es plötzlich doch zwei Versionen einer Seite gibt. Seit 2021 verwendet Google aber immer die Version für mobile Endgeräte zur Bewertung Deines Rankings. Dieser Ansatz wird als „Mobile First“ bezeichnet.

Konkret bedeutet das vorwiegend eines: Inhalte, die sich auf die Desktop-Version einer Seite beschränken, werden bei der Indexierung nicht berücksichtigt und sind entsprechend nicht mehr über die Google-Suche zu finden. Ausgenommen sind nur solche Seiten, die entgegen der Empfehlung kein Responsive Design verwenden und nur als Desktopseite existieren. Solche Seiten werden jedoch stets schlechter gerankt als ähnliche Domains mit adaptiver Anpassung der Inhalte.

Grafik zur Veranschaulichung des Mobile-First-Prinzips im Responsive Desig
Hau Dir was auf die Ohren!

Lerne wie Du digitale Stratgien für Dich und Dein Unternehmen erfolgreich einsetzt. Hole Dir jede Menge Input für Deine Projekte im Online Marketing.

SEO Freelancer geht ab wie eine Bombe

Was ist Progressive Enhancement?

Moderne Mobilgeräte unterscheiden sich nicht nur in Größe und Format des Bildschirms, sondern auch in ihrer Leistungsfähigkeit ganz erheblich voneinander. Ein Eintausend-Euro-Tablett kann natürlich mehr als ein Smartphone für 120 Euro. Von den verschiedenen Betriebssystemen und Browsern reden wir hier noch gar nicht.

Beim Progressive Enhancement erkennt eine Website die grafischen und technischen Möglichkeiten und Grenzen des Geräts, mit dem Du auf sie zugreifst und passt die Darstellung daran an. Frustrierende Fehlermeldungen, dass ein Element nicht dargestellt werden kann (und für die der User meist Deiner Domain die Schuld geben wird) gehören somit der Vergangenheit an.

Gibt es Alternativen zum Responsive Design?

Theoretisch ist es auch möglich, eine separate mobile Website anzulegen. Dann werden die Nutzer mobiler Endgeräte automatisch auf diese Domain bzw. Subdomain weitergeleitet. Der erhebliche Nachteil dabei: Du hast plötzlich zwei Websites, um die Du Dich kümmern musst. Alles, was Du auf Deiner klassischen Website hochlädst, muss noch einmal auf der mobilen Version eingepflegt werden. Und wehe dem, der seine href=“https://hw-brand.com/seo-wiki/canonical-tag/“Canonical Tagsnicht korrekt implementiert hat! Dann kann Google ganz schnell glauben, Du würdest Duplicate Content erstellen und eine Deiner Seiten fliegt vielleicht aus dem Ranking von Google.

Kurz gesagt: Nein, es gibt keine vernünftige Alternative zum Responsive Webdesign.

zusammenfassung-responsive-design“

Unter Responsive Design versteht man die flexible, auf verschiedene Endgeräte angepasste Darstellung von Website-Inhalten, im Gegensatz zur statischen, nicht-responsiven Anzeige einer separat angelegten mobilen Website. Sie wird mittels CSS3 in HTML5 implementiert und ist ein unverzichtbarer Bestandteil der „Mobil-First“-Strategie, das heißt der vorrangigen Indexierung mobiler Seiten.

[et_social_follow icon_style="slide" icon_shape="circle" icons_location="top" col_number="auto" outer_color="dark"]
Timo Schnalzger

Timo Schnalzger

SEO//Content Marketing

Timo war schon in der Schule begeistert von der Literatur. Auf der Suche nach einem Studiengang geriet er an die Germanistik. Dort entdeckte er seine Liebe zum detaillierten Arbeiten an und mit Texten. Erste Gehversuche mit kreativem Schreiben unternahm er in seiner Zeit als Mitglied der studentischen Fachschaft. Jetzt kombiniert er alle diese Interessen und Fähigkeiten bei H&W.