Ist deine eigene Webseite wirklich mobile optimiert? Bist Du sicher oder hast du nur eine vereinfachte mobile Version deiner Hauptseite erstellt?
Was meine ich überhaupt mit "optimiert für mobile Endgeräte"?
Nun zum Einem sollte man sich im Klaren sein, dass Smartphones völlig unterschiedliche Technologien bzw. Funktionen im Gegensatz zu einem Desktop besitzen. In der Regel wird die Bedienung der Webseite durch Touch und die zugehörigen Handbewegungen ausgeführt somit sollten die Buttons und Navigationspunkte dies unbedingt berücksichtigen. Als weiteres Kriterium müssen Ort und Dauer der unterschiedlichen Nutzung (das Verhalten) ebenfalls in Betracht gezogen werden. Die meisten Mobilen User sind wie der Name schon vermuten lässt mobil, also unterwegs und machen Dinge simultan.
GRUNDREGELN IM MOBILEN WEBDESIGN
1. Der Nutzungskontext ist es also, worauf Du Dich zunächst konzentrieren solltest. Wichtig ist, dass Dein Design mobil Sinn macht und seine Funktionen an die Bedürfnisse der mobilen Nutzer angepasst sind. Überlege Dir bereits im Vorfeld was dem mobilen Nutzer am wichtigsten wäre und wie kann er das Gewünschte mit so wenig Klicks wie möglich erreichen.
2. Klares, übersichtliches und sauberes Design überzeugt am schnellsten. Es ist also essentiell, die Inhalte mobiler Seiten auf das Nötigste zu kürzen. Ein Information Overload rächt sich mobil stärker (etwa durch geringere Konversion) als an großen Bildschirmen. Die meisten User, die deine Webseite auf einem Smartphone aufrufen machen dies zusätzlich zu einer anderen Tätigkeit. Zum Beispiel sitzen sie im Bus oder vor dem Fernseher und verfolgen den Inhalt somit nicht mit 100% Konzentration. Du solltest deine mobile Webseite so gestalten, dass nur die elementar wichtigen Dinge klar und deutlich zu erkennen sind und so wenig Ablenkung wie möglich um diese Inhalte herum verfassen.
3. Mittlerweile gibt es kein Entrinnen von den Touchscreens, jedes Smartphone besitzt einen und Du solltest Dir unbedingt Gedanken darüber machen wie dies deine mobile Webseite in Ihrer Funktion beeinträchtigt. Nichts ist für Smartphone-Nutzer frustrierender als zu klein geratene Schaltflächen, beziehungsweise Navigationselemente, seien es Buttons, Links oder Menü-Kategorien, die sich mit dem Daumen (oder anderen Fingern) nicht präzise anklicken lassen. Bedenke ebenfalls, dass die meisten Elemente mit dem Daumen bedient werden und dieser naturgemäß etwas größere Auflagefläche hat. Zusätzlich zu dieser haptischen Betrachtungsweise solltest Du dir auch überlegen und testen wie deine Webseite in den unterschlichen Positionen aussieht.
4. Gestallte deine mobile Webseite in nur einer Spalte. Die Bildschirme der Smartphones sind zwar im Laufe der Zeit größer geworden, sie sind jedoch weiterhin schmal und leider sehe ich immer noch zu oft Texte in 2 Spalten, was dazu führt, dass sich die Schriftart automatisch verkleinert und somit auf den ersten Blick nicht lesbar ist und man mit zwei Fingern in den Schirm reinzoomen muss. Klares ein Spalten Design führt zu flüssigem Scrollen durch den Inhalt und sollte immer ausgewählt werden.
5. Wir Alle verbringen unglaublich viel Zeit auf unserem Smartphone und nutzen das Gerät als eigene Verbindung zu der Welt aka Soziale Medien wie WhatsApp, Instagram etc. Die Inhalte auf deiner mobilen Webseite sollten so ausgelegt werden, dass sie einfach zum teilen sind (kostenlose Werbung) aber auch die Kontaktmöglichkeiten durch deine sozialen Medienkanäle mit integriert sind und du somit ein besseres Engagement hervorrufen kannst.
6. Mikroanimationen deiner CTA können dir ungeheuer mit der Konversion insbesondere auf der mobilen Webseite helfen. Da naturgemäß die Ladezeit deiner Webseite eine enorm wichtige Rolle spielt und diese wiederum von vielen (auch externen) Faktoren (wie zum Beispiel Empfangsqualität und genutzte Technologie etc.) abhängig ist, helfen solche animierte CTA Buttons den Besuchern zu verstehen, "da tut sich etwas".
7. Erstelle eine mobile Aktionsleiste, die mit nur einem Klick erreich bar ist, diese ist im Gegensatz zu deinem mobilen Menü jederzeit sichtbar und sollte Aktionen wie direkte Kontaktmöglichkeiten beinhalten. Deine User können durch einfaches draufklicken direkt ins das gewünschte Kommunikationstool (WhatsApp, FB Messanger oder Telefon) gelangen und so mit Dir schnell und unkompliziert in Kontakt treten können.
8. Integriere eine "zurück zum Top" Funktion ein. Ich selbst finde es furchtbar frustrierend auf endlos langen Seiten zum gewünschten Inhalt zu scrollen und falls ich weiter zur nächsten Seite gehen möchten (oder ich auf der Suche nach etwas völlig anderen) muss ich mühsam wieder ganz zum Top scrollen, damit ich das Menü anwählen kann. Ein nach oben Button ist hier Gold wert und erleichtert deinen Besucher schnell das Gewünschte zu finden und gibt ihm die Möglichkeit sich weiter auf deiner Webseite aufzuhalten, da es ihm einfach gemacht wird von A nach B zu gelangen.
9. Sprechen wir mal über die Schriftgröße. Vielleicht sprechen wir an dieser Stelle nicht nur über die Schriftgröße, sondern auch der Auswahl einer passenden Schriftart (Ladezeit und Schriftlesbarkeit). Optimale Schriftgröße für mobile Bildschirme ist 16 px (plus minus) je nachdem welche Schriftart du ausgewählt hat. Bitte beachte auch, dass deine Texte nicht nur auf kleineren Bildschirmen gelesen werden, sondern auch im sehr hellen Tageslicht oder in der Dunkelheit und sollen somit einen klaren Kontrast zu dem Hintergrund haben und deutlich lesbar sein. Wähle eine nicht zu helle Farbe für deine Fließtexte aus und es empfiehlt sich für eine geradlinige Schriftart zu entscheiden.
10. Videos und Animation sowie sehr viel Bildmaterial sollten gut überlegt sein. Da mittlerweile unglaublich viele mobile Flatrates haben ist dies nicht mehr der wichtigste Punk einer mobilen Optimierung muss jedoch weiterhin in Betracht gezogen werden. Videos und andere optische Gimmicks müssen vom Server runtergeladen werden und dies kostet nicht nur Zeit sondern auch deinen Nutzer ein bestimmtes Datenvolumen.
FAZIT:
1. Denke an deinen Webseitenbesucher und seine Bedürfnisse und passe dein Design dementsprechend an
2. Klares simples Design überzeugt jederzeit
3. Optimiere für Touchscreens
4. kein 2 Spaltendesign
5. Optimiere und animiere deine Webseiteninhalt für Teilen und kommentieren auf den Sozialen Medien
6. Interaktive Buttons
7. mobile Aktionsleiste mit der man sehr einfach in Kontakt treten kann
8. nach oben Funktion
9. optimale Schriftgröße
10. weniger Bilder und Animationen
Comments