10 Tipps, wie Sie Ihre Website fit machen für mobile Endgeräte

Es ist noch gar nicht so lange her, als Google bekanntgegeben hat, dass nicht für mobile Endgeräte optimierte Webseiten auf Dauer schlechter in den Suchergebnissen angezeigt werden.  Aus diesem Grunde ist das Thema für Ihren Erfolg wichtig und mit diesen Tipps zeigen wir Ihnen, wie Sie mobil bei Ihren Besuchern punkten können.

  1. Prüfen Sie zunächst, ob Ihre Website über sogenanntes Responsive Design verfügt. Anwendungen wie der Responsive Design Viewer von Active Value http://www.active-value.de/responsive-design-viewer helfen Ihnen dabei.  Tragen Sie die gewünschte Domain in die Eingabemaske ein und schauen Sie sich an, wie die Darstellung Ihrer Website in verschiedenen Ausgabeformaten ist. Wenn Ihnen ein horizontaler Scrollbalken angezeigt wird, dann ist Ihre Seite wahrscheinlich nicht responsive und passt sich auch nicht unterschiedlichen Bildschirmgrößen an.

    responsive-1

    Basics – Responsive Design: Der englische Begriff responsive lässt sich mit Adjektiven wie reagierend, ansprechbar, reaktionsfähig usw. übersetzen. Damit ist gemeint, dass sich das Design automatisch dem zur Verfügung stehenden Platz anpasst und Inhalte auch auf kleinen Bildschirmen wie z.B. Smartphones, gut gelesen werden können

  2. Schauen Sie sich andere Seiten – z.B. von Ihren Mitbewerbern – über den Responsive Design Viewer an. So erhalten Sie ein erstes Gespür dafür, wie sich Inhalte jeweils auf den  verschiedenen Bildschirmgrößen darstellen lassen. Vergleichen Sie die Lesbarkeit und Nutzerführung auf diesen Seiten mit Ihrer eigenen Website. Lassen sich Inhalte auch mobil leicht erfassen? Oder müssen Sie lange suchen, um das zu finden, wonach Sie gerade auf den Seiten suchen? Versetzen Sie sich dabei gedanklich in einen Besucher.
  3. Oftmals fehlt der Blick von außen und der Blick auf das Wesentliche. Lassen Sie Ihre Site auf mobilen Endgeräten von anderen testen. Sie werden sich wundern, was alles nicht auf den ersten Blick entdeckt wird, obwohl wichtige Informationen Ihrer Meinung nach bereits optimiert dargestellt werden.
  4. Platzieren Sie wichtige Links zu weiterführenden Informationen auf Ihrer Website als Schaltflächen. Diese lassen sich mobil leichter antippen als Links, die sich im Fließtext befinden. Google empfiehlt eine Breite oder Höhe von 48 sogenannten CSS Pixeln. Das entspricht ungefähr 7mm. Achten Sie darauf, dass ausreichend Platz zwischen einzelnen Links vorhanden ist. Sonst wird es für Nutzer schwierig, diese Links einzeln anzutippen.
  5. Hinterlegen Sie auch Ihre Bilder mit Links. Dieses Vorgehen eignet sich besonders bei Infoboxen. Also an Stellen wo Nutzer erwarten, dass sie weitergeleitet werden, wenn sie auf ein Bild klicken.
  6. Ein sehr wichtiges Kriterium für Google ist die Ladezeit einer Website. Google bietet mit seinem PageSpeed Insights https://developers.google.com/speed/pagespeed/insights einen Überblick mit Handlungsempfehlungen, damit Ihre Seite schneller geladen wird.
  7. Optimieren Sie die Dateigröße Ihrer Bilder für mobile Endgeräte. Stellen Sie für die unterschiedlichen Bildschirmmaße jeweils passendes Bildmaterial zur Verfügung. Oder unterdrücken Sie auf Smartphones die Anzeige bestimmter Bilder.
  8. Nutzer sind es gewohnt, auf mobilen Endgeräten zu scrollen. Doch was passiert, wenn sie sich weiter unten auf Ihrer Seite befinden? Gelangen Sie von dort aus schnell zu anderen Inhalten, oder müssen sie wieder komplett nach oben scrollen? Stellen Sie auf jeden Fall etwas bereit, was Nutzer auf Ihrer Seite unternehmen können. Dies können z.B. Infoboxen mit Schaltflächen zu weiterführenden Informationen sein, eine Handlungsaufforderung oder Social Media Buttons.
  9. Beachten Sie die Regel „above the fold“ (wichtige Inhalte sind ohne scrollen sichtbar) – dies bezieht sich bei mobilen Endgeräten darauf, dass Nutzer beim Besuch Ihrer Site direkt wissen sollen, was sie dort erwartet. Ihr Firmenlogo, welches auf dem Smartphone den halben Bildschirm ausmacht, wird von Google als nicht relevant betrachtet.
  10. Halten Sie im Footer wichtige Links bereit. Auf vielen Internetauftritten ist im Footer immer noch lediglich das Impressum und die Datenschutzerklärung enthalten. Dies aus Zeiten, wo vermeintlich unwichtige Inhalte an nicht so gut sichtbaren Stellen platziert wurden. Schließlich sollte das eigene Angebot im Vordergrund stehen und der Nutzer möglichst nicht scrollen müssen. Durch den Einzug mobiler Endgeräte hat sich das Nutzerverhalten geändert.

    Zusätzlich können Sie eine Sticky-Navigation bereitstellen. Diese bleibt am oberen Bildschirmrand stehen, während Nutzer sich auf Ihrer Seite bewegen.

responsive-2

Unser Extratipp: Tragen Sie Ihre Rufnummer im Quellcode so ein, dass sie auf Smartphones als Action-Button erkant wird und zum Anrufen angezeigt wird. Hier ein Beispiel mit unserer Telefonnumer, wie der HTML-Code dafür aussieht: <div> Servicenummer: <a href=“tel:+4921174950550„>(0211) 749 50550 </a>

Tauschen Sie die fett markierten Stellen gegen Ihren eigenen Text bzw. Rufnummer aus und fügen Sie den gesamten Code an den Stellen, wo sich Ihre Telefonnummer befindet ein. Achten sie darauf, dass Sie Ihre Rufnummer mit Länder- und Städte-Vorwahl eintragen und dass keine Leerzeichen vorkommen. (Hinweis: Sollten Sie bei einem Redaktionssystem einen Editor verwenden, müssen Sie in den HTML Modus wechseln, sonst wird Ihren Besuchern nachher der Code auf der Webseite angezeigt und nicht die Telefonnummer als Link.)

Ein Gedanke zu „10 Tipps, wie Sie Ihre Website fit machen für mobile Endgeräte

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.