Die Maßgabe Mobile First halten schon länger viele für sehr wichtig, denn immer mehr Nutzer greifen über Smartphones auf Websites zu. Ein gutes Mobile Design ist deshalb unerlässlich.
Doch reicht es ein responsives Layout für die eigene Website zu nutzen? Nein, denn es gibt viele weitere Layout-Details, die man beachten und optimieren sollte.
Im Folgenden liste ich deshalb 5 Tipps für das Mobile Design von Websites auf.
5 Tipps für das Mobile Design von Websites
Es gibt immer noch eine Menge Websites, die das Desktop-Layout nicht an den Bildschirm von Smartphones anpassen. Das ist natürlich schlecht, da viele Nutzer deshalb abspringen bzw. nicht so viel Zeit auf der Website verbringen, wie sie es bei einem mobilen Layout täten. Das kostet diesen Website-Betreibern bares Geld.
Ein responsive Layout zu nutzen, welches sich automatisch an den Ausgabe-Bildschirm anpasst, ist heute kein Problem mehr, zumindest wenn man ein weit verbreitetes Content Management System wie WordPress nutzt.
Doch das reicht nicht, um ein optimales Mobile Design zu haben. Stattdessen gilt es weitere Optimierungen vorzunehmen, um den eigenen Lesern ein optimales Nutzungserlebnis zu bieten.
Die folgenden 5 Tipps helfen dabei, die eigene Website noch besser mobil nutzbar zu machen.
- Text lesbar machen
Der Bildschirm von Smartphones ist sehr klein, auch wenn es da einige Unterschiede gibt. Man darf aber nicht davon ausgehen, dass jeder ein großes Display hat. Deshalb ist es wichtig die Schriftart und -größe der mobilen Ansicht anzupassen.
Die Schriftart sollte möglichst leicht lesbar und ohne Schnörkel sein. Das gilt zwar an sich auch schon für die Desktop-Version, aber während da noch die eine oder andere typografische Spielerei sinnvoll sein kann, sollte man beim Mobile Design ganz darauf verzichten. Hier ist die Lesbarkeit noch wichtiger.
Zudem sollte die Schriftgröße mindestens 16px betragen, um auf den kleinen Bildschirm gut lesbar zu sein.
Und nicht zuletzt sollte man die eigenen Inhalte kurz halten oder zumindest am Anfang in einer Zusammenfassung die wichtigsten Infos bieten. Gerade auf dem Smartphone lesen die Besucher nicht gern ewig lange Texte. Deshalb sollte man ihnen das Wichtigste auch in Kurzform präsentieren.
- Mobiles Menü
Der Platz auf dem Smartphone ist sehr begrenzt, weshalb man gerade beim Menü sehr darauf achten muss, wie man es präsentiert.Aus Usability-Sicht sollte man dabei bedenken, dass die User in der Regel den rechten Daumen nutzen, um die Website zu bedienen. Deshalb sollte das Menü, wenn technisch möglich, rechts oben erreichbar sein. Aber auch andere Navigations-Elemente sollte auf diese Weise zugreifbar sein.
Zudem solltet ihr bei der Auswahl der Menüpunkte darauf aufpassen, es nicht zu übertreiben. Menüs mit 20 Unterpunkten schrecken eher ab, als dass sie eine gute Nutzung der Website bieten. Zudem sollte man auf jeden Fall eine Suchfunktion anbieten.
- Bilder optimieren
Leider ist Deutschland beim mobilen Internet noch ein Entwicklungsland. Sowohl die Geschwindigkeit, als auch die Traffic-Kontingente sind meist recht eingeschränkt, so dass man das eigene Mobile Design nicht mit großen (vor die allem Dateigröße betreffend) Bildern „verstopfen“ sollte.
Ich speichere meine Bilder deshalb direkt in Photoshop in optimierte Form. Das betrifft einerseits zu Abmessungen. Man sollte Bilder möglichst nicht größer einbinden, als sie am Ende angezeigt werden. Ist der Content-Bereich 600 Pixel breit, sollten die Bilder auch nicht breiter als 600 Pixel sein. Zum anderem optimiert Photoshop beim Speichern die Dateigröße, so dass diese möglichst gering ist.
Letzteres kann man noch weiter optimieren, indem man ein passendes Tool oder Plugin nutzt. Auf Websites wie compressor.io oder tinypng.com kann man die eigenen Bilder hochladen und dann eine optimierte Version mit deutlich geringerer Dateigröße wieder herunterladen.
WordPress-Nutzer können aber auch Plugins wie EWWW Image Optimizer oder Optimus einsetzen, um beim Upload von Bildern automatisch eine Optimierung vorzunehmen.
- Ladezeit verbessern
Neben den Bildern tragen noch viele andere Faktoren zur Ladezeit bei und diese sollten bei der mobilen Nutzung besonders gering sein. Deshalb sollte man das Mobile Design der eigenen Websites dahingehend optimieren.
Mit Hilfe von nützlichen WordPress-Plugins, kann man die Ladezeit einer WordPress-Website deutlich reduzieren. Auf meinen Blogs und Websites auf WordPress-Basis nutze ich die dort vorgestellten Plugins.
Zudem sollte man immer mit einem Minimalismus-Ansatz an die eigene Website herangehen. Im Zweifel lieber auf ein Element verzichten, was sich immer positiv auf die Ladezeit auswirkt.
- iOS/Android Icons nutzen
- Während der linke Button kein eigenes Icons nutzt, sieht der rechte Button für meinen Blog schick aus.
Ein kleiner aber feiner Tipp zum Schluss. Smartphone Nutzer sind es gewohnt, einen Button auf dem Homescreen zu haben, der schick ist. Websites können als Lesezeichen auf den Homescreen gelegt werden, um schneller auf diese zuzugreifen, aber standardmäßig wird dabei kein schöner Button erzeugt.
Deshalb macht es Sinn für iOS und Android spezielle Icons zu erstellen und im Quellcode der eigenen Website einzubinden. Auf diese Weise erscheint dann auf dem Homescreen ein schöner Button, wenn jemand ein Lesezeichen für deine Website anlegt.
Um die Icons in verschiedenen Größen zu erstellen, kann man einen Service wie appiconmaker.co nutzen. Hier lädt man das eigene Icon in der Original-Größe hoch und es werden automatisch alle möglichen Varianten davon erzeugt, die man dann herunterladen kann.
Anschließend muss man diese dann in die eigene Website einbinden. Das geschieht per Code. Hier ein Beispiel:
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
Hierbei wird das Icon in der Größe 114×114 Pixel für iOS eingebunden. Natürlich muss man die generierten Icons dann auch auf den eigenen Webspace hochgeladen haben.
Etwas einfacher ist es mit dem Online-Tool favicomatic.com. Dieses erzeugt nicht nur alle Icon-Größen, sondern zeigt auch gleich den HTML-Code an, den man in den Head-Bereich der eigenen Website einfügen muss. Bei WordPress ist dies z.B. sehr einfach mit dem Plugin Insert Headers and Footers möglich.
Der Platz auf dem Smartphone ist sehr begrenzt, weshalb man gerade beim Menü sehr darauf achten muss, wie man es präsentiert.
Die Tipps für bestehende Websites und Blogs umsetzen
Die meisten genannten Tipps sind auch auf bestehenden Website und Blogs gut umsetzbar. Und das sollte man auch machen, da man nur so für die Zukunft gerüstet ist. Allerdings kann es je nach Inhalt und verwendeter Technik an der einen oder anderen Stelle schwieriger sein.
So macht es sich bei sehr umfangreichen Blogs oder Website im Nachinein schwer, Zusammenfassungen am Anfang jedes Artikel einzufügen. Bei neuen Artikeln sollte man dies dann aber auf jeden Fall beachten und wenn man im Nachhinein ältere Artikel mal bearbeitet, kann man es ja nachholen.
Ebenso bieten nicht alle Themes die Möglichkeit das Menü rechtsbündig anzuzeigen. Das kann man zwar teilweise durch Handarbeit anpassen, aber spätestens beim nächsten Theme-/Layout-Wechsel sollte man darauf achten, dass das Menü entsprechend anpassbar ist.
Welche weiteren Tipps und Erfahrungen für das Mobile Design habt ihr gemacht bzw. könnt ihr anderen geben?