Mobile First: 3 Bausteine für konsequent Smartphone-optimierte Websites

Mobile First - Smartphone-optimierte Websites

Mobile First wird noch wichtiger! Googles Plan zum Mobile-Index, bietet Smartphone-optimierten Websites sehr wahrscheinlich eine bessere Auffindbarkeit. Viele Responsive-Websites erfüllen jedoch nicht die Anforderungen. Warum und wie man darum Mobile First ordentlich umsetzen kann erfahrt ihr hier.

Smartphone-Traffic in Zahlen: Welche Branchen liegen vorne?

Googles erneute Mobile-First-Offensive wird umgesetzt, indem der mobile Google-Seiten-Index den Desktop-Index zukünftig ablöst bzw. vorrangig genutzt wird (über die genaue Umsetzung wird noch spekuliert). Erst danach wird die Desktop-Website für das Ranking herangezogen. Konsequenterweise werden Websites zukünftig besser gefunden, wenn diese “richtig” gemacht sind, also auf Smartphones nutzerfreundlich aufgebaut sind und dies technisch für den Algorithmus klar gemacht ist.

Das macht Sinn, denn aktuelle Traffic-Zahlen belegen die Durchdringung durch mobile Endgeräte. In den USA (und in abgeschwächter Form auch in Deutschland) kommen inzwischen knapp 60% der Suchanfragen über Smartphones (Gute Zusammenfassung von SEO-Südwest). Nach Branche liegt der Mobile-Anteil demnach bei:

  • Essen & Trinken: 72% mobile Suche
  • Gesundheit: 68% mobile Suche
  • Sport: 68% mobile Suche
  • Banking ist letzter, mit nur 39% aller Suchanfragen via Mobile

Eine responsive oder mobile Website sollte inzwischen natürlich jede im Web aktiv auftretende Organisation haben, die ihre Nutzer nicht verschrecken will. Ist dann also alles gut?

Mobile First - Smartphone-optimierte Websites

 

Wir haben eine responsive Website – Warum reicht das oft nicht aus?

Selbst Unternehmen mit responsivem Auftritt setzen unabsichtlich oft Schwerpunkte auf der Desktop-Version und haben eine auf Smartphones nur nachrangig umgesetzte Website, wie man oft beobachten kann.

Dies liegt sicher oft an der komplexen Abstimmung bei der Website-Erstellung und der mangelnden Testmöglichkeit für immer aktuellere Geräte. Oft wird so zum Testen die Website nämlich einfach mal klein gezogen ohne die Höhe korrekt zu beachten oder nur auf bestimmten Endgeräten geschaut („Ich hab kein Android, ein Test auf meinem iPhone reicht doch“).


03.04.2017 Onpage SEO-Seminar Berlin >> Jetzt informieren

Beispiele für typische Fehler:

  • Wichtige Website-Elemente wie Kernbotschaft oder Abschluss-Call-To-Actions sind nicht im direkt sichtbaren Bereich sichtbar
  • Das Layout ist in einigen Smartphones nicht mehr auf die inzwischen deutlich wieder deutlich höheren Smartphone-Auflösungen optimiert. Elemente wirken z.B. viel zu klein, es ist viel zu viel im sichtbaren Bereich reingezwängt.
  • Werbebühnen nehmen den Großteil der Homepage ein, anstatt einen Mix aus Inhaltsnavigation und Angebots-Promotion sowie Inspiration und Brand-Image zu bieten.

Wenn folgend aus diesen Fehlern dann die Conversion-Rate für Mobile geringer ist, wird oft argumentiert, dass Nutzer ja mobil auch nicht so stark kaufen wie am Desktop. Bei dem oben zitierten 60% Mobile-Traffic ist das aber eine gewagte These bzw. verschenktes Potenzial. Wenn Google künftig noch den Traffic für nicht-smartphone-optimierte Seiten drosselt, wird das Thema sicherlich „schnell“ bewusster werden.

Die Lösung ist lange bekannt: Mobile First wirklich leben

Mobile First wird konsequent umgesetzt, indem die Smartphone-Version zuerst entwickelt wird und andere Größen danach abgeleitet werden. Diese Reihenfolge bringt andere Design-Ergebnisse als das Desktop-First-Vorgehen, bei dem man für die Mobile Variante dann oft Elemente reinquetscht oder aus der Not umpriorisiert. Ebenfalls spielt die technische Qualität eine Rolle, da eine starke Mobile-Anforderung z.B. auch die kurze Ladezeit ist.

Das onpage.org-Wiki hat zu Mobile First eigentlich alle Argumente gut zusammengefasst.
Doch wie setzt man diese hehren Ziele nun in der Praxis zufriedenstellend um?


Bitte gib eine gültige Mailadresse an.

3 Bausteine für Mobile-First-Projekte

Wie genau man Mobile-First tatsächlich im Workflow umsetzt wird oft nicht durch Best Practices untermauert und thematisiert. Darum hier 3 mögliche Bausteine für die konsequente Umsetzung:

Tipp 1: Geräte/Browser-Scope mit Analytics-Daten festlegen

Die Analytics-Daten geben eine gute Entscheidungshilfe zum Browser/Device-Scope: Wieviele Smartphone-User sind mit welchen Versionen von Neu- und Alt-Browsern auf der Website? Wenn z.B. 3% der mobilen Endgeräte mit einer Auflösung von 320 Pixeln vorhanden sind, macht es aus ökonomischer Sicht meist Sinn, auch für diese alles passend aufzubereiten. Auch Alt-Browser müssen nicht unterstützt werden, wenn diese keinen ökonomischen Nutzen bringen, besonders da dadurch die Entwicklungskosten für’s Frontend oft erheblich steigen.

Device-/Browser-Scope mit Google Analytics festlegen

Device-/Browser-Scope mit Google Analytics festlegen

Die Analytics-Zahlen lassen sich dabei gut als „Hebel-Argument“ verwenden, wenn z.B. der Browserscope für den Relaunch falsch (oder gar nicht!) abgestimmt wurde. Da oft ohne Daten oder nur mit allgemeinen Browser-Studien argumentiert wird, hat hier eigentlich jeder Projektbeteiligte, vom Frontender bis zum Projektleiter und natürlich der Kunde die Aufgabe, hier mit den tatsächlich wichtigen Zahlen zu arbeiten, wenn er sein Projekt erfolgreich machen möchte.

Tipp 2: Design auf Basis von Mobile-Design-Patterns

Das Konzept und Design hat die Aufgabe, die Botschaften und Angebote gut rüberzubringen, die „Bedienung“ – also das Finden von Informationen und Produkten sowie den Kauf zu vereinfachen und dadurch eine positive User Experience für die Marke und Auftritt zu schaffen. Hier läuft also alles zusammen. Da diese Aufgabe komplex ist, sollte man auf etablierte Mobile-Navigations-Patterns und Gestaltungs-Guidelines setzen, um sowohl Aufwände zu schonen als auch ansprechende Lösungen zu schaffen.

Mobile Design Patterns

Die Navigation ist entscheidend bei der Erschließung der Inhalte. Mobile Design Patterns machen’s einfacher

Tipp 3: Richtig testen: Endgeräte-Tools

Niemand hat alle Geräte und Browser parat, nicht einmal 50% können mit Hausmitteln abgedeckt werden. Zwar sind die üblichen Browser-Plugins eine große Hilfe beim skalieren, aber nicht genau genug für einige Fälle. Neue Test-Tools wie Browserstack bieten die Möglichkeit, ohne großen Aufwand und Kosten seine Designs auf den tatsächlichen Endgeräten zu testen und damit alle Smartphone-Versionen zu berücksichtigen. Smartphone-Optimierung ist jedoch mehr als pure Design-Adaptivität. Die für Smartphones wichtige Ladezeit sollte darum mit Tools wie WebPageTest sauber gemessen und aufs minimal mögliche reduziert werden.

Mobile First Development mit BrowserStack

Echtes Mobile First Development: Mit BrowserStack können tatsächliche Endgeräte in allen Browserversionen für Entwicklung und QS genutzt werden. Die Umgebungen werden per Cloud zur Verfügung gestellt.

Weitere Tools:

Fazit: Mobile First ist aktueller denn je

Mobile ist damit für viele (aber nicht alle) öffentliche Websites quasi Prio-1-Thema, falls man bei Google (und anderen) zukünftig gut gefunden und von vielen Menschen ansprechend “genutzt werden möchte”. Und da Suchmaschinen oft den Großteil (bis etwa 75%) des Traffics ausmachen…

Mobile First: 3 Bausteine für konsequent Smartphone-optimierte Websites
5 (100%) 1 vote

Ralf Schukay
Ralf Schukay arbeitet als Digital Analyst und SEO-Consultant bei der mediaworx berlin AG. Er plant Analytics-, Optimierungs- und Online-Marketing-Konzepte für Marktführer im Bereich E-Commerce, Finanzen, Health, Versicherungen und weitere.
You may also like
AMP in der SERP
5 AMP-Plugins für WordPress im Vergleich
SEO-Potentiale beim Erstellen von mobilen Webseiten nutzen

Deine Meinung ist gefragt

Deine Meinung*

Dein Name*
Deine Seite