Responsive Design

Eine Website – mehrere Layouts

Was ist responsive Design?

Damit jeder User die Website unabhängig vom gewählten Endgerät optimal angezeigt bekommt, greifen Webdesigner auf das responsive Design zurück. Zu Deutsch bedeutet der Begriff responsive Design: „sich anpassendes Design“. Die vom Nutzer aufgerufene Website wird je nach Bildschirmgröße unterschiedlich dargestellt. Dies gewährleistet eine Besucherfreundlichkeit des Webauftrittes, auch User Experience genannt.
Je nach Bildschirmgröße werden die Elemente der Website und die Eingabemöglichkeiten auf das entsprechende Endgerät angepasst. Hierzu zählen zum Beispiel:

Anordnung von Inhaltselementen
Schriftgröße

Menüführung
Anordnung von Inhaltselementen

Warum Sie ein responsive Design verwenden sollten

Um jeden Nutzer optimal ansprechen zu können ist die Gestaltung Ihrer Website im responsive Design essenziell wichtig. Mehr als 50% der bei Google gestellten Suchanfragen erfolgen über Smartphones. Die weltweiten Nutzerzahlen, ausgewertet von statcounter, sprechen hier deutlich.

Handy

Desktop

Tablet

Stand September 2021

Selbstverständlich spielt die Suchmaschinenoptimierung für responsive Designs ebenfalls eine sehr wichtige Rolle:

Verbessertes Google Ranking
Ein funktionierendes responsive Webdesign wirkt sich positiv auf Ihre Suchmaschinenoptimierung bei Google aus. Bessere Rankings werden bei Google von mobilfreundlichen Websites erzielt. Bereits seit 2015 werden von Google Websites mit responsive Design bei der Indexierung stark bevorzugt – dies wurde von Google bereits offiziell bestätigt. Google selbst spricht hier von „bedeutenden Auswirkungen“ in den organischen Suchergebnissen für Websites mit responsive Design.
Erhöhte Usability
Durch die steigende Nutzung von mobilen Endgeräten steigt auch die Erwartung der User an die Website, diese entsprechend ihrem Device angezeigt zu bekommen. Ihre Seite im responsive Design erhöht nicht nur die Anzahl der Besucher auf Ihrer Website, sondern führt auch zu einer höheren Verweildauer und geringeren Absprungrate. Diese Faktoren werden ebenfalls von Google gemessen und wirken sich positiv auf Ihr Ranking aus.
Keine doppelten Inhalte
Beim responsive Design wird für Ihre Website die gleiche URL verwendet, wie für die Desktop Version. Dadurch wird der sogenannte duplicate Content vermieden, denn hinter Ihrer Website liegt immer der gleiche Quellcode. Doppelte Inhalte, welche durch die Erstellung von extra Seiten für Desktop und Mobile entstehen würden, werden von Google schwer geahndet. Dies kann im schlimmsten Fall sogar zu einem Rauswurf aus den Suchergebnissen bei Google führen.

Die Breaking Points – Wann wird eine Website wie dargestellt?

Für die Darstellung auf den entsprechenden Endgeräten gibt es verschiedene Richtwerte, an welchen man sich für ein responsive Design orientieren kann.

Die Bildschirmgröße wird hierbei diagonal gemessen und üblicher Weise in Zoll angegeben.

Um optimal skalieren zu können wird ebenfalls die Bildschirmauflösung benötigt.

Dieser Wert wird in Pixel angegeben und ist der ausschlaggebende Richtwert für das responsive Design.

Folgende Richtwerte können wir Ihnen an die Hand geben:

Die Grafik zeigt einen Desktop, ein Tablett und ein Handy untereinander. Von allen drei Darstellungen gehen grüne Pfeile nach rechts weg, welche auf die entsprechenden Pixelgrößen zeigen. Desktop: 1200 Pixel und größer, Tablet: 600 Pixel und größer bis 1200 Pixel, Handy: 320 Pixel und größer bis 600 Pixel

FAZIT

Ein responsive Design gehört heut zu Tage zum guten Ton im Web und zählt zum professionellen Standard. Die vielen positiven Aspekte für Ihre Sichtbarkeit im Ranking bei Google sprechen hier ebenfalls für sich. Professionelle Agenturen bieten Ihnen diesen Service standardmäßig an. In einer unverbindlichen und transparenten Vorabberatung können Ihnen auch Referenzen von bestehenden Websites gezeigt werden, damit Sie sich Ihr Endergebnis besser vorstellen können.

Die Investition in ein responsive Webdesign wird sich für Sie und Ihre Kunden lohnen.