Bei der steigenden Zahl von Nutzern von mobilen Endgeräten wie Smartphones oder Tablets wird es immer wichtiger, klassische Websites dem mobilen Design anzupassen. Webseiten, die auf stationären Rechnern oder Laptops einwandfrei laufen, sind auf Geräten mit kleineren Displays oft nicht mehr attraktiv für die Nutzer.

Ein Beispiel: Wenn jemand auf der Suche nach einem italienischen Restaurant in der Nähe ist, möchte derjenige schnell konkrete Daten auf seinem Smartphone haben und sofort wissen, wo sich die nächste Gaststätte befindet. Stößt der Nutzer auf eine nicht für den mobilen Gebrauch optimierte Seite, wird er diese sofort wieder verlassen. Er wird nicht den gesamten Inhalt der eigentlichen Webseite auf seinem Handy durchforsten, um an die relevanten Informationen zu kommen. Der Nutzer geht dann gegebenenfalls hungrig weiter und das Restaurant hat einen Besucher, den potenziellen Kunden, verloren.

Das muss aber nicht passieren. In diesem Beitrag werden wir Ihnen grundlegende Tipps geben, worauf Sie bei einer mobilen Website achten müssen.

1. Bevor es losgeht: Vorüberlegungen

Bevor Sie mit der Konzeption und dem Bau der mobilen Seite beginnen, müssen Sie sich, wie auch bei einer klassischen Website, unter anderen folgende Fragen stellen:

Benutzen meine Besucher und potenziellen Kunden mobile Endgeräte?
Wollen meine Nutzer eine mobile Webseite? Welche Funktionen brauchen sie?
Habe ich schon Nutzer, die über Handys und Tablets bei mir kaufen, obwohl ich keine optimierte mobile Seite habe?
Würde eine mobile Webseite die Konversion erhöhen?
Wie sieht es mit der Konkurrenz aus? Nutzen Konkurrenten mobile Webseiten mit Erfolg?

2. Setzen Sie Ziele

Sind die Vorüberlegungen abgeschlossen, müssen Sie zunächst Ihre allgemeine Zielgruppe identifizieren. Im besten Fall haben Sie das schon gemacht, bevor Sie Ihre eigentliche Website angelegt haben. Was möchten Ihre Besucher auf der mobilen Seite? Welche Funktionen müssen Ihnen angeboten werden, welche sind überflüssig?

Beachten Sie auch, dass die mobilen Endgeräte verschiedene Voraussetzungen bei Displaygröße, Ladegeschwindigkeit und Bedienung (Touchscreen oder Tastatur) haben. Wegen dieser Unterschiede ist es (manchmal) gut, mehrere Versionen zu erstellen. Ein Beispiel dafür ist Facebook. Das soziale Netzwerk bietet mittlerweile drei Versionen an: eine Hauptseite (m.facebook.com), eine optimierte für Touchscreens (touch.facebook.com) und eine optimierte für Länder mit langsamer Downloadgeschwindigkeit ( 0.facebook.com).

3. Inhalte optimieren

Wie in der Einführung geschildert, kann die klassische Webpräsenz nicht eins zu eins auf die mobile übertragen werden, ohne dass es Probleme bei der Darstellung gibt. Reduzieren Sie Ihre Inhalte auf das Wesentliche und machen Sie sie übersichtlich, zum Beispiel:

Lassen Sie unnötige Links weg
Entfernen Sie sekundäre Inhalte
Erstellen Sie spezielle Inhalte für Smartphone- und Tabletansicht
Optimieren Sie die verwendeten Bilder (insbesondere bei Webshops)

4. Layout optimieren

Nicht nur der Inhalt muss sich anpassen, sondern auch das Layout. Komplexe, mehrspaltige Seiten sollten auf eine Spalte reduziert werden, um den schnellen Überblick zu gewährleisten. Die Seiten sollten sich nach Aufruf automatisch an die Displaygröße des genutzten Gerätes anpassen und auch „zoombar“ sein.

5. Navigation

Nutzer, die Webseiten unterwegs aufrufen, haben meist ein konkretes Ziel oder eine konkrete Frage. Deswegen ist es unabdingbar, eine einfache und übersichtliche Suche durch die Navigation anzubieten. Die Navigation sollte an einem prominenten, gewohnten Platz zu finden sein, beispielsweise oben Links. Allgemein empfehlen wir, zusammenklappbare oder Breadcrump-Navigationen auf der mobilen Seite zu integrieren. Bei Online-Shops kann man beispielsweise an Ende der Seiten die zuvor angesehenen Produkte nochmals anzeigen. Bei Blogs können Sie Ihre Leser unter dem Artikel zu verwandten Beiträgen führen.

6. Formulare optimieren

Die Eingabe auf Smartphones und Tablet ist umständlicher für die Verbraucher, kann sie schnell überfordern und zum Abbruch der Aktion führen. Wenn Sie auf Ihrer mobilen Webseite Formulare integrieren, müssen Sie deswegen Einiges beachten und die Usability anpassen:

Fragen Sie Ihre Nutzer nur das Nötigste
Ersetzen Sie Eingabefelder durch Drop-Down-Menüs
Geben Sie Feldern konkrete Bezeichnungen (HTML5), damit passende Tastaturlayouts angezeigt werden (zum Beispiel bei Eingabe der E-Mail Adresse (@-Zeichen, .de oder .com im Tastaturfeld))
Zeigen Sie den Checkout-Prozess in der Navigation an
Zeigen Sie dem Nutzer durch “Branding” bzw. Benennung der Seite, wo er sich befindet

7. Wiedereinstieg

Bieten Sie Ihren Besuchern an, Daten, den Warenkorb oder Informationen zwischen zu speichern, damit sie später dort weiter machen können, wo sie zuvor aufgehört haben. Eine Alternative: Verbraucher können Seiten an ihre E-Mail Adresse senden. Das ist besonders dann wichtig, wenn kein schnelles Internet zur Verfügung steht.

8. Integrierte Funktionalität

Mobil heißt unterwegs. Das Beispiel am Anfang des Textes zeigte, wie man es am besten nicht macht. Hätte die Gaststätte um die Ecke eine für die mobile Nutzung optimierte Internetseite, hätte ihn der hungrige Passant mit ein paar Schritten leicht finden können. Für eine erfolgreiche Suche sind folgende Verknüpfungen anstelle von Links hilfreich:

Größere Buttons steigern die Treffsicherheit
Erstellen Sie klickbare Telefon-Links, damit Besucher Sie auf Knopfdruck anrufen können
Erstellen Sie einen klickbare Adresslink, der das jeweilige Kartenprogramm (z.B. Google Maps) des mobilen Gerätes öffnet
Integrieren Sie Quick Response (QR)-Codes, die eine direkte Verbindung zu Downloads, Apps und Zusatzinformationen herstellen

Zusammenfassung

Eine mobile Website kann zu einer Herausforderung werden, weil die genutzten Endgeräte sich in Displaygröße, Ladegeschwindigkeit und Bedienung unterscheiden. Wenn Sie aber folgende Aspekte berücksichtigen, kann sie erfolgreich werden und Ihren Benutzern helfen – egal, wo sie sich aufhalten:

Reduzieren und optimieren Sie Ihre Inhalte (Texte, Bilder, Links)
Vereinfachen Sie Ihr Design (bspw. einspaltiges Layout)
Erstellen Sie eine übersichtliche, klare Navigation
Zeigen Sie dem Besucher, wo er sich befindet
Erstellen Sie speziell angepasste mobile Versionen
Integrieren Sie nützliche Funktionen (Inbuilt Functionality)

Wenn diese Funktionen optimiert sind, können Nutzer ganz einfach alle wichtigen Informationen unterwegs aufrufen. Somit erhöht sich auch die Zahl Ihrer Besucher und am Ende auch die der Kunden. Mobile Webseiten sind, im Gegensatz zu Apps, auf allen Geräten kompatibel und vertragen sich mit jedem Betriebssystem. Sie brauchen beispielsweise keine unterschiedlichen Versionen für Geräte mit Android- oder IOS-System. Zusätzlich haben Sie die Möglichkeit, schnell mit Ihren Besuchern in Verbindung zu treten.