Entwicklungen in Webentwicklung und Webdesign hängen stark mit neuen Computertechnologien zusammen. Heute nutzen 80% der User das Internet über das Smartphone. Mobile Endgeräte sind vollständig in unser tägliches Leben integriert.

Das bedeutet, dass Websites für mobile Endgeräte optimiert sein müssen, damit sie mobilen Usern das beste Nutzererlebnis bieten. Luke Wroblewski entwickelte 2009 den „Mobile First“-Ansatz, den Eric Schmidt, CEO von Google, ein Jahr später bekannt machte.

Aber was heißt „mobile first“ genau? Welche Auswirkungen hat das Konzept auf SEO? Und wie erstellt man eine mobile Seite? Diese Sortlist-Artikel liefert Antworten auf diese Fragen.

Inhaltsverzeichnis

Mobile first: Mobil wird zur obersten Priorität

Was ist Responsive Webdesign?

Durch Responsive Webdesign kann sich eine Website automatisch an die Bildschirmgröße und Bildschirmart des verwendeten Gerätes anpassen. Egal, ob auf dem Desktop, Smartphones oder Tablet: Die Inhalte werden immer richtig anzuzeigen. Dank Responsive Design muss der Nutzer nicht selber zoomen, schwenken oder scrollen, um den Content sehen oder lesen zu können. Responsive Design trägt also erheblich zu einer besseren User Experience bei.

Was versteht man unter „Progressive Enhancement“ und „Graceful Degradation“?

Um zu ermöglichen, dass eine Webseite oder eine Anwendung „responsive“ ist und auf den verschiedenen Geräten richtig angezeigt wird, erstellen Designer verschiedene Versionen, die an das jeweilige Endgerät angepasst sind. Dabei gibt es drei verschiedene Vorgehensweisen:

  • Unter Progessive Enhancement, oder progressive Verbesserung, versteht man den Vorgang, wenn Programmierer zuerst die Version mit den geringsten Ansprüchen erstellen, also zum Beispiel jene für einen mobilen Browser. Diese Basisversion beinhaltet die grundlegensten Funktionen und Charakteristika. Darauf aufbauend werden dann anspruchsvollere Seiten inklusive komplizierteren Effekten programmiert, beipsielsweise für die Tablet- oder Desktop-Variante.
  • Graceful Degradation, oder würdevolle Herabstufung, ist das Gegenteil. Hier wird mit der anspruchsvollsten Variante, beispielsweise der Desktopversion, begonnen. Anschließend machen Webdesigner die Seiten mit mobilen Endgeräten kompatibel, indem sie bestimmte Funktionen oder bestimmte Inhalte entfernen.
  • „Mobile first“ bedeutet, wie der Name schon sagt, dass zuerst die Mobilversion entwickelt wird, bevor die Tablet- oder Desktop-Seite drankommt. Bei der Anwendung einer „Mobile First“-Strategie steht also die mobile Internetnutzung im Fokus mit dem Ziel, Nutzern die perfekte mobile User Experience zu liefern.
yaaas-creative-studio
YAAAS Creative Studio
Düsseldorf, Germany
4.9 - 5 Empfehlungen
Tools zur WebsiteerstellungWebentwicklungSocial MediaWebdesignWeb & SoftwareCreative & DesignMarketing
Agentur entdeckenarrow_forward
unicblue-brand-communication-gmbh
UNICBLUE Brand Communication GmbH
Gelsenkirchen, Germany
3.75 - 1 Empfehlung
WebentwicklungEvent-MarketingGrafikdesignWebdesignBranding
Agentur entdeckenarrow_forward
echte-liebe
Echte Liebe
Köln, Wiesbaden, Berlin, Miami, Germany, USA
4.5 - 2 Empfehlungen
Media & WerbungOnline Advertising & DisplayWebentwicklungSocial MediaWeb & SoftwareCreative & DesignBrandingMarketing
Agentur entdeckenarrow_forward
werbetriebwerk-ug
WerbeTriebwerk UG
Münster, Germany
4.5 - 10 Empfehlungen
WebentwicklungE-Commerce-SoftwareSocial MediaGrafikdesignWeb & SoftwareCreative & DesignMarketing
Agentur entdeckenarrow_forward
rechnerhaus-gmbh
Rechnerhaus GmbH
Lampertheim, Germany
5 - 3 Empfehlungen
Online Advertising & DisplayTools zur WebsiteerstellungWebentwicklungE-Commerce-SoftwareWebdesignWeb & Software
Agentur entdeckenarrow_forward
adrenalinsky-werbeagentur-gmbh
ADRENALINSKY Werbeagentur GmbH
Berlin, Köln, Germany
5 - 3 Empfehlungen
WebentwicklungEvent-MarketingSocial MediaGrafikdesignWeb & SoftwareCreative & DesignBrandingMarketing
Agentur entdeckenarrow_forward
whos-mark
Who’s Mark?
München, Germany
4.5 - 1 Empfehlung
WebentwicklungGrafikdesignMarketing
Agentur entdeckenarrow_forward
sapera-making-complexity-work
Sapera. Making complexity work.
Berlin, Germany
4.5 - 3 Empfehlungen
Digitale StrategieGrafikdesignWeb & SoftwareBrandingMarketing
Agentur entdeckenarrow_forward
thefabers
THEFABERS
Köln, Germany
5 - 2 Empfehlungen
WebentwicklungE-Commerce-SoftwareGrafikdesignWebdesignBranding
Agentur entdeckenarrow_forward
incorporate-berlin
incorporate berlin
Berlin, Hamburg, Germany
4.5 - 5 Empfehlungen
GrafikdesignWebdesignWeb & SoftwarePublic RelationsBranding
Agentur entdeckenarrow_forward
uli-werbeagentur
Uli! Werbeagentur
Mainz, Wiesbaden, Frankfurt am Main, Germany
0 - 0 Empfehlung
WebdesignWeb & SoftwareMarketing
Agentur entdeckenarrow_forward
serviceplan-group
Serviceplan Group
München, Berlin, Bremen, Hamburg, Germany
0 - 0 Empfehlung
Media & WerbungWebentwicklungE-Commerce-SoftwareDigitale StrategieGrafikdesignWebdesignWeb & SoftwarePublic RelationsBrandingMarketing
Agentur entdeckenarrow_forward
nyba-media-gmbh
NYBA Media GmbH
Frankfurt, Germany
5 - 3 Empfehlungen
Online Advertising & DisplayWebentwicklungE-Commerce-SoftwareWebdesignMarketing
Agentur entdeckenarrow_forward
virtua-ethic
Virtua ethic
Düsseldorf, Germany
5 - 1 Empfehlung
Content MarketingWebentwicklungBrandingMarketing
Agentur entdeckenarrow_forward
screenshot-2020-08-26-at-14-14-37
Integr8 media GmbH
Berlin, Germany
0 - 0 Empfehlung
Online Advertising & DisplayWebentwicklungGrafikdesignBrandingMarketing
Agentur entdeckenarrow_forward
screenshot-2020-08-26-at-14-50-36
CRU Brand Consultancy
Berlin, Germany
0 - 0 Empfehlung
WebentwicklungGrafikdesignBranding
Agentur entdeckenarrow_forward
screenshot-2020-08-26-at-14-54-36
FORMM.agency
Berlin, Germany
4.5 - 9 Empfehlungen
WebentwicklungGrafikdesignBranding
Agentur entdeckenarrow_forward
econsor-mobile-agentur-heilbronn-app-entwicklung-logo
econsor mobile
Heilbronn, Germany
5 - 2 Empfehlungen
Mobile & App-EntwicklungWebentwicklungMobile & App-Design
Agentur entdeckenarrow_forward

Wie wirkt sich Mobile first auf SEO aus?

Mobile first hat seit seinem Aufkommen vor etwa zehn Jahren SEO-Strategien stark beeinflusst.

Google & Mobile first

Ende 2016 kündigte Google die Einführung des Mobile-First-Index an. Dieser bewertet die mobile Version einer Website und wirkt sich auf das Suchergebnis aus. Seit Dezember 2018 wendet die Suchmaschinen nun dieses Kriterium für 50% der in den SERP angezeigten Seiten an. Im März 2020 gab Google bekannt, dass der Faktor ab September desselben Jahres für alle Ergebnisse gelten werde.

Wenn Ihre Website separate URLs für Mobilgeräte und Desktops enthält, zeigt Google die mobile URL für mobile Nutzer an und die zweite für Internetnutzer, die Desktop-Computer verwenden. Unabhängig davon ist der indizierte Inhalt die mobile Version.

Strafen vermeiden

Welche Auswirkung das auf Ihre SEO hat, hängt davon ab, ob und wie Ihre Websites mobil-optimiert sind.

Wenn die einzelnen Websites sowohl für Smartphones als auch für Computer ausgelegt sind, sollten Sie vom Mobile-First-Index nicht negativ betroffen sein. In diesem Fall lässt sich eine Seite auf unterschiedliche Bildschirmgrößen skalieren. Das ist der von Google empfohlene Designansatz.

Die Websites, die am stärksten von der mobilen Indizierung betroffen sind, bieten je nach verwendetem Gerät separate Seiten für Mobilgeräte und Desktops. In diesem Szenario wird die mobile Version jetzt zuerst gecrawlt, was sich aus mehreren Gründen auf Ihre SEO auswirken kann:

  • Sie stellen unterschiedliche Inhalte auf den Mobil- und Desktopversionen einer Seite bereit.
  • Ihren mobilen Seiten fehlen Strukturdaten.
  • Ihren mobilen Seiten fehlen Metadaten.
  • Linkprofile, die auf Ihre mobilen Seiten verweisen, sind schwächer als Desktop-Versionen.

Stellen Sie sicher, dass sowohl die Mobil- als auch die Desktop-Version Ihrer Seiten in der Google Search Console verifiziert werden, um eine Abstrafung durch den Suchmaschinenriesen zu vermeiden. Verwenden Sie für beide Versionen dieselben Meta-Tags, dieselben Strukturdaten und Metadaten.

Google empfiehlt außerdem Folgendes:

  • Jedes rel = hreflang-Tag für die Internationalisierung verfügt über separate Links für Smartphone- und Desktop-URLs.
  • Ihre Server können jede Erhöhung der Crawling-Rate der mobilen Version Ihrer Website bewältigen.
  • Die richtige Verwendung der alternativen Verknüpfungselemente rel = canonical und rel = zwischen mobilen und Desktop-Versionen.

Danach geht es ans Testen Ihrer Website.

Mobile First-Indexierung: Testen Sie Ihre Website

Ob Ihre Website den Anforderungen von Google entspricht, können Sie ganz einfach und schnell testen. Suchen Sie nach Ihrer URL auf dieser Seite. Nach wenigen Sekunden werden Sie wissen, ob das responsive Webdesign und die Webentwicklung den aktuellen Maßstäben entspricht.

Falls nicht, erfahren Sie, welche Verbesserungen Sie vornehmen können. Das ist ein großartiger Ausgangspunkt, um die Reaktionsfähigkeit Ihre Website auf verschiedene Bildschirme zu verbessern und Ihre Site für mobile Endgeräte zu optimieren.

Diese Tests achten im Allgemeinen auf die UX, einschließlich Textgröße, Bildqualität und die Ladezeit der Site. Der Google-Test berücksichtigt auch die Größe von Buttoms, Links zu Social Media-Profilen, Popups und viele anderen Funktionen.

Die Testergebnisse können Ihnen die notwendige Grundlage bieten, um Ihre Website für mobile Nutzer benutzerfreundlicher zu gestalten. Das bringt Ihnen nicht nur zufriedenere Nutzer und Kunden, sondern auch eine Verbesserung Ihrer organischen Suchmaschinenoptimierung.

Es gibt verschiedene Möglichkeiten, um zu überprüfen, ob Ihre mobile Site schon vom Google-Crwalbot indexiert wurde oder nicht:

  • E-Mail: In der Regel benachrichtigt Google Seitenbetreiber, sobald die mobile Website indexiert wird. Wenn Sie Benachrichtigung erhalten, heißt das, dass der Wechsel zur Mobile-First-Indizierung bereits vor einigen Tagen oder wenigen Wochen stattgefunden hat. Falls Sie nicht sicher sind, ob diese E-Mail bei Ihnen angekommen ist, gibt es mehrere Alternativen.
  • Google Search Console: Öffnen Sie die „Einstellungen“ auf der linken Seite. Hier finden Sie alle nötigen Informationen zur Indexierung.
  • Protokolldateien: Sie können Ihr Serverprotokoll analysieren, um das genaue Datum zu ermitteln, an dem der Großteil Ihres Crawls von einem Smartphone-Agenten durchgeführt wurde.

Mobile first: Webentwicklung neugedacht

Der Mobile-first-Denkansatz hat die Webentwicklung auf den Kopf gestellt. Jeder Inhalt muss auf mobilen Endgräten eine ideale User Experience bieten und das obwohl ein Smartphone deutlich weniger Möglichkeiten bietet in Sachen Darstellung als große Bildschirme.

Daher geht mobile first Hand in Hand mit content first. Bei der Konzeption einer Website wird der Inhalt zum Herzstück. Er muss sowohl für ein Smartphone optimiert sein als auch auf große Bildschirme ausgerichtet sein. Dadurch wird bei diesem Denkansatz das Responsive Design zu einer Selbstverständlichkeit.

Die wichtigsten Elemente

Führen Sie zunächst eine Content-Inventur durch. Erstellen Sie eine Tabelle mit allen Elementen, die Ihre Website beinhalten sollte. Denken Sie dann über die visuelle Hierarchie Ihrer Site nach und markieren Sie jene Elemente, die besonders wichtig sind und prominent angezeigt werden sollen.

Entwerfen Sie als Nächstes das Wireframe-Modell Ihrer Website. Bedenken Sie dabei, dass ein Finger deutlich breiter ist als ein Mauszeiger. Daher sollten Sie alle interaktiven oder verlinkten Elemente entsprechend größer denken. Geben Sie den Hyperlinks viel Platz, vergrößern Sie die Buttons und stellen Sie sicher, dass um alle interaktiven Elemente herum genügend Platz vorhanden ist.

Vermeiden Sie große Grafiken. Landschaftsfotos und komplexe Grafiken werden nicht gut angezeigt, wenn Ihr Bildschirm nur wenige Zentimeter breit ist. Beim mobile first-Prinzip geht es schließlich darum, mobile Nutzer mit lesbaren Inhalten und Bildern zu versorgen.

Überprüfen Sie die Ladegeschwindigkeit

Auf die Ladegeschwindigkeit Ihrer Website legt Google immer mehr wert. Laut dem Konzern verlassen 52% der Internetnutzer eine Website, die nach 3 Sekunden noch immer lädt. Smartphones haben das Internet überall verfügbar, auch unterwegs. Mobile User benötigen daher einen schnellen Zugriff auf die gewünschten Informationen. Das macht Geschwindigkeit für eine positive Benutzererfahrung erforderlich.

Google hat ein weiteres nützliches Tool, das die Geschwindigkeit Ihrer Seite misst. Seiten mit längeren Ladezeiten haben normalerweise eine höhere Absprungrate. Die Seitengeschwindigkeit ist auch eines der Signale, die der Google-Algorithmus zum Ranking von Webseiten verwendet.

Vermeiden Sie Popups

Popups können die mobile Suchmaschinenoptimierung beeinträchtigen. Im August 2016 kündigte Google an, Seiten mit aufdringlichen Popups in den Suchergebnissen zu bestrafen. Da die Bildschirme von mobilen Endgeräten viel kleiner sind, erschweren Popups den Zugriff auf Inhalte erheblich.

Wenn Sie Interstitials auf Ihrer Website verwenden, beschränken Sie diese auf das unbedingt Notwendige. Google erkennt an, dass einige Popups unvermeidlich sind, z. B. die gesetzliche Verpflichtung zur Verwendung von Cookies oder die Altersüberprüfung. Vollbildanzeigen werden von der Suchmaschine jedoch als unnötig angesehen. Stellen Sie daher sicher, dass die Popups eine angemessene Größe haben und von Benutzern problemlos geschlossen werden können.

Ist eine Optimierung erforderlich?

Wenn Sie Ihre Website getestet haben und sie den Ansprüchen von Google gerecht wird, müssen Sie sich keine Sorgen machen. Denn das bedeutet, dass sich Ihr Webdesign und die Darstellung von Inhalten an alle Geräte anpasst.

Die Conversion-Raten auf Mobilgeräten sind jedoch um 64% höher als auf Desktop-Seiten. Wenn Sie also Ihren Umsatz steigern möchten, kann eine Optimierung Ihres gesamten Webdesigns infrage kommen.

Wenn Ihr Webdesign also nicht mehr den neuesten Trends entspricht, kann es an der Zeit sein, sie neu zu gestalten. Sollten Sie sich für eine Optimierung Ihrer Website entscheiden, sollten Sie es auf alle Fälle vermeiden, eine separate Website zu entwickeln. Dadurch riskieren Sie, dass Ihre Sites in Konkurrenz zu setzen. Ganz zu schweigen von der Tatsache, dass eine Website als doppelter Inhalt angesehen werden kann und Ihre Platzierung in den Suchergebnissen verschlechtern kann.

Fazit

Die Zahl der mobilen Nutzer steigt von Jahr zu Jahr. Die Ansprüche der User werden dabei nicht geringer. Sie fordern Inhalte, die sich ihren Bildschirmen passen, was eine für den Desktop konzipierte Site nicht liefern kann. Um Leads zu generieren, sich von der Konkurrenz abzuheben und die Anforderungen von Google zu erfüllen, ist eine Mobile-First-Site die Lösung.

⚠️ Wenn Sie Ihre Website und deren Responsive Webdesign optimieren möchten, können wir Sie mit den besten Agenturen in Ihrer Nähe in Verbindung setzen.