Wenn Sie sich mit dem erstellen einer Website befassen, läuft Ihnen der Begriff Responsive Webdesign sicher das eine oder andere Mal über den Weg. Im Zeitalter der beinahe unzählbaren mobilen Geräte ist das aber auch kein Wunder, denn Responsive Webdesign ist schon lange kein Trend mehr, sondern wichtiger Bestandteil eines guten Webdesigns.

Was ist Responsive Webdesign?

Zunächst einmal sei erklärt, was Responsive Webdesign eigentlich ist und warum es so wichtig für Ihre Internetpräsenz ist. Mit Responsive Webdesign ist gemeint, dass sich Websites unterschiedlichen Bildschirmbreiten anpassen.
Sicher haben Sie selbst schon erlebt, dass eine Website auf Ihrem mobilen Gerät anders aussieht, als im Browser des PCs auf Ihrem Schreibtisch. Diese Websites sind responsive. Der Sinn hinter dem Anpassen einer Website ist, dass ihr Inhalt auf allen Geräten möglichst gut zu erkennen und erreichen ist.

Die Browser-Ansicht unserer Testwebsite

Die Smartphone-Ansicht der selben Website

Zur Zeit sind die weitaus meisten Websites noch nicht auf diese neue Technologie umgestiegen. Das sorgt dafür, dass auf mobilen Geräten die gleiche Website wie auf dem PC angezeigt wird, die eigentlich für viel größere Bildschirme entwickelt wurde. Das Ergebnis: Der Benutzer muss sich mit lästigem Zoomen und Scrollen helfen, bis der Text lesbar auf seinem Gerät zu sehen ist. Das ist nicht sonderlich benutzerfreundlich.

Google legt viel Wert auf responsives Webdesign

Seit April 2015 ist Responsive Webdesign ein Faktor für Google Rankings. Je besser das responsive Design Ihrer Website ist, desto „erfreuter“ ist Google darüber. Über den Google Geschwindigkeitstest lässt sich sogar testen, wie schnell Ihre Internetpräsenz lädt und Sie erhalten Hinweise darüber, wie Anwenderfreundlich Ihre Website auf mobile Endgeräte ist. Das ganze gleich garniert mit Verbesserungsvorschlägen.
Google legt so viel Wert auf die Anpassung von Websites für mobile Geräte, da mittlerweile über die Hälfte aller Suchanfragen über Google von mobilen Gerät aus getätigt werden. Diese Benutzer sind somit eine Hauptzielgruppe und dürfen nicht vernachlässigt werden. Machen Sie also die mobilen Besucher und gleichzeitig Google mit Ihrem responsiven Webdesign glücklich!

Viele WordPress Themes passen sich an

WordPress bietet Ihnen quasi unendlich viele Design-Vorlagen in Form responsiver Themes. Kostenlose Designs finden Sie bei WordPress.org, viele gute kommerzielle Layouts finden Sie auf dem Marktplatz Themeforest. Es gibt kaum noch aktuelle Webdesigns, die sich nicht von selbst auf verschiedene Bildschirmbreiten einstellen.
Als ersten Test, ob und wie gut sich Ihr neues Wunschdesign justiert, können Sie einfach Ihr Browserfenster schmaler ziehen. Je gleichmäßiger sich der Inhalt der Seite an die neuen Größen anpasst, desto besser. Außerdem sollten Sie das Aussehen der Website auf vielen mobilen Geräten mit verschiedenen Bildschirmbreiten testen. Falls Ihnen nicht all zu viele Geräte zur Verfügung stehen, können Sie den Chrome Browser zur Hilfe nehmen. Die Entwicklertools, die Sie über einen Klick ins Menü > Weitere Tools > Entwicklertools öffnen können, zeigen Ihnen zum einen den Code hinter Ihrer Website.

Zum anderen können Sie den Geräte-Button betätigen, der eine Ansicht Ihrer Website in den meisten aktuellen Geräte liefert.

Es lässt sich sogar zwischen horizontaler und vertikaler Ansicht eines Gerätes wechseln. So ist es Ihnen nun möglich, ein Theme auf vielen Geräten vor dem Kauf ausgiebig zu testen.
Achten Sie dabei darauf:

• Alle Inhalte müssen auf allen Geräten lesbar sein.
• Das mobile Webdesign sollte von dem im Browser nicht zu stark abweichen (Wiedererkennung).

Für Experten: Selber Hand ans Theme anlegen

Wenn ein Element Ihrer Website auf einem mobilen Gerät nicht optimal angezeigt wird, können Sie es mit Hilfe sogenannter Media Queries anpassen. Media Queries werden im CSS eingesetzt und sorgen dafür, dass sich ein Element ab einer bestimmten Bildschirmbreite verändert. Wenn Sie beispielsweise einen Text, der im Browser zweizeilig erscheint, auf dem iPhone einzeilig sehen möchten, legen Sie dies in einem Media Query für iPhones fest.

So sieht das Media Query für das iPhone 5 aus

Auf diese Art können Sie sichergehen, dass der Text nur auf dem iPhone, beziehungsweise auf Geräten mit einer Bildschirmbreite von mindestens 320px bis höchstens 568px den Text einzeilig sehen. Alle größeren Geräte zeigen den Text wieder zweizeilig an, es sei denn, Sie legen es anders fest.

Zusammenfassung: Was sollten Sie bei der Planung Ihrer Website für mobile Geräte beachten?

Da also sowohl Google als auch der Großteil Ihrer Besucher Wert auf ein responsives Webdesign legen, erhalten Sie hier noch einmal ein paar Punkte, welche Sie bei Ihrem Webdesign für mobile Geräte beachten sollten:

1. Textlänge: Passen Sie Ihre Texte an, damit mehrzeilige Texte nicht auf kleine Geräte übernommen und gequetscht werden. Lassen sie Texte auf kleinen Geräten wie iPhones immer über die ganze Breite laufen.
2. Schriftgröße: Testen Sie, ob die Schriftgrößen auf allen Geräten stimmen. Außerdem sind nicht alle Schriftarten mit allen mobilen Geräten Ihrer Besucher kompatibel. Das kann dazu führen, dass Ihr Text auf manchen Geräten in einer falschen Schrift dargestellt wird. Binden Sie deshalb z.B. Google Fonts ein, auf welche die Geräte immer über das Web zugreifen können.
3. Navigation: Menüs, Buttons und Links sollten erkennbar gestaltet sein. Ihre Besucher müssen sie mit dem Finger gezielt betätigen können, weshalb die Schrift und der Abstand zueinander nicht zu klein sein dürfen. Wir nennen das „Daumen kompatibel“ :-)
4. Formulare: Kontaktformulare sollten auf allen Bildschirmbreiten klar verständlich sein. Wie beim Text sollte auch hier bei kleinen Geräten nur ein Eingabefeld pro Zeile stehen.
5. Zurück zum Start: Ein „zurück zum Anfang“ Button für kleinere Geräte ist ratsam, da sich Inhalte dort in die Länge ziehen. Der Benutzer muss sonst lange scrollen, bis er wieder am oberen Ende der Website angelangt ist.

Fazit

Heutzutage kann jeder seine Website für mobile Geräte anpassen. Es bedarf einiger Zeit und Fleiß, aber das Ergebnis ist es definitiv wert. Außerdem ist es bei der Anzahl an Benutzern, die Ihre Website über ihre mobilen Geräten besuchen, nur logisch, responsive zu werden und einen guten Eindruck zu hinterlassen. Bei Ihren Besuchern und bei Google!

Quelle Bilder: Eigene Screenshots
Anmerkung: Einige der Links in diesem Beitrag sind „Affiliate-Links“. Wenn Sie auf den Link klicken und einen Artikel kaufen, erhalten wir eine Provision. Auf Ihren Kaufpreis hat es keine Auswirkung. Vielen Dank für Ihre Unterstützung!