Mobile Websites: 5 grundlegende Tipps für den Einstieg

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.

Amazon bietet für die Hauptmenüs Collapsibles an um direkt zu einer Unterkategorie zu springen.


Otto bietet eine ausklappbare Breadcrumb-Navigation.

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.

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.

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 beschränken 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.
Ich wünsche viel Spaß beim Optimieren und verpassen Sie nicht den 2. Teil der Serie mit dem Schwerpunkt auf Onlineshops und dem 3. Teil mit technischen Erläuterungen zum Thema mobile Webseiten.

Weiterführende Links:

Mobile: Die Königsfrage – Native App oder Mobile Website? | t3n
7 usability guidelines for websites on mobile devices | Webcredible
Mobile Web Design: 10 Tips To Better Usability | hongkiat.com
Mobile | Amy Africa's Qlog

  • Teilen
  • Send to Kindle
  • http://kKrft.ly/QOF
Manuel Ressel Manuel Ressel ist Head of UX Design bei der Web Arts AG. Seine Leidenschaft gilt dem Thema der Emotionalisierung von Kauf-Prozessen in E-Commerce-Portalen. Manuel Ressel ist unentwegt auf der Suche nach einzigartigen Shop-Perlen und neuen Design Trends im E-Commerce und sammelt diese in dem E-Commerce Showcase conversiondesign.de. Folgen Sie ihm auf Twitter, Google+ oder Facebook.

Frage zum Artikel? Fragen Sie den Autor!


Please leave this field empty.

, , , ,

19 Reaktionen auf  “Mobile Websites: 5 grundlegende Tipps für den Einstieg”

Kommentare

  1. Christian Rothe Christian Rothe

    Vielen Dank für diese nützlichen Tipps. Ich denke, dass für „normale“ Shopbetreiber aus dem Mittelstand Mobile Websites viel wichtiger sind als spezielle Shopping-Apps. Welcher Käuferr lädt sich schon die 17. Shopping-App eines kleineren Unternehmens runter, wenn er schon 16 Einkaufs-Apps der großen Spieler (Amazon, Otto, eBay etc.) auf dem Telefon hat? Und vor allem, warum sollte sich der Käufer eine spezielle Apps runterladen, wenn er nur selten oder unregelmäßig dort kauft?

    Deshalb lohnt sich aus meiner Sicht die Optimierung der Website für Mobilgeräte. Damit kann man sich sicherlich weitere Kunden erschließen bzw. das Abwandern bestehender Kunden unterbinden.

    Für besonders interessant halte ich übrigens die Optimierung eines Shop für die Tablett-PCs (iPad, Galaxy Tab & Co.). Die Tablett-PCs verbreiten sich rasend schnell in den Privathaushalten und ersetzen vielfach den „normalen“ PC / Laptop als Plattform fürs Websurfen und Online-Shopping. In unserem Shop verzeichnen wir schon etliche Einkäufe übers iPad.

    Für Shopbetreiber bedeutet dies auch Neuland: Hier steht dem Nutzer quasi eine normale Bildschirmauflösung eines „erwachsenen“ Computers zur Verfügung, so dass er die „normalen“ Website präsentiert bekommen kann. Allerdings surft der Nutzer mit der Touchscreen-Oberfläche eines Handys. Deshalb sollte das Bedienkonzept eines Shops auf jeden Fall Touchscreen-optimiert sind: Dies bedeutet beispielsweise ausreichende Abstände zwischen Navigationspunkten, große Schaltflächen und Buttons, die auch von Grobmotorikern beim „Klicken“ leicht getroffen werden können.

  2. Manuel Ressel Manuel Ressel

    Hallo Herr Rothe,

    Tablett-PCs sind mit Sicherheit auch interessant. Minimalstufe sollte hier natürlich sein, dass man alle Funktionen des Shops gewohnt nutzen kann. Als fortgeschrittenere Optimierungen kann man hier natürlich dann auch native Funktionalitäten des Geräts auf den Shop übertragen.
    Allerdings ist das Optimierungspotential bei Smartphones wesentlich höher, da man eine wesentlich kleinere Bildschirmgröße zur Verfügung hat und von daher das normale Shoptemplate keine wirklich gute Alternative bietet.

  3. Christian Rothe Christian Rothe

    Hallo Herr Ressel, ich stimme zu, dass das technische Optimierungspotenzial bei Smartphones höher ist.

    Als Shopbetreiber setze ich jedoch die wirtschaftliche Brille auf: Über Bestellungen via Tablett-PCs fließt mehr Umsatz als via Smartphone. Deshalb setze ich den Optimierungsschwerpunkt bei Tablett-PCs.

    Aus meiner Sicht wachsen Tablett-PC und Smartphone ohnehin zusammen: Beispielweise haben iPhone4, HTC Desire, Samsung Galaxy & Co. so große Bildschirme und eine so hohe Auflösung, dass man auch normale Webseiten ohne Zoomen lesen kann. Da stellt sich schon die Frage, ob es da noch eine Mobile Website braucht?

    Als Spiegel Online neulich seine neue Mobil-Seite gelauncht hatte, wurden alle Smartphone-User von der Standard-WWW-Seite zur Mobilseite zwangsweitergeleitet. Dies löste unter den Nutzern einen Protest-Sturm aus.

  4. Matthias Henrici Matthias Henrici

    @Christian Rothe. Diese Zwangsweiterleitungen halte ich auch für problematisch weil es den Usern das Gefühl von „weniger“ Leistung und auch Kontroll-Verlust gibt. Auch wenn dahinter eigentlich die „gute“ Absicht des Betreibers steht, die Flaschenhalsproblematik in den Griff zu bekommen. Die volle Kontrolle behalten zu dürfen, scheint den Usern wichtiger zu sein, als die volle Gebrauchstauglichkeit. Ganz unverständlich ist es, dass einige Betreiber nach der Zwangsumleitung auch noch Geld verlangen (Bild-Zeitung) aber nur für den mobilen Service

  5. Manuel Ressel Manuel Ressel

    @Christian Rothe
    Die wirtschaftliche Brille habe ich auch immer auf. 😉 Welche Investition sich rentiert, muss jeder Shopbetreiber anhand seiner eigenen Zahlen entscheiden. Bei Ihnen rentiert sich die Optimierung für Tabletts eher und bei anderen Shops die Optimierung für Smartphones. Wobei die Aussage alleine, dass mehr Umsatz über Tabletts fließt eigentlich noch nicht ausreicht, um festlegen zu können, was sich eher rentiert. Wie sehen zum Beispiel Besucherzahlen und -abbrüche aus?

    Die Auflösungen bei Smartphone wird zwar immer höher, was aber nicht heißt, dass ich die Shops deshalb bedienen kann ohne den Zoom nutzen zu müssen. Und genau das ist das Hinderniss. Wenn ich zum Beispiel den Esprit-Shop auf dem iPhone4 öffne, kann ich zwar alles lesen, aber mich im Shop bewegen kann ich ohne rein- und rauszoomen nicht. Das ist mit der Zeit einfach nur nervig.

    Die Zwangsweiterleitung ist in der Hinsicht ein Problem, wenn der Nutzer nicht mehr die Inhalte vorfindet, die er von der normalen Seite kennt und nutzt. Bei einem Newsportal wie Spiegel werden für die mobile Seite einige Zwischenelemente einfach wegrationalisiert oder umpositioniert. Da ist es verständlich, dass Leute das Gefühl haben, sie verlieren die Kontrolle. Wenn man allerdings nach wie vor einen kompletten Onlineshop über eine optimierte Darstellung erschließen kann, ist das doch eher positiv. Wichtig ist auf jeden Fall im Footer immer die Möglichkeit zu bieten, die normale Webseite anzeigen zu lassen (macht Spiegel nicht).

  6. Andrea Anderheggen Andrea Anderheggen

    Hallo, danke für diesen Artikel.

    Ich möchte bei dieser Gelegenheit auf mein Unternehmen Shopgate (www.shopgate.com) aufmerksam machen. Wir haben uns darauf spezialisiert, Online-Shops eine schnelle, einfache und vor allem günstige Möglichkeit zu bieten, eine eigene mobile Webseite, sowie Native Apps für iPhone, iPad, Android und Windows Phone zu veröffentlichen.

    Unsere weitergehende Vision besteht darin, die mobile Dimension voll auszuschöpfen. Und das heisst für uns: jede Werbefläche, jeden Kundenkontakt über QR-Codes oder Bilderkennung mit einem mobilen Verkaufsterminal zu verbinden.

    Was ich damit meine, seht ihr hier:
    http://www.shopgate.com/de/about

    Wir haben nach 8 Monaten bereits über 200 Händler, die unsere Lösung einsetzen.

    Natürlich suchen wir nach weiteren Online-Shops, Internet- und Marketing-Agenturen, die mit uns zusammenarbeiten möchten. –

    Viele Grüsse,
    Andrea Anderheggen
    CEO

  7. Jeannette Riner Jeannette Riner

    Ihre und unsere Kunden werden in Zukunft mehr und mehr das Internet mobil nutzen und bequem Einkäufe, Online Banking und andere Geschäfte von unterwegs aus tätigen.

  8. Schlüsseldienst Aachen Schlüsseldienst Aachen

    Vielen dank für diesen Artikel der mir echt weitergeholfen hat.

  9. Mobile Website Mobile Website

    Mobilen Websites und Web Apps gehört die Zukunft. Dank HTML5 wird es nicht mehr lange daueren, bis tatsächlich alle nativen Funktionen auch per HTML abgebildet werden können!

  10. Mina Mina

    Meine Frage wäre:
    Gibt es kostenfreien Speicherplatz für Moblie Websites?
    Kennt jemand Adressen?

    Mina

  11. Alex Corba Alex Corba

    Wie sieht es mit Duplicated Content aus? Ist es nicht so, dass die Mobile Webseite die gleichen Inhalte wie die eigentliche Webseite bereitsstellt und von Google als Duplicated Content angesehen wird. Das könnte sich auf das Ranking negativ auswirken.

  12. Manuel Ressel Manuel Ressel

    Hallo Alex,

    Google hat für mobile Seiten Richtlinien herausgegeben, wie diese das Ranking nicht negativ beeinflussen.
    Der Favorit ist Responsive web design, also gleiche Inhalte optisch je nach Ausgabegerät angepasst.
    Aber google bietet auch Lösungen für unterschiedlichen Content bei gleicher Domain und unterschiedlicher Inhalt über separate Domain.

    Hier der Link: https://developers.google.com/webmasters/smartphone-sites/details

  13. Dirk Dirk

    Interessantes Thema. Wir stellen auch sämtliche Seiten auf Mobilität um, da sich deren Kosten-/Nutzenfaktor einfach rechnet, anstatt mehrere Apps zu programmieren, die dann ohnehin nicht auf jedem Smartphone laufen.

  14. Alex Alex

    Super Artikel – Ich denke, dass die Entscheidung ob „mobile Webseite oder nicht“ aufgrund von Zahlen entschieden werden sollte. Analytics und auch andere Tracking-Tools liefern ja eigentlich heute schon die Antwort. Ich habe hier nochmal ein spanndenden Artikel, der zeigt wie mobile Marketing funktionieren kann:

    http://blog.mandarin-medien.de/tipps-tricks/mobile-website-pflicht-oder-kuer

Trackbacks/Pingbacks

  1. […] Fünf grundlegende Tipps für die Gestaltung mobiler Websites gibt Conversion Designer Manuel Ressel. Wichtig ist dabei u.a., auf Verbindungsabbrüche gut vorbereitet zu sein, die Navigationsstruktur auf die eigene Bedürfnisse anzupassen und mobil optimierte Formulare anzubieten. konversionskraft.de […]

  2. […] Update 2011: Hier sind einige (forgeschrittenere) Tips für Mobile Webseiten. […]

  3. […] in eine mobile Version der Webseite und wenn ja, welche grundlegenden Tipps sollten Sie beachten? Mobile Websites: 5 grundlegende Tipps für den Einstieg Via: […]

  4. […] steht dem Informieren mit mobilen Endgeräten laut einer Studie des ECC Handel in Zusammenarbeit mit PayPal und Shopgate noch ein […]

Hinterlassen Sie einen Kommentar