Responsives Webdesign: Warum Ihr Unternehmen auf dem Smartphone gut aussehen muss
Ihre Kunden suchen Sie auf dem Handy, und Google bewertet Sie ebenso. Eine Website, die nur am Computer gut aussieht, verliert Kunden.
Vom Team von Diskette Studio · · 6 Min. Lesezeit
Eine responsive Website passt sich der Bildschirmgröße an: Auf dem Smartphone ordnet sie sich in einer Spalte an, mit lesbarem Text und Buttons, die man antippen kann; am Computer nutzt sie den vorhandenen Platz. Es sind nicht zwei verschiedene Websites, sondern eine, die je nach Gerät ihre Form ändert.
Warum es für Ihr Unternehmen wichtig ist
- Ihre Kunden suchen vom Handy aus: eine Empfehlung per WhatsApp, eine Anzeige in sozialen Netzwerken oder eine Suche unterwegs enden auf einem kleinen Bildschirm.
- Google bewertet zuerst die mobile Version. Das nennt sich Mobile-First-Indexierung: Ist Ihre mobile Version schwach, wirkt sich das darauf aus, wie Ihre Seite in der Suche erscheint, auch für Menschen, die am Computer suchen.
- Geschwindigkeit und Komfort beeinflussen den Umsatz: Wer zoomen, warten oder den Button suchen muss, wechselt zur Konkurrenz.
- Eine Website, die auf dem Handy schlecht aussieht, wirkt unordentlich, selbst wenn Ihr Unternehmen hervorragend ist.
Woran man eine wirklich responsive Website erkennt
Sie passt ohne seitliches Scrollen
Nichts darf über den Bildschirmrand hinausragen. Muss man die Seite zum Lesen seitlich verschieben, stimmt etwas nicht. Die Seite muss ihre Breite mit dem „Viewport“-Tag festlegen; ohne ihn zeigt das Handy sie als winzige Desktop-Seite.
Lesbarer Text ohne Zoomen
Der Haupttext sollte sich bequem lesen lassen, ohne hineinzuzoomen. Als Richtwert sind 16 Pixel eine sinnvolle Mindestgröße für den Fließtext, mit gutem Kontrast zum Hintergrund.
Leicht antippbare Buttons
Finger sind ungenauer als ein Mauszeiger. Buttons und Links müssen groß genug und weit genug voneinander entfernt sein, damit man nicht den falschen antippt. Als Richtwert gelten etwa 44 Pixel Höhe.
Bilder, die sich anpassen
Ein 4-MB-Foto ist am Computer mit guter Verbindung in Ordnung, lädt auf dem Handy mit mobilen Daten aber ewig. Bilder sollten komprimiert sein, moderne Formate (WebP oder AVIF) nutzen und in der Größe laden, die jeder Bildschirm braucht.
Ein einfaches Menü
Auf dem Smartphone klappt das Menü zusammen (das klassische Symbol mit drei Strichen). Es sollte sich mit einem Tippen öffnen und schließen lassen und die wenigen wichtigen Bereiche zeigen, nicht zwanzig.
Kurze Formulare
Jedes zusätzliche Feld verringert die Zahl derer, die das Formular abschließen. Fragen Sie nur ab, was nötig ist, und bieten Sie einen WhatsApp-Button an, der auf dem Handy oft bequemer ist als eine E-Mail.
Fehler, die wir oft sehen
- Zuerst für den Desktop gestalten und das Design am Ende „verkleinern“.
- Text in Bildern: Auf dem Handy ist er winzig und weder lesbar noch durchsuchbar.
- Pop-ups, die den ganzen Bildschirm verdecken und einen winzigen Schließen-Button haben.
- Videos oder Animationen, die immer laden und das Datenvolumen der Besucher verbrauchen.
- Telefonnummern, die sich nicht zum Anrufen antippen lassen.
- Breite Tabellen, die abgeschnitten werden.
So prüfen Sie Ihre Seite in 10 Minuten
- Öffnen Sie Ihre Seite auf dem Handy mit mobilen Daten, nicht mit WLAN. Wie lange dauert es, bis sie erscheint?
- Gehen Sie alle wichtigen Seiten durch. Mussten Sie je zoomen oder seitlich scrollen?
- Tippen Sie auf den Hauptbutton, die Telefonnummer und WhatsApp. Funktionieren sie beim ersten Versuch?
- Füllen Sie Ihr eigenes Kontaktformular auf dem Handy aus. Ist das bequem?
- Prüfen Sie Ihre Adresse mit PageSpeed Insights und sehen Sie sich das Ergebnis „Mobil“ an. Ziel: LCP unter 2,5 s, CLS unter 0,1 und INP unter 200 ms.
- Sehen Sie in der Google Search Console den Bericht „Seitenerfahrung“ und die Nutzerfreundlichkeitshinweise an.
Bei Diskette Studio gestalten wir jede Website zuerst für das Smartphone und testen sie vor der Übergabe auf echten Handys.