…Moment, erstmal zurück zum Anfang. Wie bereits in unserem Blogbeitrag „Schnell Erfolgreich Optimiert! Die SEO-Trends für 2018“ erwähnt, wird Google ab Juli 2018 das Ranking von mobilen Websites höher bewerten. Damit du mit dem dann geltenden „Mobile First Index“ nicht auf der Strecke bleibst, geben wir dir hier ein paar nützliche Tipps für das Design deiner mobilen Website.
Für jede Größe, die passende Lösung
Nach wie vor gibt es eine Vielzahl von Websites, die das Desktop-Layout nicht an die Bildschirmgröße von Smartphone & Co anpassen. Somit sind negative Folgen bereits vorprogrammiert. Zum einen müssen die Nutzer die Seiten mit Fingerbewegungen ständig zoomen, um an die nötigen Informationen zu gelangen. Schlecht für dich, denn deine Nutzer springen frühzeitig ab und verbringen nur noch ein Minimum an Zeit auf der Website.
Es ist bei weitem kein Problem unter Verwendung eines Content-Management-Systems ein responsive Layout zu nutzen. Dieses passt sich quasi von selbst an die Bildschirmgröße des jeweiligen Endgerätes an.
Tipp: Du solltest dich dennoch nicht nur auf zwei Displaygrößen konzentrieren. Denn immer mehr Endgeräte im Haushalt haben mittlerweile einen Internetanschluss. Auch wenn man hier nicht vom mobilen Surfen reden kann, solltest du deine Website dennoch auf mehreren Bildschirmgrößen testen.
Aber die richtige Bildschirmgröße ist noch kein Allheilmittel. Du solltest weitere Optimierungsmaßnahmen in die Wege leiten, um deinen Nutzer eine gute Usability zu ermöglichen.
Texte lesbar gestalten
Damit deine Inhalte auch auf den eher kleineren Smartphone-Bildschirmen lesbar bleiben, musst du den Fokus auf die Schriftart sowie deren Größe legen. Nutze für die mobilen Endgeräte am besten eine gut lesbare Schrift. Auch wenn an der ein oder anderen Stelle eine besondere Typografie einen gewissen Effekt erzeugt, sollte dies bei mobilen Geräten auf ein Minimum reduziert werden.
Kommen wir zum Punkt: Schriftgröße. Ab einer Größe von 16px garantierst du für deine Nutzer eine gute Lesbarkeit. Ohne Frage, diese Schriftgröße nimmt eine Menge Platz ein. Da sich deine Website-Inhalte hingegen auf das Wesentliche konzentrieren sollen, hebt sich dieser Effekt wieder auf.
Tipp: Sind deine Inhalte doch etwas fülliger geworden? Dann verwende doch einfach eine kurze Zusammenfassung am Ende des Beitrags. Denn besonders auf Smartphones macht das Lesen von langen Texten keinen großen Spaß.
Das 3-Gänge-Menü
Kommen wir zum wohl wichtigsten Punkt: Inhalte auf deiner Website schnell und einfach zu finden. Ja, auch bei der Menügestaltung gibt es ein paar Dinge zu beachten. Für eine gute Bedienung solltest du dein Menü so einfach wie möglich darstellen.
Dabei kommt es auf die richtige Anzahl der Unterpunkte an – so viel wie möglich, so wenig wie nötig. Für den letzten Feinschliff deines Menüs fehlen noch die passenden Touchelemente. Die richtige Größe macht den Meister – auf einfache Bedienung kommt es an. Denn nichts ist schlimmer als mit einem „Klick“ mehrere Menüpunkte zu wählen.
Es muss mal wieder schnell gehen? Im Menü findest du einfach nicht das passende Thema? Für diesen Fall ist der Einbau einer Suchfunktion eine gute Lösung. Hier kann der Nutzer schnell und unkompliziert seine Suchanfrage eingeben. Wie du diese gestaltest liegt ganz allein bei dir. Denk einfach aus der Perspektive des Nutzers – was, will er wie erreichen?!
Das Verhältnis von Größe und Qualität
Kennst du auch das Problem – in ländlichen Regionen ist das Internet … naja sagen wir bescheiden. Dies solltest du also als Hintergedanken immer im Kopf haben. Denn es dauert eine gefühlte Ewigkeit bis große Dateiformate geladen wurden.
Bearbeite also deine Bilder bevor du sie ins Content-Management-System hochlädst. Orientiere dich am besten gleich an dem zur Verfügung stehenden Platz im Content-Bereich. So kannst du deine Grafiken vorab anpassen. Ergebnis: Darstellung – EinsA+++.
Des Weiteren solltest du deine Dateigröße im Auge behalten. Empfohlen wird für ein normales Bild eine Dateigröße von 200 KB bei einer Größe von ca. 640 x 400 Pixel. Allerdings solltest du auf ein ausgewogenes Verhältnis von Dateigröße und Bildqualität achten.
Auf die Schnelligkeit kommt es an
Wie du deine Ladezeiten entsprechend optimieren kannst erfährst du in unserem Blogbeitrag zum Thema Usability.
Ein einfacher Weg wäre, gewisse Inhalte für die Darstellung auf mobilen Endgeräten zu deaktivieren bzw. nur auf Wunsch anzuzeigen (z. B. durch Klick auf einen Button). Allerdings solltest bei diesem Schritt vorsichtig sein und lieber dreimal überlegen, welche Inhalte hierfür in Frage kommen. Beispielsweise ist es eine Überlegung Wert etwaige Videos deiner Website für mobile Surfer auszuschließen, sofern diese nicht unbedingt erforderlich sind.
Du verwendest auf deiner Website zusätzliche Widgets oder Social-Media-Buttons, die auf externen JavaScripts basieren? Dann ist ein Blick auf diese Elemente auf jedenfall empfehlenswert. Denn sie können deine Ladezeit erheblich beeinträchtigen.
Resumee
So lieber Leser jetzt bis du an der Reihe, mit welchem Gerät würdest du nach bestimmten Informationen suchen?
Ist es Intention 1:
Du bist auf der Suche nach genaueren Details und möchtest mithilfe eines Simulators
deine neue Kücheneinrichtung testen? Dann ist ein Laptop die richtige Wahl.
Ist es doch Intention 2:
Du bist auf der Suche nach allgemeinen Informationen bzw. Produkten und möchtest einfach auf der Seite etwas stöbern? Dann ist ein Tablet eine gute Entscheidung.
Oder ist es Intention 3:
Du bist auf der Suche nach speziellen Informationen wie einer Adresse oder den Öffnungszeiten deines Lieblingsitalieners? Dann ist der schnelle Griff zum Smartphone der perfekte Weg.
Jetzt musst du dich entscheiden! Dementsprechend kannst du die Inhalte deiner Website anpassen.
Hier nochmal alles kurz und prägnant zusammengefasst:
- optimale Bildschirmgröße
- Texte kurz und knapp auf den Punkt bringen
- Menüstruktur für mobile Anwender optimieren
- Ausgewogenes Verhältnis zwischen Bildqualität und Dateigröße
- Ladezeit immer im Blick behalten
Wenn du diese Punkte beachtest, sehen deine Chancen für einen ✮ ✮ ✮ Award ✮ ✮ ✮ nicht schlecht aus.
