In der Reihe Usability und Responsive Design wollen wir Dir zeigen, wie Du Webpräsenzen benutzerfreundlich gestalten kannst. Dies umfasst zum einen das optische Design Deiner Seite und zum anderen Leistung und Optik auf einem mobilen Endgerät.
Ein gutes optisches Design sieht jedoch nicht nur schick aus, sondern erhöhen Deine Conversion und Dein Ranking bei Google. Eine Website, die nicht ansprechend aussieht, zu lange lädt oder Deinen Kunden nicht schnell genug mit allen nötigen Informationen versorgt wird eine hohe Bouncerate(Absprungrate) haben. Eine hohe Bouncerate ist für Google ein Zeichen, dass Deine Seite ins Ranking Nevada gehört, da Du offensichtlich dem Nutzer keinen echten Mehrwert bieten kannst. Vor allem seit den neueren Google Updates sind Kriterien der Nutzerfreundlichkeit und des Mehrwertes immer ausschlaggebender. Falls Du mehr über die Entwicklung der verschiedenen Google Algorithmen und Updates erfahren möchtest klicke hier.

Warum Du deine Website für mobile Geräte optimieren solltest

Im Jahr 2017 wurden 43 % der Websites über ein Smartphone oder über ein Tablett besucht. Bei Online-Shops liegt die Zahl sogar bei 54 %. Allerdings antworten auf die Frage: “welche Hindernisse gibt es beim mobilen Einkauf?“ noch 23 % der Nutzer, dass mobile Websites nicht einfach zu benutzen seien.* Dies ist eine Folge von schlechtem Responsive Design. Im heutigen Blogartikel wollen wir unseren Fokus auf das Thema Responsive Design und Mobile Marketing legen. Auch das Responsive Design ist seit 2015 einer der 200 Rankingfaktoren des Google-Algorithmus. Wenn Du Dich also vorher noch nicht mit dem Thema beschäftigt hast, wird es nun höchste Zeit, falls Du das Maximum aus Deinem Webauftritt heraus holen möchtest. Falls Du Dir unsicher bist, ob Deine Website für Mobilegeräte optimiert ist, bietet Google mit dem Mobile friendly Test Tool eine schnelle Möglichkeit Deine Performenz auf mobilen Endgeräten zu überprüfen.

Was genau bedeutet Responsive Design?

Da Websites meist auf einem Desktop Computer erstellt werden ist das Ziel von einem Responsive Design, die Inhalte der Seite in kompletter Form auf Geräten mit abweichender Bildschirmgröße anzuzeigen. Sehr gute Beispiele für mobil optimierte Seiten sind gutefrage.net und BILD.de. Falls Du unsicher bist, ob Deine Website auf allen mobilen Geräten ihre Nutzfreundlichkeit behält kannst Du dies auf www.mobiletest.me herausfinden. Eine weitere Möglichkeit ist die Chrome Erweiterung User Agent Switcher hiermit kannst Du ebenfalls Websites auf verschiedenen Geräten ausgeben lassen.

Mobile Website oder Responsives Design?

Es gibt zwei Arten Deinem Nutzer ein mobiles Weberlebnis zu ermöglichen. Zum einen hast Du die Möglichkeit eine zusätzliche Seite zu erstellen, die optimiert für Mobilgeräte ist. Bei der anderen Variante gestaltest Du Deine Website responsive, wo durch das Layout und die Inhalte der Seite auf mobilen Endgeräten passend angezeigt werden. Zwar bietet eine extra mobil optimierte Seite mehr Spielraum was die Bearbeitung und genaue Anpassung betrifft, jedoch geht sie auch mit einem Mehraufwand einher, da Du zwei Seiten pflegen und warten musst. Ein Argument für eine separate mobile Website ist jedoch, dass Du hier gezielter den Content bzw. Informationen in den Vordergrund stellen kannst, die der Nutzer braucht. Auf einer Desktopversion entsteht ein positiver Eindruck einer Website häufig mit großen und beeindruckenden Bildern. Auf mobilen Endgeräten stören solche Bilder nur, falls Du sie nicht runter skalierst. Daher kann eine mobile Version der Website eine echte Alternative sein.

Responsive Design

Was es auf einer mobilen Seite unbedingt zu beachten gibt

Um das Ganze zu verdeutlichen, nehmen wir eine Seite, die Auskunft über Zugfahrpläne gibt, als Beispielszenario. Auf der Desktop-Version der Seite sieht man eine Top-Bar Navigationsleiste, ein großes Bild auf dem Werbung für ein Fahrkartenangebot gemacht wird und in der Sidebar können verschiedene Zugverbindungen abgerufen werden. Bei der Erstellung einer mobilen Variante solltest Du Dir nun überlegen, was Dein Kunde wirklich will und welche Informationen er braucht. In unserem Fall wird der Besucher der mobilen Seite hauptsächlich Zugverbindungen einsehen und Fahrten buchen. Aus diesem Grund sollten überflüssige Informationen weggelassen werden oder nicht an Positionen platziert werden, die im Aufmerksamkeitsfokus des Nutzers liegen.
Sprich bei einem Online Shop sollten, Deine Produkte das Erste sein, dass Dein Nutzer auf seinem Mobilgerät zu Gesicht bekommt. Bei einem Ratgeber Artikel sollte der Informationstext zuerst sichtbar sein und nicht ein unnötiges Element über das Dein Nutzer erst hinweg scrollen muss.
Generell solltest Du vermeiden, dass die Anzeige auf mobilen Geräten mehrspaltig erfolgt. Dies führt nur zu unnötigem Scrollen.

Wie erstelle ich eine Mobile Version meiner Website?

Mithilfe einer Subdomain oder einer extra Domain kannst Du eine extra Seite für mobile Nutzer erstellen. Bei vielen Webhostanbietern sind einige Subdomains im Webpacket mit inbegriffen. Mit den oben vorgestellten Tools kannst Du dann immer wieder überprüfen, wie die Anzeige auf dem entsprechenden Mobilgerät aussieht.
Um die Frage zu klären, woher Deine Seite weiß ob der Besucher versucht mit einem mobilen Gerät Zugriff auf die Seite zu erhalten, empfehlen wir Dir das Plugin Mobile Smart (Link). Wenn Du erst einmal mithilfe einer Subdomain eine mobile Version deiner Website erstellt hast erkennt das Plugin mit welchem Gerät der Nutzer auf Deiner Website unterwegs ist. Das Plugin unterscheidet nicht nur zwischen Desktop Gerät und mobilem Gerät sondern erkennt zusätzlich auch Tablett Geräte. In den Einstellungen kannst Du sogar festlegen, welche Features für die einzelnen Geräte sichtbar sein sollen.

Schritte zum Responsive Design

Ein Hauptproblem bei der Anzeige auf mobilen Geräten ist, dass die Breite des Bildschirms nicht angepasst wird. Die Ursache für das Problem liegt in fixen Breitenangaben für Text- und Boxelemente. Gleiches gilt auch für Bild Elemente. Achte bei Deinem Code (Texteditor auf Wordpress) darauf, dass Du keine fixen Größenangaben benutzt. Der folgende Code sorgt für eine automatische Skalierung und somit einem Responsive Design von Bildern auf mobilen Geräten.
“img {max-width: 100%; height: auto;}”

Eine unübersichtliche Seitennavigation kann auf einer mobilen Website schnell zu einem frustrierenden Nutzererlebnis führen. Natürlich gäbe es auch komplizierte HTML & CSS Lösungen, allerdings lässt sich das Problem in wenigen Minuten durch das Wordpress Plugin (Link auf WP Responsive Menue)lösen. Dieses ermöglicht Dir eine individuelle Anpassung Deines Menüs und sorgt im Umkehrschluss für eine nutzfreundliche Anzeig auf mobilen Endgeräten.

Fazit zu Responsive Design und mobile Website Versionen

Überlege Dir immer welche Elemente Dein Nutzer auf seinem mobilem Endgerät unbedingt sehen muss. Hier gilt Zeit ist Geld, je weniger Suchaufwand Dein Kunde hat, um das zu bekommen was er braucht, desto besser. Diese Erkenntnis solltest Du beim Erstellen einer Responsive Website immer im Kopf haben. Unterstützung für mobile Geräte ist in der heutigen Zeit ein Muss, aber mithilfe von vielen Plugins kein Hexenwerk mehr.
In diesem Artikel haben wir Dir die wichtigsten Plugins für ein Responsive Design gezeigt. In einem Folgeteil werden wir noch einmal ausführlicher auf die große Anzahl von WordPress-Plugins für ein Responsive Design eingehen und Dir zeigen welche Wordpress-Erweiterungen, Du unbedingt in Deinem Plugin-Portfolio haben solltest.

Previous Next
Close
Test Caption
Test Description goes like this