Kurz gesagt: Responsive Webdesign bedeutet, dass eine einzige Website mit derselben Adresse und demselben Inhalt auf jedem Gerät gut lesbar und bedienbar ist. Google bewertet Websites anhand ihrer mobilen Version und empfiehlt responsives Design als die am einfachsten umzusetzende und zu pflegende Lösung. Alle Websites, die wir bauen, sind von Anfang an responsiv.
Was responsive Webdesign bedeutet
Bei einer responsiven Website liefert der Server allen Geräten dieselbe Seite aus. Wie sie aussieht, legt das Stylesheet fest: Auf einem breiten Bildschirm stehen Spalten nebeneinander, auf dem Handy rutschen sie untereinander. Schriftgrößen, Bilder und Abstände passen sich der verfügbaren Breite an.
Google beschreibt drei Wege, Websites für Mobilgeräte bereitzustellen: responsives Design mit einer Adresse und einem HTML-Code, dynamische Auslieferung mit derselben Adresse, aber gerätabhängigem Code, und getrennte mobile Adressen. Für responsives Design spricht laut Google, dass es am einfachsten umzusetzen und zu pflegen ist.
Drei Bausteine
- Viewport-Angabe: Eine Zeile im Seitenkopf sagt dem Browser, dass die Seite die Gerätebreite nutzen soll, statt eine Desktop-Seite verkleinert anzuzeigen.
- Flexibles Raster: Spalten und Bereiche sind in relativen Breiten angelegt und ordnen sich je nach Platz neu an.
- Media Queries: Regeln im Stylesheet, die ab bestimmten Breiten andere Abstände, Schriftgrößen oder Anordnungen festlegen.
Warum Google auf die mobile Version schaut
Google crawlt und indexiert Websites mit dem Smartphone-Crawler und verwendet die mobile Version des Inhalts für Indexierung und Ranking. Fachlich heißt das Mobile-First-Indexierung. Was auf dem Handy fehlt, kennt Google im Zweifel nicht.
Daraus ergeben sich drei Punkte, auf die wir bei jeder Website achten:
- Gleicher Inhalt: Texte, Überschriften und wichtige Angaben stehen in der mobilen Ansicht genauso wie auf dem Desktop. Ausgeklappte Bereiche wie Akkordeons sind dabei unproblematisch.
- Gleiche strukturierte Daten: Angaben für Google, etwa zu Betrieb, Öffnungszeiten oder häufigen Fragen, sind in jeder Ansicht vorhanden.
- Bilder und Videos: Sie haben eine ausreichende Qualität, eine beschreibende Alternativbeschreibung und laden auf dem Handy nicht unnötig groß.
Was Besucher auf dem Handy erwarten
Wer unterwegs sucht, will meist schnell etwas erledigen: anrufen, eine Nachricht schreiben, den Weg finden oder einen Termin anfragen. Eine gute mobile Ansicht macht diese Wege kurz.
Bedienbar mit dem Daumen
Schaltflächen und Links sind groß genug und haben Abstand zueinander, damit niemand daneben tippt. Telefonnummern sind als Anruf-Link angelegt.
Lesbar ohne Zoomen
Die Schrift ist auf dem kleinen Bildschirm ohne Vergrößern lesbar, Zeilen laufen nicht über den Rand hinaus, und nichts muss seitlich gewischt werden.
Kontakt immer erreichbar
Auf unseren Websites sitzt auf dem Handy eine feste Leiste mit WhatsApp und Anruf am unteren Rand. So ist der Kontakt aus jedem Abschnitt der Seite einen Tipp entfernt.
Responsive Website erstellen lassen: was in unseren Paketen steckt
Jedes unserer drei Pakete ist responsiv gebaut, ohne Aufpreis. Wir prüfen den Entwurf auf mehreren Bildschirmbreiten, bevor die Seite online geht.
| Paket | Preis inkl. MwSt. | Geeignet für |
|---|---|---|
| Start | 360 € | Kompakte Website für einen kleinen Betrieb |
| Business | 800 € | Firmenwebsite mit mehreren Leistungsseiten |
| Onlineshop | 1.250 € | Shop mit WooCommerce oder Shopify |
Domain und Hosting sind im ersten Jahr enthalten, Logo und Corporate Design kostenlos. Alle Details stehen unter Pakete und Preise.
So prüfen Sie Ihre eigene Website
Öffnen Sie Ihre Website auf dem eigenen Handy und gehen Sie die Wege durch, die Ihre Kundschaft geht: Leistung finden, Preis oder Öffnungszeiten lesen, anrufen oder schreiben. In der Google Search Console sehen Sie im Bericht zur URL-Prüfung, wie Google eine Seite mit dem Smartphone-Crawler abruft. Mehr zur Ladezeit auf dem Handy finden Sie in unserem Beitrag SEO-Grundlagen für kleine Unternehmen.