© Goldkonzepte – Online Marketing aus Pforzheim

Was Experten schon länger vermuteten, ist nun bestätigt: Google erhält mehr Suchanfragen über mobile Endgeräte als von stationären Desktop-Computern. Immer mehr User gehen also mit ihrem Tablet oder Smartphone online, anstatt sich Zuhause am PC einzuloggen.

Um diesem Trend auch bei den gezeigten Suchergebnissen gerecht zu werden, bezieht der Suchmaschinengigant seit 21. April 2015 die Mobilfähigkeit von Webseiten als wichtiges Kriterium in das Google-Ranking mit ein. Die Empfehlung: Unternehmen sollten ihre Webseiten prüfen und mithilfe von Responsive Design zukunftsfähig machen, um ihren guten Platz in der Liste der Suchergebnisse nicht zu gefährden.

Doch was steckt hinter der „reagierenden“ Technik? Wir haben für Sie die wichtigsten Kriterien und Vorteile zusammengefasst:

Was ist Responsive Design?

Verfügt eine Webseite über Responsive Design, so passen sich ihre Funktionen, Design und Inhalte flexibel und vollautomatisch an die Bildschirmauflösung des verwendeten Ausgabegeräts an. Der User kann die Webseite also optimal betrachten, egal ob auf einem Desktop-Gerät, Tablet oder Smartphone.

Häufig reicht es jedoch nicht aus, auf dem Smartphone einfach eine verkleinerte Ansicht der Desktop-Version zu zeigen. Jeder kennt das nervige Zoomen, wenn der Text zu klein zum Lesen ist, oder der Finger zu groß, um einen Mini-Button anzuklicken. Um sicherzustellen, dass die Benutzerfreundlichkeit der Darstellung nicht leidet, geht Responsive Design daher noch einen Schritt weiter: Gedanklich kann man hierfür den Bildschirm in gleichgroße Quadrate aufteilen. Auf einem Desktop sind so zum Beispiel acht Quadrate nebeneinander sichtbar, während ein Smartphone-Display nur Platz für zwei bietet. Responsive Design nimmt sich diesem Problem auf zwei verschiedenen Wegen an: Zum einen verkleinert es die Quadrate so weit wie möglich, zum anderen werden Quadrate aus einer Zeile in eine zweite verschoben, wenn diese sonst nicht mehr lesbar wären. Die Inhalte einer Webseite werden also bei Bedarf auf dem kleineren Bildschirm anstatt nebeneinander untereinander angezeigt.

Neben der Bildschirmauflösung berücksichtigt Responsive Webdesign auch die unterschiedlichen Arten der Eingabe: Mit Tastatur und Maus (klicken, scrollen) oder Touchscreen (tippen, wischen).

Um für jeden Bildschirm genau das passende Seitenlayout anzuzeigen, fragen sogenannte Media-Queries den Gerätetyp sowie die spezifischen Eigenschaften eines Gerätes ab. Technische Basis sind die neueren Webstandards HTML5, CSS3 und JavaScript.

Eine schöne Übersicht mit verschiedenen Responsive-Design-Beispielen bietet die Seite mediaqueri.es.

Responsive vs. Mobile Design

Grundsätzlich verfolgen Responsive Design und Mobile Design das gleiche Ziel. Sie möchten Webseiten für mobile Endgeräte zugänglich machen. Beide Techniken gehen hierbei jedoch verschieden vor: Während beim Responsive Design ein Template erstellt wird, das sich automatisch anpasst, gibt es beim Mobile Webdesign zwei oder mehrere Versionen der Desktop-Variante für mobile Endgeräte – als unabhängige weitere Templates auf einer Subdomain. Dies bedeutet: Änderungen und Aktualisierungen der Webseite müssen also immer auf allen Seiten separat vorgenommen werden. Der Pflegeaufwand ist deshalb bei mobilen deutlich höher als bei responsiven Webseiten.

Ihre Vorteile mit Responsive Design

Sie wollen eine neue Webseite aufbauen oder planen einen Relaunch für Ihren bestehenden Internetauftritt? Dann ist jetzt der richtige Zeitpunkt, um mit Responsive Design zu starten. Denn häufig ist es einfacher, eine Seite von Beginn an „responsive“ aufzubauen als eine bestehende zu überarbeiten. Die Entwicklung einer Responsive Website ist aufwendiger und daher in der Regel etwas teurer als eine herkömmliche Seite, doch der Aufwand lohnt sich:

• Positive User-Experience: Übersichtlich gestaltete Webseiten, die sich auch auf dem Smartphone angenehm lesen und bedienen lassen, laden zum Verweilen ein. Ist der Nutzer zufrieden, steigt auch seine Bereitschaft, die angebotenen Produkte oder Leistungen zu kaufen, die Webseite zu einem späteren Zeitpunkt wieder zu besuchen, Beiträge zu liken oder gar an Kollegen weiterzuempfehlen.
• Geringere Abbruchrate: Bilder sind für mobile Browser bisher oft unnötig groß. Dies führt zu langen Wartezeiten, die den User veranlassen „aufzugeben“ und die Seite frühzeitig zu verlassen. Mit hochwertigem Responsive Design werden Bilder nur in der Auflösung geladen, in der sie auch tatsächlich benötigt werden. Auch eine Weiterleitung auf die mobile Seite ist nicht mehr nötig. Unnötige Ladezeiten entfallen – bleibt mehr Zeit für den eigentlichen Besuch der Seite.
• Besseres Google-Ranking: Webseiten, die „mobile friendly“ sind, werden künftig von Google bevorzugt behandelt. Außerdem verhindert Responsive Design die Gefahr von Duplicate Content und erleichtert den Linkaufbau, da alle Backlinks auf einer URL gesammelt werden.
• Weniger Pflegeaufwand: Aktualisierungen beschränken sich auf ein Template – so sinken der Aufwand und die Anfälligkeit für Fehler.
• Positives Image: Sicherlich ist es Ihnen auch schon einmal passiert, dass Sie eine Webseite mit dem Tablet öffnen wollten – doch nichts passiert? Nach vergeblichen Neulade-Versuchen geben Sie genervt auf und suchen sich eine andere Webseite für Ihre Recherche. Leider kein Einzelfall. Positiv punkten können also Unternehmen, die fortschrittliche Technik nutzen und Ihrem Online-Besucher einen professionellen Webauftritt bieten – ganz egal, wo dieser sich befindet und welches Gerät er in Händen hält.

Wie „mobile friendly“ ist Ihre Webseite?

Machen Sie den Test! Ein kostenfreies Tool von Google prüft, ob Ihre Seite für Mobilgeräte optimiert ist: https://www.google.de/webmasters/tools/mobile-friendly. Einfach URL eingeben und auf „analysieren“ klicken.

Damit eine Seite von Google das Label „Für Mobilgeräte geeignet“ erhält, muss der Googlebot folgende Kriterien erkennen können:

• Für Mobilgeräte unübliche Software (z.B. Flash) wird vermieden.
• Der Text kann ohne Zoomen gelesen werden.
• Die Größe des Inhalts wird an den Bildschirm angepasst, sodass der Nutzer nicht horizontal scrollen oder zoomen muss.
• Der Abstand zwischen Links ist so groß, dass der Nutzer problemlos auf den gewünschten Link tippen kann.

Professionelle Unterstützung

Zahlreiche Webdesign-Agenturen haben sich mittlerweile auf die Konzeption und Umsetzung von Responsive Design spezialisiert. Mit ihrem Know-how und Erfahrungen aus ganz verschiedenen Projekten sorgen sie dafür, dass Ihre Webseite auch wirklich hochwertig wird – und Sie so bestens gerüstet sind für die mobile Zukunft!

Cornelia Lukas

Cornelia Lukas schreibt seit April 2015 als leitende Redakteurin für den TrafficGenerator Blog. Nach ihrem Studium „Marketing-Kommunikation & PR“ arbeitete sie in der Unternehmenskommunikation, sammelte Erfahrungen als Lokaljournalistin und war als verantwortliche PR-Beraterin für Marken wie Barilla, Coca-Cola und Mercedes-Benz tätig.