Foto: bigstockphoto.com

Foto: bigstockphoto.com

Immer mehr Menschen sind von mobilen Endgeräten aus online. Diese Entwicklung lässt sich auf die Formel Mobile ≥ Desktop bringen. Wer die User erreichen will, muss allerspätestens jetzt seinen E-Shop, seinen Blog, seine Webseite für Aufrufe von Smartphone und Tablet aus fit machen. Mobile-Optimized ist das Stichwort. Außerdem ist mobile Nutzerfreundlichkeit seit April 2015 auch ein Rankingfaktor Googles. Es stellt daher auch ein Tool zur Verfügung, mit dem sich schnell prüfen lässt, ob eine Seite für Mobilgeräte optimiert ist.

Wenn Du schon (längst) soweit bist, dann hast Du alles richtig gemacht und gehörst nicht zur Zielgruppe des heutigen Beitrags. Wenn nicht, erklären wir Dir hier, wie der Aufenthalt auf Deiner Webseite auch für mobile Nutzer zu einem angenehmen Erlebnis wird.

Wie es NICHT geht

Warum das Optimieren Deiner Seite oder Deines Online-Shops wichtig ist, lässt sich anhand des Worst-Case-Szenarios deutlich machen. Wir haben hierzu ein wenig Webarchäologie betrieben und eine Seite ausgegraben, die auf dem Stand der frühen 2000er Jahre stehen geblieben zu sein scheint. Eine Seite, auf der alles in niedriger Auflösung tanzt und blinkt. Dann haben wir sie uns über den in Chrome integrierten Viewpoint-Emulator anzeigen lassen:

Vorzeitwebite

Screenshot

Stellen wir uns nun vor, wir wollten darauf navigieren. Wir treffen mit einem Finger gleich mehrere Buttons und können auch die Aufschrift darauf nicht lesen, wir müssen heranzoomen, herumwischen… Um Usern genau diese Erfahrung zu ersparen, gibt es Responsive Design.

Aber auch Seiten, die auf den ersten Blick weniger wie Relikte aus dem letzten oder vorletzten Jahrzehnt wirken, ignorieren Responsive Design noch vereinzelt. Dass keine Optimierung für mobile Endgeräte stattgefunden hat, verraten einem auch Anmeldefenster zum Ranzoomen und Ärgern. Zu kleine, zu nah beieinander liegende Buttons, die für die Finger eigentlich zu dick sind, machen auch etwa soviel Freude wie Miniaturenmalerei mit dem Farbroller.

Die 3 Merkmale der mobile-optimzed Webseite

1. Responsive Design
„Mobile-optimized“ ist nicht gleichbedeutend mit „Responsive Design“, aber ohne Responsive Design ist mobile Optimierung nur möglich, wenn Du mit einer mobilen Version Deiner Seite arbeitest, Du also im Grunde zwei Webseiten unterhälst: meine-seite.de und m.meine-seite.de. Wenn die Seite so angezeigt wird, dass man nach unten Scrollen muss, um mehr zu sehen, ist eigentlich alles in Ordnung.

Mobile Optimzation

Foto: bigstockphoto.com

Sobald man seitwärts scrollt, kann von mobiler Nutzerfreundlichkeit nicht mehr die Rede sein. Das sollte bei der mobilen Version Deiner Seite Standard sein, bei einer responsive mobile-optimized Seite ordnen sich die Inhalte automatisch möglichst nutzerfreundlich an. Hier lässt es sich auch einrichten, dass Buttons und Anmeldefenster in ausreichender Größe angezeigt werden.

2. Schnelle Ladezeiten
Begrenztes Datenvolumen und ein Schirm, der nach kurzer Zeit in den Ruhemodus schaltet, wenn er nicht berührt wird – wenn die Seite da zu lange lädt, verabschiedet sich der mobile Nutzer mit hoher Wahrscheinlichkeit. Außerdem ist die Ladezeit ein weiterer Google-Rankingfaktor. Daher gibt es auch hier -unter anderem- ein Tool aus dem Hause Google, das Dir auch gleich sagt, was Du verbessern solltest.

3. Alle Inhalte sind mobil abrufbar
Es kann unterschiedliche Gründe dafür geben, warum Elemente nicht angezeigt werden, aber es ist gut, nicht zu vergessen, dass der Safari-Browser und Flash in all den Jahren keine Freunde geworden sind. Flash-Elemente werden nicht angezeigt. Daher ist es gut darüber nachzudenken, statt Flash-Animationen auf HTML5 zu setzen. Wenn Du Videos einbettest, solltest Du darauf achten, dass sie von allen Endgeräten aus zugänglich sind.

Eine Seite, die diese 3 Merkmale aufweist, kann vom User ohne weiteres und problemlos aufgerufen, angesehen, gelesen und zwecks weiterer Interaktion angetippt werden.

Nicht responsive?

Foto: bigstockphoto.com

„Meine Seite ist nicht mobile-optimized und ich kann nicht programmieren, was nun?“

 

Antwort: Das kommt darauf an, ob du statt selbst zu programmieren mit vorgefertigten Themes für Dein jeweiliges Content-Management-System arbeitest oder aber einen Webentwickler eine für mobile Geräte optmierte Webseite für dich programmieren lässt.

1. Die Webseite aus dem Baukasten für Mobilgeräte optimieren

Wenn Deine Seite über WordPress läuft, musst Du nicht coden können, um sie für Mobilgeräte zu optimieren. Es gibt eine Vielzahl von Themes, die responsive sind.
Solche freien, responsive Themes findest du unter anderem hier. Und auch für Joomla sind responsive Themes kostenlos erhältlich.

Auch diverse Plugins helfen Dir, Deine WordPress-Seite responsive zu gestalten:

Bilder kannst Du zum Beispiel mit RICG optimieren.

Das Menü kannst Du mit dem Plugin Responsive Menu dazu bringen, sich dem jeweiligen Endgerät anzupassen. Es ist nach seiner Hauptfunktion benannt, erlaubt Dir jedoch auch, die Buttons selbst zu modifizieren.

Für im Hinblick auf mobile Nutzer optimierte Formulare kannst du unter anderem mit den Plugins Contract Form 7 oder Gravity Forms arbeiten.

Responsive Social-Sharing-Plugins sind ebenfalls verfügbar. Eines davon ist zum Beispiel Monarch, ein anderes das Fixed WordPress Social Share Buttons Plugin.

Wenn Du bestimmte Funktionen für bestimmte Endgeräte deaktiveren möchtest, dann ist das Mobble-Plugin eine nützliche Ergänzung.

2. Die maßgeschneiderte Webseite vom Webentwickler

Wenn Du nun eine/n Webentwickler/in mit Knowhow und Erfahrung im Bereich Mobile Optimization eingestellt hast, um Dir eine für die mobile-first World taugliche Webpräsenz aufzubauen, stellen sich ganz andere Fragen als die nach dem benötigten Plugins. Und auch wenn du nicht selbst programmierst, heißt das nicht, dass Du das Ergebnis nicht noch einmal kontrollierst.

Darf’s auch eine eigene App sein?
Der Vollständigkeit halber sei hier die Option, zusätzlich zur mobilen Version Deiner Seite, eine eigene App entwickeln zu lassen, genannt. Da dies aber teuer ist und sich nur dann lohnt, wenn Du einen Dienst anbietest, der viel Interaktion erfordert oder aus irgendeinem Grund auch an eine Offline-Nutzung denkst, werden wir an dieser Stelle nicht weiter darauf eingehen. Hinzu kommt, dass SEO Dir bei einer eigenen App nicht hilft, um vorwärts zu kommen und dass die Wahrscheinlichkeit nach wie vor hoch ist, dass Deine Seite vom Webbrowser aus aufgerufen werden wird. (Wenn Du dennoch mehr über die eigene Unternehmer-App wissen möchtest, klicke hier.)

Mobile Version der Seite oder responsive Webseite?
Wenn Du Dich für eine mobile Version Deiner Webseite entscheidest, hast Du am Ende im Grunde zwei unterschiedliche Seiten. Das macht natürlich doppelte Arbeit: Doppelte Programmierarbeit, doppelte Layout-Pflegearbeit. Andererseits kann die mobile Version passgenau auf die Bedürfnisse mobiler User zugeschnitten werden. Und da sie vom Datenvolumen her schlank ist, lädt sie schnell. Und wenn Du auf Deiner Seite für den Desktop-Gebrauch auf jeden Fall mit Flash-Animationen und Pop-ups arbeiten willst, dann kannst Du das tun, ohne zu befürchten, dass mobile Nutzer dir abspringen werden.
Mit einer responsive Webseite sparst du Zeit und Geld. Gleichzeitig kann es aber passieren, dass Deine Inhalte auf dem Smartphone-Schirm zu einer unendlich scrollbaren Säule werden. Das ist immer noch besser als seitlich scrollen zu müssen, aber die Aufmerksamkeitsspanne der Generation Smartphone ist so begrenzt wie ihre Zeit. Größere Navigationsmenüs und längere Ladezeiten können ebenfalls ein Nachteil sein. Ein Vorteil ist allerdings, dass der Nutzer bei einer guten responsiven Webseite unabhängig vom Gerät immer den Eindruck hat, dasselbe vor sich zu haben. Ein noch größerer Vorteil ist, dass Du nicht nur eine Seite für mobile Endgeräte optimierst, sondern dieselbe Seite auch für Suchmaschinen.

Aber ganz gleich, ob Du Dich für eine mobile oder eine responsive Webseite entschieden hast, diese 3 Tipps helfen Dir, zu einem für mobile Nutzer zufriedenstellenden Ergebnis zu gelangen:

1. Form follows function

Du solltest Deinem Entwickler im Vorfeld auf jeden Fall mitteilen, auf welche Funktionen es ankommt, damit er oder sie das Design entsprechend anpassen kann. Welche sind die am häufgsten genutzten Funktionen auf der Webseite? Auf die kommt es an.

2. Behalte den Überblick

Lass Dir Webanalysetools installieren. Du willst auf jeden Fall einen Überblick darüber haben, wer, wann, von wo aus auf Deine Seite zugreift, um diese weiter optimieren zu können und passenden Content online zu stellen.

3. Nach der Arbeit ist vor der Arbeit

Deine Webseite ist nicht fertig, wenn sie fertig ist. Dein Analysetool sagt Dir schließlich, wo noch Verbesserungsmöglichkeiten bestehen. Nach Möglichkeit hast Du daher einen Vertrag mit Deinem Entwickler geschlossen, der besagt, dass nach dem Start noch Verbesserungen vorgenommen werden.

Viele Wege führen nach

Foto: bigstockphoto.com

Zusammenfassend:

Wenn Deine Seite oder Dein Shop von allen Endgeräten aus abrufbar und dabei immer einfach zu bedienen ist, bist du fit für die mobile-first World. An einer für Mobilgeräte optimierten Webseite führt eigentlich kein Weg mehr vorbei. Es führen allerdings mehrere Wege dorthin: Selbst bauen, bauen lassen, mobile Version, responsive Version – die Wahl liegt bei Dir.

Bist Du einen dieser Wege schon gegangen? Hast Du noch Fragen oder Anmerkungen? Wir freuen uns immer über Feedback und Kommentare!