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?
Wer wir sind und wie wir arbeiten. In unserem Büro im Zentrum von Köln arbeiten ausgebildete Redakteur/innen an der Ausarbeitung erstklassiger Inhalte, auf die du dich verlassen kannst. Sämtliche Artikel werden nach dem Vier-Augen-Prinzip publiziert: Nach Fertigstellung der Rohfassung werden die Texte von (mindestens) einem/r anderen Redakteur/in auf orthografische und inhaltliche Richtigkeit hin überprüft.
Diese Seite ist ein Angebot der 4pub GmbH mit Sitz in Köln. Wir haben uns auf den Betrieb hochwertiger redaktioneller Online-Portale spezialisiert und berichten stets redaktionell unabhängig.
- Danke für 16 tolle Jahre - 13. Juli 2023
- So erstellst du deine erste Newsletter-Mail in 10 Schritten mit CleverReach - 13. Juli 2023
- Die 5 besten Features des Amazon Affiliate WordPress Plugin – AAWP - 12. Juli 2023
Von TinyPNG gibt es auch ein eigenes Plugin für Photoshop für 50 USD. Sieht vielleicht am Anfang etwas teuer aus, aber ich habe es mir vor knapp 2 Wochen gekauft und es ist ein gigantischer Zeitsparer, da man mit Photoshop Actions sozusagen im Autopilot die richtigen Bildformate in der bestmöglichen Größe und Qualität exportieren kann.
Super Tipps, danke Peer. Da mein Blog sehr jung ist habe ich mich auch gleich zu Beginn mit dem Thema beschäftigt. Ich nutze ein super Theme, dass die ersten zwei Punkte automatisch umsetzt. Optimus für die Bilder nutze ich auch und solange die unter 100 KB reicht auch die kostenlose Variante. Was ich nicht verstehe ich der Google Pagespeed Test. Manchmal verbessere ich etwas, aber danach ist der Wert schlechter als vorher. Muss mich da noch etwas weiter einlesen…
Hallo,
ich habe bei meiner Homepage noch Linklisten etc. optimiert, indem ich eine Zeilenhoehe von 1 cm eingestellt habe, damit beim klick mit finger der richtige link getroffen wird.
Gut, dass du mal aufgelistet hast was für eine mobile Darstellung wichtig ist. Viele Webseiten haben da noch mächtig Optimierungsbedarf und sollten sich diese Tipps mal zu Herzen nehmen. Ich erinnere mich noch an eine gruselige mobile Version einer Online Casino Seite. Die Spieltische und Chips waren so klein, dass es schon eine Kunst war sie mit einem Finger zu treffen, geschweige denn zu erkennen welchen Wert sie hatten.
Hallo Peer,
noch eine Ergänzung zu den Touch Icons. Man kann sich die Mühe sparen, diese in allen (ein bis zwei dutzend etwa) verschiedenen Auflösungen bereitzustellen. Man nutzt einfach eine möglichst große Version (ich nehme hierfür 450*450) und bindet diese über
<link rel=”apple-touch-icon” href=”../apple-touch-icon.png”>
oder ähnlich ein. Kleinere Größen werden vom jeweiligen Gerät bzw. von der jeweiligen Anwendung automatisch runtergerechnet.
Viele Grüße
soggi
Echt schade, dass ich den Beitrag erst jetzt lese. Wirklich tolle Tipps! Mir kam vor drei Monaten auch der Gedanke, ich müsste meine Website mal sauberer Aufziehen und dafür ein Mobile Design anlegen. Nun ist das echt viel Stoff auf einmal zum Einlesen, und ich hatte schon mit der Website selbst alle Hände voll zu tun. Deshalb habe ich ein Unternehmen kontaktiert, dass sich auf Webentwicklung in meiner Heimatstadt Berlin spezialisiert hat (tenmedia.de). Die haben mir dann eine, auf Smartphones ausgerichtete, responive Website erstellt. Ich bin mit der abgelieferten Leistung sehr zufrieden und fest überzeugt, dass ich mit der Website auch in Zukunft in diesem umkämpften Markt bestehen kann.
Ich möchte mich auch noch mal besonders für den Punkt 5 bedanken, das hatte ich echt noch nicht auf dem Schirm und ich denke, das kommt auch sehr gut. Ich bleibe auf jeden Fall weiterhin Leser, da ich auch weiterhin für die Zukunft gerüstet sein will.