Webpräsenzen auch für mobile Geräte (Handy, Pda, Netbook etc.) entwerfen

Im Schatten nativer Apps findet die mobile Webseite noch relativ wenig Beachtung. Die zentrale Vermarktung über den jeweiligen App-Store scheint noch zu verlockend zu sein, als über eine wirtschaftlich sinnvollere mobile Webseite nachzudenken. So wird teilweise auch in sinnfreie Marketing-Apps investiert, anstatt das Geld in die Umsetzung mobiler Templates für die Webseite zu stecken. Dabei lassen sich mit HTML5, CSS3 und mobilen Javascript-Bibliotheken schon relativ günstig Webseiten entwickeln, die komfortabel auf dem mobilen Gerät genutzt werden können und auch auf allen Geräten funktionieren. Ob eine Investition in eine mobile Version der Webseite sich tatsächlich auch rechnet, sollte anhand der eigenen Zahlen überprüft werden:

* Wieviele Besucher nutzen mobile Geräte?
* Wieviele Besucher kaufen jetzt schon über mobile Geräte ohne optimierte Angebote?
* Wie sieht die Entwicklung der Nutzung von mobile Geräten aus?
* Ist mit dem aktuellen Stand der Webseite ein Kauf überhaupt möglich?
* Wie sind Konkurrenz-Shops im mobilen Markt aufgestellt?

Für den Einstieg in den mobilen Markt mit einer mobilen Webseite sollten Sie auf jeden Fall einige grundlegende Tipps beherzigen.

1. Behalten Sie Ihre Ziele im Auge

Behalten Sie stets im Auge, was das Ziel Ihrer Webseite ist. Egal ob Lead oder Bestellung, sorgen Sie dafür, dass das Ziel vom Nutzer schnell erkannt wird und ausgeführt werden kann. Behalten Sie auch im Auge, welche Funktionen Nutzer mobiler Geräte hauptsächlich in Anspruch nehmen.
Die Ziele im Auge zu behalten heißt im mobilen Web auch sekundäre Seiten einzusparen und nicht anzubieten, um den mobilen Auftritt zu entschlacken und übersichtlich zu halten. Um diese Seiten nicht ganz aus dem mobilen Web zu verbannen, sollte dem Nutzer immer die alternative Anzeige der eigentlichen Webseite angeboten werden. Im Onlineshop gilt, dass der Nutzer das gleiche Sortiment erschließen möchte, wie an seinem heimischen PC. Im Zuge der Entschlackung der Seite, sollte aber nicht vergessen werden, dass der Nutzer noch erkennen sollte, auf welcher Seite er sich befindet. Das Branding sollte also nicht vernachlässigt werden. Hertz hat das klare Ziel Autos zu vermieten. Dies ist auch die erste Funktion, die man bei der mobilen Webseite zur Verfügung hat.Hertz hat das klare Ziel Autos zu vermieten. Dies ist auch die erste Funktion, die man bei der mobilen Webseite zur Verfügung hat.

2. Liefern Sie mobil optimierte Inhalte aus

Bieten Sie nicht Inhalte der Webseite 1:1 für den mobilen Auftritt an. Sie können nicht davon ausgehen, dass immer ein Breitband-Anschluss zur Verfügung steht. Inhalte sollten somit nur wenige Kilobyte groß sein, so dass ein schnelles Laden der Seite garantiert ist.
Liefern Sie optimierte Bilder für mobile Geräte aus, sollten Sie nicht die verschiedenen Auflösungen der mobilen Geräte vergessen. Hilfreich kann hier der Einsatz einer Web Image Publishing Software sein, die nicht nur für den normalen Webshop automatisiert Bilder für die Vorschau, Detail- und Zoomansicht ausliefert, sondern auch entsprechend für die verschiedenen mobilen Geräte automatisch Bilder in der passenden Größe anlegt und ausliefert.

3. Passen Sie die Navigation Ihren Zielen an

Die Suche nimmt auf mobilen Geräten einen wichtigen Platz ein, da mobile Nutzer meistens mit einem konkreten Ziel die Webseite besuchen. Deshalb sollte diese natürlich prominent oben im sichtbaren Bereich angezeigt werden. Die Nutzer, die allerdings ohne Ziel einfach ein bisschen stöbern möchten, sollten natürlich auch bedient werden. Mega-Drop-Down und Fly-Out Menüs, wie sie von normalen Webseiten bekannt sind, funktionieren eher schlecht auf einem mobilen Gerät. Um das Navigieren übersichtlich zu halten kommen hier zum Beispiel Collapsibles zum Einsatz oder bei Seitenwechsel sollte immer die Bradcrumb-Navigation mitgeführt werden, damit der Nutzer weiß, wo er sich befindet und die Möglichkeit hat, schnell wieder zurückzugehen.
Amazon bietet für die Hauptmenüs Collapsibles an um direkt zu einer Unterkategorie zu springen. Otto bietet eine ausklappbare Breadcrumb-Navigation. Je nach Inhalt der Seite sollte auch überlegt werden, wo die Navigation platziert sein sollte. In einem Shop ist es eher interessant schnell die Suche und Kategorien zu erreichen. Deshalb sollten diese hier oben platziert werden. Bei einem Blog hingegen sind für den Nutzer die wechselnden Inhalte interessant. Hier sollte die Navigation entweder oben in einem Drop-Down Feld untergebracht werden oder am Ende der Seite platziert werden.
Die Navigation ist beschränkt relativ klein in einem Drop-Down dargestellt. Interessant sind die wechselnden Inhalte.Die Navigation ist beschränkt relativ klein in einem Drop-Down dargestellt. Interessant sind die wechselnden Inhalte.In einem Shop kann es auch hilfreich für den Nutzer sein, die vorher angeschauten Produkte am Ende der Seite noch mal aufzulisten, damit der Nutzer einen schnellen Zugriff auf die bisher angesehenen Produkte erlangt.

4. Optimieren Sie Formulare auf die Bedürfnisse ihrer mobilen Nutzer

Formulare sind ein echter Konversionskiller auf mobilen Webseiten. Die Tastaturbedienung auf mobilen Geräten hat noch lange nicht den Komfort von richtigen Tastaturen erreicht. Eine wichtige Faustregel ist es also Texteingabefelder zu vermeiden. Das heißt natürlich einerseits nur das Nötigste in einem Formular abzufragen und insoweit die Möglichkeit besteht Eingabefelder durch zum Beispiel Drop-Downs zu ersetzen. Außerdem können Sie mit HTML5 schon Felder konkrete Bezeichnung geben, so dass direkt passende Tastaturlayouts angezeigt werden. Geben Sie zum Beispiel einem Formularfeld den Typ “E-Mail” (<input type=”email”>), so öffnet sich direkt das Tastaturlayout für E-Mails mit @-Zeichen und “.com”-Endung. Andere Usability-Richtlinien von der normalen Webseite sollten natürlich nicht vernachlässigt werden. Ist zum Beispiel ein Checkout-Prozess in mehrere Schritte aufgeteilt, so ist es notwendig dem Nutzer zu zeigen, wo er sich befindet und die folgenden Schritte aufzuzeigen.
Passendes Tastaturlayout zum Eingabefeld für eine E-Mail Adresse.

5. Seien Sie auf Abbrüche und Unterbrechungen vorbereitet

Gerade bei der Nutzung unterwegs, kann der Nutzer schnell mal unterbrochen werden, gerade keine Zeit oder Lust haben sich weiter mit der Seite zu beschäftigen. Seien Sie darauf vorbereitet und bieten Sie die Möglichkeit den aktuellen Stand (zum Beispiel Produkt oder ganzer Warenkorb) zu speichern. Auch die Möglichkeit schnell die aktuelle Seite per E-Mail verschicken zu können, kann hilfreich sein, dem Nutzer eine schnelle Möglichkeit zu geben, später wieder einzusteigen.
Extra-Tipp: Nutzen Sie den Kontext und die mobilen Möglichkeiten. Der Vorteil von mobilen Webseiten ist klar, dass sie auch außerhalb der eigenen vier Wände benutzt werden. Greifen Sie den Kontext auf und nutzen Sie die Möglichkeiten der mobilen Geräte. Zeigen Sie zum Beispiel dem Nutzer das Ladengeschäft in seiner Umgebung und unterstützen so auch die anderen Verkaufskanäle.
Bei der mobilen Webseite von Gelbe Seiten kann der aktuelle Ort für eine Suche verwendet werden. Auch leichte Bedienelemente der mobilen Geräte lassen sich mit Hilfe von Javascript auf Webseiten abbilden. Lassen Sie zum Beispiel für eine bessere User Experience den Nutzer die Produktbilder mit einem Fingerwisch wechseln.

Fazit

Mobile Webseiten können schon nahezu die Funktionalitäten von nativen Apps abbilden und sind dabei für alle Geräte kompatibel. Wirtschaftlich bedeutet das einen klaren Vorteil gegenüber Apps, da hier entweder hohe Kosten für Entwicklungen für mehrere Plattformen entstehen oder man sich auf eine Plattform beschrenken muss.
Es gibt allerdings auch neue Hürden, die man vorher auf der normalen Webseite noch nicht hatte. Die hauptsächlichen Hürden die hier im Auge behalten werden sollten sind die Displaygröße, die Internetgeschwindigkeit und die Bedienung durch Touchscreens.
Behält man diese Hindernisse fest im Blick steht einem erfolgreichen mobilen Internetauftritt nichts im Wege.

Hier eine valide mobile Website als Vorlage (Seite öffnen - Datei - speichern)