7-Punkte-Checkliste für responsives Webdesign
Lesen Sie diesen Artikel auf Ihrem Smartphone? Wenn ja, wäre es nicht überraschend – wenn man bedenkt, dass es allein im Jahr 2019 3,9 Milliarden einzigartige mobile Internetnutzer gab.
Aus diesem Grund hat Google im Juli 2019 die Indizierung zuerst für Handys eingeführt und die Website-Betreiber gezwungen, die Mobiltauglichkeit ihrer Websites zu verbessern.
Ist Ihre Website responsiv? Auf dieser Seite gehen wir Ihre umfangreiche Checkliste zum responsiven Design durch, um sicherzustellen, dass Sie allen Benutzern die bestmögliche Website-Erfahrung bieten – unabhängig davon, welches Gerät sie benutzen.
Wir werden sogar einige Tools besprechen, die Sie verwenden können, um die Mobiltauglichkeit Ihrer Website zu prüfen.
Was ist responsives Design?
Ein responsives oder mobiltaugliches Design stellt sicher, dass die Besucher Ihrer Website ein fantastisches Nutzungserlebnis (UX = user experience) haben, egal welches Gerät sie benutzen.
Das bedeutet, dass Ihre Website unabhängig davon, ob sie einen Desktop-Computer, ein Smartphone oder ein Tablet verwendet, gleich aussieht und das gleiche Nutzungserlebnis bietet.
Wenn Sie mit Ihrem Smartphone eine Website besuchen und diese die folgenden Merkmale aufweist, ist sie wahrscheinlich nicht responsiv:
- Der Text ist so klein, dass er fast unleserlich ist
- Wenn Sie versuchen, ein Formular auszufüllen, bleibt es klein, und Sie müssen es vergrössern, damit es ausgefüllt werden kann
- Es ist schwierig, auf Elemente der Navigationsleiste zu klicken
- Fotos erscheinen nicht ausgerichtet
- Sie können auf einer Seite von links nach rechts blättern
Also, diese Homepage ist nicht responsiv:
Wenn Sie andererseits mit Ihrem Smartphone eine Website besuchen, die die folgenden Merkmale aufweist, ist es wahrscheinlich responsiv:
- Textabschnitte füllen die ganze Seite
- Designmodule sind aufeinander angepasst und gut lesbar
- Sie müssen die Ansicht nicht vergrössern, um das Menü zu lesen
- Die Navigationsleisten haben in der Regel die Form eines Hamburger-Menüs, bis sie erweitert werden
- Formulare erweitern sich, um die gesamte Fläche auszufüllen, wodurch das Ausfüllen auf kleinen Bildschirmen erleichtert wird
Ihre vollständige Checkliste für das responsive Design.
7-Punkte-Checkliste für responsives Webdesign, lassen Sie uns starten:
Punkt 1: Testen Sie Ihre aktuelle Website
Wenn Sie sich nicht sicher sind, ob Ihre aktuelle Website responsiv ist, sollten Sie sie testen, um dies herauszufinden. Sie können eine Menge an responsiven Test-Tools verwenden, unter anderem:
Diese Tools bieten einen Einblick, wie Ihre Website auf verschiedenen Geräten aussieht. Denken Sie daran: Wenn Ihre Website responsiv ist, wird sie auf kleineren Geräten nicht so aussehen wie Ihre Desktop-Version.
Mit dem Resizer-Tool von Google können Sie beispielsweise zwischen der Telefon- und der Tablet-Version Ihrer Website hin- und herschalten, um zu sehen, wie sie für die Nutzer aussehen.
Punkt 2: Feststellen, welche Elemente nicht responsiv sind und diese korrigieren
Nach der Verwendung eines Test-Tools haben Sie eine gute Vorstellung davon, welche Website-Elemente responsiv sind und welche nicht. Beispielsweise könnte Ihre gesamte Website auf Mobiltelefonen sehr gut aussehen, mit Ausnahme der Bilder.
Nachdem Sie die responsiven und nicht responsiven Elemente vermerkt haben, können Sie sich damit befassen, wie Sie sie verbessern können.
Einige Punkte der Website, die auf ihre Mobiltauglichkeit geprüft werden müssen, sind:
- die Navigationsleiste
- Bilder
- Schriften
- Formulare
- Buttons
Punkt 3: Ladezeit auf verschiedenen Geräten
Die Ladezeit ist ein entscheidender Teil, um den Benutzern ein optimales Nutzungserlebnis zu bieten. Ihre Website sollte auf allen Geräten schnell geladen werden, sonst riskieren Sie, dass die Benutzer von Ihrer Website abspringen – deshalb ist die Website-Geschwindigkeit Punkt drei auf unserer Checkliste für responsives Design.
83 % der Nutzer erwarten, dass eine Website in nur drei Sekunden oder weniger geladen wird. Unabhängig davon, welches Gerät sie verwenden, sollten Sie also sicherstellen, dass Ihre Website schnell geladen wird.
Ihre Website könnte aus verschiedenen Gründen langsam geladen werden:
- Bilder sind nicht komprimiert
- Seitenelemente sind nicht responsiv
- Überladener Code
- Zu viele schwerwiegende Elemente wie Video
Sie können das Google-Tool PageSpeed Insights verwenden, um mehr darüber zu erfahren, was Ihre Website bremst.
Punkt 4: Fingertippen
Wenn Benutzer Ihre Website auf mobilen Geräten betrachten, könnten sie verschiedene Elemente verwenden, um auf die Elemente Ihrer Website zu tippen. Bei Smartphones z. B. tippen die Benutzer wahrscheinlich mit ihren Fingern auf Elemente Ihrer Website, bei Tabletts könnten sie jedoch einen Stift verwenden.
Sie sollten Ihre Website-Elemente im Hinblick auf diese verschiedenen Optionen in Betracht ziehen, um sicherzustellen, dass sie ein optimales Nutzungserlebnis bieten, egal welches Gerät ein Website-Besucher verwendet.
Sie sollten Dinge in Betracht ziehen wie:
- Sind Knöpfe gross genug für einen Stift auf Tabletts?
- Sind Buttons gross genug für Fingerspitzen auf Smartphones?
- Sind die Hamburger-Menüs der Navigationsleiste auf jedem Gerät leicht anzutippen?
- Sind Formulare einfach mit Fingern oder Stylus auszufüllen?
Punkt 5: Testen Sie Ihre Navigation
Wie wir bereits erwähnt haben, finden Sie bei den meisten Websites die Navigation als Hamburger-Menü und nicht über den oberen Rand der Seite verteilt. Dadurch wird es vermieden, dass Benutzer Ihre Navigationsleiste vergrössern müssen, um die Optionen zu sehen.
Sie werden sicherstellen wollen, dass Ihr Navigationsmenü auf allen Geräten einwandfrei funktioniert und dass nichts abgeschnitten wird, wenn Benutzer es öffnen.
Ihr Navigationsmenü ist ein überaus wichtiger Teil Ihrer Website, da es den Benutzern einen Leitfaden bietet, damit sie genau das finden, was sie suchen. Wenn das Navigationsmenü nicht einwandfrei funktioniert, werden die Benutzer von Ihrer Website abspringen.
Punkt 6: Popups responsiv machen
Popups werden in der Regel durch eine bestimmte Aktion ausgelöst. Zum Beispiel wenn Sie versuchen, eine Website zu verlassen, taucht ein Fenster auf und animiert Sie dazu einen Newsletter zu abonnieren. Andere Aktionen, die ein Popup auslösen können, sind:
- zum Ende einer Seite scrollen
- Klicken auf einen bestimmten Link
- Eine bestimmte Zeit lang auf der Homepage bleiben
Diese Popup-Fenster könnten ein Sonderangebot bieten oder Benutzer dazu einladen, sich für einen Newsletter anzumelden.
Ebenso wichtig ist es, die Mobiltauglichkeit von Popup-Fenstern im Auge zu behalten, da sie enorme Vorteile für Ihr Unternehmen bieten.
Stellen Sie sicher, dass Ihre Website auf allen Geräten visuell ansprechend aussieht.
Wenn Sie eine Website speziell für den Desktop entwerfen, kann es schwierig sein, Ihre Website-Elemente auf anderen Geräten wie Smartphones und Tablets richtig darzustellen.
Selbst wenn Sie alle Ihre Website-Elemente responsiv gestalten, ist es dennoch entscheidend, sicherzustellen, dass jedes Element Ihrer Website auf jedem Gerät gut aussieht.
Das werden Sie sicherstellen wollen:
- die Bilder nicht den ganzen Bildschirm einnehmen
- Menüs werden nicht abgeschnitten
- Aufzählungen sind korrekt formatiert
- Tabellen sehen ordentlich aus
- Dienstlisten werden korrekt wiedergegeben
- Produktbilder und Beschreibungen sind richtig formatiert
- Formulare sind optisch ansprechend und funktionsfähig
- Die Einkaufswagen sind organisiert und leicht zu bedienen
Punkt 7: Machen Sie sich selbst zum Besucher Ihrer Website
Drehen Sie ein paar Runden um Ihre Website, um sicherzustellen, dass Sie keine Designelemente übersehen haben. Zum Beispiel:
- Testen Sie jeden Schritt beim Einreichen eines Formulars
- Testen Sie jeden Schritt beim Kauf eines Produkts
- Testen Sie die Links in der Navigationsleiste
- Testen Sie verschiedene Bereiche Ihrer Website wie Ihren Blog und Ihre Produktseiten
Es ist für Ihre Online-Präsenz und den Online-Erfolg Ihres Unternehmens von entscheidender Bedeutung, dass Ihre Website vollständig responsiv ist. Da die Zahl der mobilen Benutzer täglich steigt, können Sie keine Website haben, die nicht für jedes Gerät angepasst ist.