Responsive Website

Was ist eine responsive Website?

Eine responsive Website stellt jedem Gerät dasselbe HTML bereit und passt das Layout über flüssige Raster (grids), skalierbare Bilder und CSS Media Queries an. Anstelle einer separaten mobilen Website (m.-Subdomain) fließt der Inhalt so, dass sich Spalten, Schriftarten und Navigation an die Bildschirmbreite anpassen. Die Grundlage ist das <meta name="viewport" content="width=device-width, initial-scale=1"> im <head> der Seite – ohne dieses rendern mobile Browser die Seite in Desktop-Breite und ignorieren Ihre Media Queries.

Warum ist eine responsive Website wichtig?

Google nutzt das Mobile-First-Indexing, was bedeutet, dass die mobile Version Ihrer Seite gecrawlt, indexiert und für das Ranking herangezogen wird. Ein responsives Setup mit einer einzigen URL und demselben HTML ist zudem der von Google empfohlene Ansatz, da er einfacher zu pflegen ist und SEO-Fehler vermeidet, die bei separaten mobilen Seiten häufig auftreten. Für einen Online-Shop bedeutet das auch pure Konversion: Der Großteil des Traffics kommt über Mobilgeräte, und eine überladene Produktseite oder ein Checkout, der nicht auf den Bildschirm passt, kostet direkt Umsatz.

Häufige Anwendungsfälle

• Produktseiten auf Mobilgeräten: Stellen Sie sicher, dass Bilder, Preis und der „In den Warenkorb“-Button ohne Zoomen lesbar und tippbar sind.
• Reservierte Dimensionen: Legen Sie Breite/Höhe oder ein Seitenverhältnis für Bilder und Banner fest, damit diese den Inhalt nicht verschieben und den CLS verschlechtern.
• Priorisierung Above the Fold: Die wichtigsten Inhalte sollten auf kleinen Bildschirmen ohne Scrollen sichtbar sein.
• Geräteübergreifendes Testen: Überprüfen Sie das Theme vor jeder größeren Änderung auf dem Smartphone, Tablet und Desktop.

Shopify-Perspektive

Die Online Store 2.0 Themes von Shopify wie „Dawn“ sind von Haus aus responsiv und Mobile-First aufgebaut, doch Anpassungen und Apps können dies beeinträchtigen. Pop-ups, Sticky Bars und Drittanbieter-Skripte gehören zu den häufigsten Störfaktoren auf Mobilgeräten. Testen Sie Ihre Änderungen in der Geräteansicht des Theme-Editors und auf einem echten Smartphone und behalten Sie die Core Web Vitals in der Search Console im Auge, anstatt sich darauf zu verlassen, dass das Theme alles automatisch regelt.