REDPIXEL - stock.adobe.com
10 bewährte Verfahren für mobilfreundliche Webseiten
Maßnahmen wie ein responsives Layout und ein aufgeräumtes Design verbessern das mobile Nutzererlebnis und sorgen dafür, dass Webseiten in Suchmaschinen besser abschneiden.
Da immer mehr Menschen ihre Smartphones für die Internetsuche nutzen, müssen Unternehmen mobilfreundliche Webseiten erstellen, um ihre Kunden besser zu erreichen.
Laut einem Bericht von Statcounter erfolgt etwa 60 Prozent des Internetverkehrs von mobilen Geräten aus. Zudem lässt sich mit einer entsprechend gestalteten Webseite das Ranking in Suchmaschinen verbessern.
Mobilfreundlich zu sein bedeutet, dass eine Webseite in unterschiedlichen Varianten angezeigt wird – je nach Gerät, das die Besucher benutzen. Mobile Geräte haben kleinere Bildschirme als Desktops, daher passt sich eine mobilfreundliche Webseite an, um den Nutzern ein besseres Seherlebnis zu bieten.
Die Desktop-Ansicht bietet nicht nur einen größeren Bildschirm, sondern auch andere Programme und Funktionen, die auf mobilen Geräten möglicherweise nicht zur Verfügung stehen, zum Beispiel Adobe Flash und Popup-Fenster. Mobilfreundliche Webseiten verfügen über Funktionen, die speziell auf Mobilgeräte zugeschnitten sind, Das sind beispielsweise Click-to-Call und Navigationsfunktionen, die auch zeitnah geladen werden.
Im Folgenden beschreiben wir zehn bewährte Verfahren, die für eine mobilfreundliche Webseite sorgen.
1. Responsives Layout
Mit einem responsiven Layout können Unternehmen die Größe und Darstellung der Webseite an das Gerät des Nutzers zuschneiden. Die Webseite passt sich an verschiedene Bildschirmgrößen an und zeigt relevante Inhalte an, während das Design bei Bedarf geändert wird, z. B. von einem zweispaltigen Layout auf einem Desktop zu einem einspaltigen Design auf einem mobilen Gerät.
Wenn es sich um ein responsives Design handelt, sollte die Ladezeit bei der Anpassung an die Bildschirmgröße nicht beeinträchtigt werden. Firmen können bei der Erstellung oder Aktualisierung ihrer Webseite zudem ein mobil-responsives Design/Theme wählen.
Eine responsive Webseite kann auch die Suchmaschinenoptimierung (SEO) verbessern, da Google mobilfreundliche Webseiten in den Suchmaschinenergebnissen höher einstuft. Der Grund: Die Algorithmen von Google nutzen beim Ranking von Webseiten eine mobil gerenderte Version der Webseiten anstelle der Desktop-Ansicht.
E-Commerce-Webseite-Builder wie Wix und Squarespace bieten mobilfreundliche Designvorlagen, die sich anpassen lassen. Auch WordPress kann eine Webseite entsprechend gestalten.
Firmen mit einer Webseite, die auf mobilen Geräten nicht gut funktioniert, können das Meta-Tag viewport hinzufügen. Wenn sie folgenden Code verwenden, wird die Webseite korrekt an die verschiedenen Bildschirmgrößen angepasst.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2. Geschwindigkeit der Webseite optimieren
Die Geschwindigkeit hat einen großen Einfluss auf den ersten Eindruck der Besucher. Eine Webseite, die in einer Sekunde lädt, hat eine dreimal höhere Konversionsrate als eine Webseite, die in fünf Sekunden braucht, so eine Studie von Portent.
Die Ladezeit der eigenen Webseite lässt sich beispielsweise über BrowserStack SpeedLab prüfen. Dort ist es notwendig, die URL der Webseite einzugeben und per Klick ein kostenlosen Report generieren. Dieses Tool prüft die Geschwindigkeit der Webseite und zeigt die Ergebnisse sowohl für die Desktop- als auch für die mobile Ansicht an. Der Test muss zweimal durchgeführt werden – einmal für die mobile Version, einmal für die Desktop-Variante.
Um die Geschwindigkeit einer Webseite zu verbessern, bietet es sich an, Videos auf dem Angebot eines Drittanbieters zu hosten und sie dann in die eigene Webseite einzubetten. So beeinträchtigen zum Beispiel Videos die Geschwindigkeit der Webseite nicht. Zwei beliebte Plattformen zum Hosten von Videos sind YouTube und Vimeo.
3. Bilder komprimieren
Firmen sollten Bilder auf ihrer Webseite komprimieren, um die Dateigröße zu begrenzen und die Download-Geschwindigkeit zu erhöhen. Da sich bei komprimierten Bildern die Menge der Daten reduziert, die für die Anzeige geladen werden müssen, erhöht sich die Geschwindigkeit der Webseite. So lassen sich Bilder mit kostenlosen Tools wie Kraken.io komprimieren, um die Dateigröße zu verringern, ohne die Qualität zu beeinträchtigen.
Auch geeignete Bildformate wie JPEG 2000, JPEG XR, AVIF und WebP verringern die Dateigrößen im Vergleich zu JPEGs und PNGs, bieten aber eine ähnliche Qualität. Der Einsatz dieser Formate erhöht zudem die Geschwindigkeit der Webseite.
Eine weitere Option ist das Lazy Loading, bei der die Bilder nur bei Bedarf geladen werden. Diese Bilder befinden sich zunächst unterhalb des Sichtfelds der Nutzer und werden erst dann geladen, wenn er nach unten scrollt.
4. HTML5 statt Adobe Flash verwenden
Adobe Flash ist für Animationen beliebt, wird aber von mobilen Geräten nicht unterstützt. Daher sollten Firmen Flash nicht auf ihren Webseiten einsetzen und stattdessen HTML5 verwenden. Mit HTML5 können sie viele Aktionen online durchführen, ohne Browser-Plug-ins zu verwenden. Es ist möglich, Filme und Musik einzubetten sowie Animationen mit HTML5 zu erstellen, das von mobilen Geräten unterstützt wird.
5. Pop-ups vermeiden
Pop-ups funktionieren gut auf Desktop-Versionen von Webseiten, aber nicht auf mobilen Geräten. Sie sind auf kleineren Bildschirmen schwer zu erkennen, und manchmal ist es nicht möglich, Pop-ups zu starten, etwa wenn ein Besucher die Webseite verlässt. Außerdem kann es für Nutzer schwierig sein, Pop-ups von einem mobilen Bildschirm aus zu schließen, da das X in der Ecke möglicherweise nicht sichtbar ist.
6. Größe und Platzierung von Schaltflächen ändern
Wenn eine Schaltfläche auf einer mobilen Webseite zu klein ist oder sich an der falschen Stelle befindet, ist sie möglicherweise schwer zu bedienen. Da die meisten Nutzer mobiler Geräte ihren Daumen zur Navigation verwenden, sollten die Schaltflächen groß genug sein, um sie mit dem Daumen zu bedienen. Die Nutzer sollten auch in der Lage sein, jede Schaltfläche auf der Webseite mit dem Daumen zu treffen, wenn sie scrollen, das heißt, die Schaltflächen sollten sich am unteren Ende der Seite befinden.
7. Große und gut lesbare Schrift verwenden
Die für einen Desktop empfohlene Schriftgröße von mindestens 14 Punkten ist möglicherweise nicht groß genug, um auf einem kleineren Bildschirm lesbar zu sein. Daher sollten Firmen die Schriftgröße am besten auf einem mobilen Gerät testen, um zu sehen, ob sie lesbar ist. Zudem sollten sie auf einem mobilen Gerät nicht mit neuen Schriftarten experimentieren, wie Schreibschriften, da diese möglicherweise nicht so gut lesbar sind. Versuchen Sie, bestimmte Textzeilen durch Fettdruck hervorzuheben, und bleiben Sie beim Schriftstil konsequent.
Wenn Firmen für den Text Schwarz anstelle verschiedener Farben nutzen, können die Nutzer besser erkennen, wenn der Hintergrund eine andere Farbe hat oder wenn es Reflexionen gibt, etwa bei Sonneneinstrahlung, wenn sie ihr Gerät im Freien benutzen.
8. Links richtig platzieren
Beim Einsatz mobiler Geräte fällt es schwer, mit dem Daumen auf einen Link zu klicken, da keine Maus zur Verfügung steht. Um den Klick auf den gewünschten Link zu erleichtern, sollte der Abstand zwischen den Links daher größer sein.
Um die Benutzerfreundlichkeit auf einem mobilen Gerät zu verbessern, ist es am besten, die Anzahl der Links zu begrenzen, um ein blaues Meer zu vermeiden. Auch die Anzahl der Weiterleitungen sollten Sie limitieren, die den Benutzer auf eine andere Webseite führen. Wenn ein Link zu einer anderen Webseite führt, sollten die Besucher darüber informiert werden, dass sie die eigene Webseite verlassen, zum Beispiel mit „Klicken Sie hier, um die neue Webseite von Unternehmen XYZ zu sehen.“
9. Webdesign verschlanken
Firmen sollten eine Webseite nicht mit mehreren Aufrufen zum Handeln überladen. Wenn die Benutzer zu viele Aktionen ausführen müssen, kann die Navigation auf einem kleineren Bildschirm schwierig sein und zu Verwirrung führen. Daher sollten dort nur die wichtigsten Funktionen stehen, nach denen die Nutzer aktiv suchen würden, zum Beispiel das Kontaktformular.
Das Design der Webseite sollte einfach sein, damit die Navigation leicht zu verstehen ist. Es bietet sich an, viel Weißraum zu verwenden, damit die Nutzer alles auf einen Blick sehen können und die Inhalte übersichtlich bleiben. Zudem sollten Firmen veraltete Inhalte entfernen, damit sie nicht unnötig Platz wegnehmen oder die Nutzer verwirren.
Bei Menüs sind lange Listen von Optionen und Funktionen zu vermeiden. Ein Menü mit allen verfügbaren Navigationsoptionen mag zwar übersichtlich erscheinen, nimmt aber vor allem auf kleineren Bildschirmen viel Platz in Anspruch. Stattdessen bietet sich ein Hamburger-Menü an: eine Schaltfläche, die ein längeres Menü öffnet. Das spart Platz und sorgt für mehr Ordnung.
10. Webseite regelmäßig auf mobilen Geräten testen
Um sicherzustellen, dass die eigene Webseite mobilfreundlich ist, gibt es mehrere Testmöglichkeiten. Zunächst sollten Firmen Webseiten auf mobilen Geräten testen, um die Benutzerfreundlichkeit zu prüfen. Der Test sollte sowohl mit Android- als auch mit iOS-Geräten erfolgen. Für den Test der Webseite bietet sich auch der kostenlose Mobile-Friendly-Test von Google an. Zudem ist es wichtig, regelmäßig zu testen, insbesondere nach jeder Aktualisierung der Webseite.
