Responsive Webdesign einfach erklärt

Karin WagnerGeschäftsführerin Seokratie Österreich

Zuletzt aktualisiert: 31. Aug 2022

Responsive Webdesign ist eine Webprogrammierung, bei der sich die Website automatisch an jede Ausgabegröße anpasst und auf jedem Endgerät optimal angezeigt wird. Responsive Webdesign hilft Deinen Usern, sich leichter durch Deine Seite zu navigieren und bringt Dir für SEO zahlreiche Vorteile.

Was Du bei der Umsetzung von Responsive Webdesign beachten solltest

Websites werden auf Smartphones und Tablets im Hochformat (Portrait), auf Desktops im Querformat (Landscape) angezeigt. Damit Deine Website für Deine User auf allen Endgeräten optimal funktioniert, musst Du sie flexibel, sprich reaktionsfähig, anlegen.

Smartphones: 320px bis 767px
Tablets: 768px bis 1023px
Computer Desktops: 1024px+

Wenn Du Deine Website starr nach Pixel anlegst, leidet auf Endgeräten in anderen Formaten die Bedienbarkeit, mit der Folge, dass:

• die Bounce Rate (Absprungrate) steigt
• die Interaktionsfähigkeit und damit die Conversionrate sinkt.

Für die Erstellung von Responsive Webdesign stehen Dir HTML5 sowie CSS3 Media Queries zur Verfügung. Wenn Du mit WordPress arbeitest, ist die technische Implementierung von Responsive Webdesign relativ einfach. Oft werden Themes (wie zum Beispiel Twenty Twenty) zur Verfügung gestellt, die bereits reaktionsfähig sind.

Die technische Machbarkeit ist aber nur die halbe Miete: Responsive Webdesign verlangt eine neue, nutzerorientierte Darstellung Deiner Inhalte. Einfach den Bildschirm zu verkleinern, funktioniert nicht. Es ist wichtig, dass Du im Vorfeld überlegst, wie Du Deine Inhalte priorisierst und platzierst und an die Bedürfnisse Deiner (mobilen) User anpasst. Welche Inhalte sind wichtig und müssen auch auf kleinen Endgeräten sofort gesehen werden (above the fold)? Welche Inhalte können nachgelagert angezeigt werden? Wie erfolgt die Navigation? Wie lassen sich Navigationselemente (wie z.B. Buttons, Links oder Menü Kategorien) bedienen?

Wie erkennst Du Responsive Webdesign?

Responsive Webdesign zu erkennen ist gar nicht schwer. Dazu musst Du nur das Browserfenster der geöffneten Website verkleinern und Du siehst sofort, ob sich die Inhalte an das kleinere Browserfenster anpassen und die volle Interaktionsfähigkeit der Website gegeben ist. Mit Google kannst Du testen, ob Deine Website für Mobilgeräte optimiert ist.

Bedeutung für SEO

Responsive Webdesign wirkt sich in mehrfacher Hinsicht positiv auf Dein Ranking aus.

1. Wenn Du mit Responsive Webdesign arbeitest, brauchst Du nur eine URL Für ältere Websites wurden oft eine URL für die mobile Version und eine separate URL für die Desktop Version erstellt. Der Aufwand für die Wartung sowie die Suchmaschinenoptimierung beider Domains ist sehr hoch. Beim Responsive Webdesign hast Du weniger Aufwand, vermeidest potenzielle Fehler und konzentrierst den gesamten Link Juice und Traffic auf einer URL.
2. Der Google Algorithmus bevorzugt Responsive Websites. Mit dem Mobile-First- Index bestätigt Google die Wichtigkeit von mobilen Endgeräten und stuft mobil optimierte Websites besser ein.
3. Mit der nutzerfreundlichen Darstellung Deiner Website erhöhst Du die Verweildauer und die Interaktionsrate Deiner Nutzer. Wenn Deine Besucher auf Deiner Seite finden, wonach sie suchten, bleiben sie auf Deiner Webseite und Du senkst die Absprungrate. Zudem kommen Deine Besucher wieder. Das sind positive Nutzersignale (User Signals), die den Suchmaschinen signalisieren, dass Deine Webseite relevant ist und mit gutem Ranking „belohnt“ wird. Mehr über User Signale erfährst Du hier.

Weiterführende Links

• Was bedeutet Responsive Design? – Ryte Wiki
• Was ist Responsive Webdesign? – Verständlich erklärt – exovia
• Mobile First-Indexierung  |  Blog von Google Search Central  |  Google Developers
• Webdesign und SEO: Die 10 wichtigsten Tipps – Seokratie