Newsletter Anmeldung:
Newsletter Anmeldung:

Marktplatzentwicklungen von real.de sowie aktuelle Trends und Services rund um die E-Commerce Branche - abonnieren Sie unseren Newsletter und bleiben Sie auf dem Laufenden.


Was ist Mobile First?

Umsetzung in der Praxis, Vor- und Nachteile

Immer mehr Menschen surfen mit mobilen Geräten wie Smartphones im Internet, woraufhin Webdesigner den Mobile-First-Approach entwickelt haben. Was sich dahinter verbirgt, welche Chancen und Risiken das Konzept bietet und welche Alternativen es gibt, klären wir im folgenden Beitrag.

1. Mobile First – Definition

Mobile First bezeichnet einen Ansatz zur Webseitenplanung und -erstellung, der folgenden Prämissen folgt:

  • Internetseiten werden zuerst für den kleinsten Bildschirm, also für mobile Endgeräte wie Smartphones entworfen und optimiert.
  • Erst im Anschluss werden die Webseiten für Desktop-Computer und höhere Bildschirmgrößen angepasst und ggf. erweitert.
  • Hintergrund ist, dass Online-Inhalte immer öfter von Mobilgeräten aufgerufen werden und die User-Experience unter nicht entsprechend optimierten Seiten leiden kann.

Populär gemacht wurde der Denkansatz erstmals 2009 von dem gegenwärtig für Google tätigen Luke Wroblewski. Heute ist Mobile First erneut (oder noch immer) ein zentrales Thema für Webmaster, da mobiles Internet verbreiteter ist als je zuvor.

2. Mobile First in der Praxis

Die Idee hinter Mobile First mag also im ersten Moment simpel klingen. Doch wie kann die Strategie in die Praxis umgesetzt werden? In den folgenden Abschnitten gehen wir auf inhaltliche sowie technische Möglichkeiten zur Realisierung des Konzeptes ein.

2.1 Gestalterische und inhaltliche Umsetzung

Möchten Sie Ihre Website für Smartphones optimieren, sollten Sie sich zum einen um gestalterische und inhaltliche Aspekte kümmern. Gemeint sind in diesem Fall Elemente, die der User auf einer Seite sehen und mit denen er gegebenenfalls auch interagieren kann. Anhand von drei Bereichen zeigen wir Ihnen exemplarisch, wie die Optimierung für Mobile First aussehen könnte.

Layout Mobile First

  • Layout: Aufbau und Struktur der Seite müssen den kleinen Bildschirmen von Handys gerecht werden. Überlegen Sie, welche Bereiche immer sichtbar sein sollen und welche beispielsweise hinter Drop-Down-Menüs versteckt werden können, um Platz zu sparen.

Funktionalität Mobile First

  • Funktionalität: Unter diesen Punkt fallen zum Beispiel interaktive Elemente – etwa Anmelde-Buttons. Damit der Nutzer sie auch mit Daumen oder Fingern komfortabel bedienen kann, sollten sie eine bestimmte Mindestgröße aufweisen. Sie könnten sogar darauf achten, wichtige Schaltflächen so auf der Webseite zu positionieren, dass sie auch bei einhändiger Bedienung des Smartphones leicht erreicht werden können.

Content Mobile First

  • Content: Der Content einer Internetseite sollte ebenfalls auf Mobilgeräte zugeschnitten sein. Texte können mit Zwischenüberschriften in kompakte Abschnitte gegliedert, wichtige Argumente und Informationen in Infografiken präsentiert werden. Bilder und Videos sollten Sie in verringerter Größe einbinden.

2.2 Technische Möglichkeiten zur Umsetzung

Mobile First kann die Webentwicklung durchaus vereinfachen, da entsprechende Seiten nahezu ausschließlich in HTML5 programmiert werden können – JavaScript zum Beispiel ist nicht (mehr) erforderlich. Doch wie kann solch eine auf Smartphones zugeschnittene Seite so bereitgestellt werden, dass die User Experience auch auf größeren Bildschirmen überzeugend ausfällt?

Um eine Webseite für verschiedene Displaygrößen zu optimieren gibt es grundsätzlich drei Methoden, unabhängig davon, ob bei der Erstellung der Mobile-First-Ansatz gewählt wurde oder nicht:

  • Responsive Design Mobile FirstHTML-Code und URL einer Seite sind in der mobilen und der Desktop-Ansicht identisch. Mithilfe von CSS-Befehlen wird die Webseite so an das jeweilige Endgerät ausgespielt, dass sich das bestmögliche Ergebnis ergibt – ausschlaggebend ist die Bildschirmgröße.
  • Dynamische Bereitstellung Mobile FirstDie URL einer Internetseite bleibt identisch, allerdings wird je nach Art der vom Nutzer verwendeten Hardware anderer HTML- und CSS-Code ausgespielt.
  • Verschiedene URLs Mobile FirstEine Webseite wird unter zwei URLs mit unterschiedlichem HTML-Code angeboten und der User je nach Art des Endgerätes entweder auf die Desktop- oder die mobile Version geleitet.

Google empfiehlt in seinem Leitfaden zur Optimierung von Internetseiten für Mobilgeräte das Responsive Webdesign. Tatsächlich können sich Mobile First und Responsive Design gegenseitig ergänzen: Die grundlegende Funktionalität der Seite bleibt identisch, für die Desktop-Variante können indes sinnvolle Erweiterungen eingeführt werden. Ein Menü kann beispielsweise auf dem Smartphone als Drop-Down und auf dem Desktop vollständig angezeigt werden. Technisch wird dies durch CSS-Befehle ermöglicht, die den HTML-Code so an das entsprechende Gerät ausspielen, dass sich die jeweils bestmögliche Darstellung ergibt.

Wenn Sie herausfinden möchten, ob Ihre Webseite mobilfreundlich ist, können Sie einen von Google bereitgestellten Test nutzen. Sie können sowohl die URL als auch den Code Ihrer Seite eingeben. Der Algorithmus analysiert anschließend verschiedene relevante Faktoren, unter anderem:

  • Breite des Inhaltes: Kann die Seite sauber auf kleinen Displays dargestellt werden?
  • User-Freundlichkeit: Lassen sich Buttons und Schaltflächen komfortabel mit den Fingern und auf kleinen Bildschirmen bedienen?
  • Textgröße: Sind die Texte leicht und ohne zu zoomen lesbar?

Die Ergebnisse des Tests können Ihnen erste, wichtige Hinweise darauf geben, inwiefern Ihre Seite für mobile Endgeräte optimiert werden sollte.

 

Google Mobile Test

3. Mobile First und SEO

Mit der neuen Mobile-First-Indexierung trägt auch Google dem stetig steigenden Trend hin zum mobilen Surfen Rechnung. Was genau das für Webmaster und SEOs bedeutet, haben wir für Sie zusammengefasst:

  • Der Googlebot crawlt verstärkt die mobilen Versionen von Webseiten
  • Desktop-Seiten, die keine mobile Version besitzen, werden weiterhin indexiert
  • Bei neuen Internetseiten wird stets die Mobilvariante berücksichtigt
  • Google unterhält nach wie vor nur einen Suchindex; eine Trennung zwischen Mobil und Desktop gibt es nicht

Ob Sie Ihre Webseite für die Mobile-First-Indexierung vorbereiten müssen, hängt laut Google vor allem davon ab, wie Ihre mobile Seite ausgespielt wird:

Responsive DesignResponsive Design: Eine Anpassung ist nicht nötig, da Code und URL identisch sind

Dynamische BereitstellungDynamische Bereitstellung und separate URLs: Eine Anpassung kann nötig sein, wenn die Seite ursprünglich nicht auf Basis des Mobile-First-Ansatzes entstanden ist (die Mobilseite sollte alle zentralen Funktionen und Inhalte enthalten)

Zu beachten ist, dass es noch weitere Rankingfaktoren neben einer vollständigen oder vollwertigen mobilen Ansicht gibt. Ob die Seite mobile-friendly ist, also zum Beispiel wenige Daten verbraucht und eine schnelle Performance bietet, analysiert Google genauso wie auch die Nutzerfreundlichkeit. All diese Faktoren fließen dann in das Rating der Suchergebnisse ein.

Weitere Tipps, wie Sie Ihre Internetseite für mobiles Surfen und vor allem für den Mobile-First-Index optimieren, erhalten Sie in einem entsprechenden Artikel von Google.

4. Vor- und Nachteile von Mobile First

Den Fokus bei der Webentwicklung von Anfang an auf Mobilgeräte zu legen, kann Mehrwerte mit sich bringen. Doch es gibt auch Stimmen, die auf mögliche Probleme von Mobile First hinweisen.

Vorteile von Mobile First

Höhere Benutzerfreundlichkeit: Der begrenzte Platz bewirkt, dass nur die Benutzerfreundlichkeit Mobile Firstwichtigsten Funktionen auf der Webseite enthalten sind und diese somit befreit von unnötigem Ballast ist.

Schlankerer Code Mobile First

Schlankerer Code: Internetseiten, die für mobile Geräte entwickelt werden, können mit effizienterem Code programmiert werden, da zum Beispiel JavaScript obsolet ist. Dies bewirkt gleichsam, dass sie leichter gepflegt werden können.

Arbeiten Mobile FirstFokussierter arbeiten: Da mobile Seiten nur begrenzten Platz aufweisen, können sich Web-Developer und Content-Creator ganz auf relevante Features konzentrieren und sie optimieren.

Performance Mobile FirstSchnellere Performance: Indem die Internetseiten nur die wichtigsten Elemente enthalten und außerdem beispielsweise auf große Bilddateien verzichtet wird, ist die Performance in aller Regel besser als bei Desktop-Seiten.

Zukunftssicherheit Mobile FirstZukunftssicherheit: Nutzer surfen zunehmend mit dem Handy – ein Trend, der sich in Zukunft nicht ändern dürfte.

Sichtbarkeit Mobile FirstBessere Sichtbarkeit: Google setzt seit einiger Zeit auf einen mobilen Index, das heißt, dass überwiegend die mobile Version einer Webseite für das Ranking herangezogen wird. Bei neu veröffentlichten Seiten wird grundsätzlich die mobile Seite vom Google-Bot gecrawlt.

Mögliche Nachteile von Mobile First

Desktop-Experience Mobile FirstSchlechtere Desktop-Experience: Möglichkeiten, die größere Displays böten, könnten ungenutzt bleiben, was die Usability der Seite am Desktop verschlechtern könnte.

Zielgruppe Mobile FirstMissachtung der Zielgruppe: Wird eine Webseite (noch) mehrheitlich am Computer und nicht mobil aufgerufen, wird eine reine Mobile-First-Optimierung dieser Nutzung durch die Zielgruppe unter Umständen nicht gerecht.

5. Mobiles Internet – Vergangenheit und Zukunft

Heute ist Surfen unterwegs für uns selbstverständlich: Moderne Handys können die meisten Webseiten problemlos darstellen und dank 3G sowie LTE sind auch Multimediainhalte oft in Windeseile aus dem Netz geladen. Doch das war nicht immer so. Wir werfen einen Blick auf die Vergangenheit, Gegenwart und mögliche Zukunft des (mobilen) Internets.

5.1 Rückblick und Gegenwart

Lange Zeit wurden überwiegend (Desktop-)Computer mit Monitoren für die Internetnutzung genutzt, weshalb Webseiten stets für diese Geräte entwickelt und optimiert wurden. Einer der zentralen Punkte, die Webmaster dabei berücksichtigen mussten, war die verfügbare Übertragungsbandbreite, also die Surfgeschwindigkeit.

56k-Modems, die lediglich einige Kilobits pro Sekunde übertragen konnten, wären mit aufwendigen Internetseiten, großen Bildern oder hochauflösenden Videos schnell überfordert gewesen. Dementsprechend simpel waren die Seiten früher aufgebaut. Erst die flächendeckende Einführung von DSL ungefähr ab den späten 1990er-Jahren und später VDSL ermöglichte optisch wie technisch ausgefeilte Webseiten, im Stil, wie wir sie heute kennen.

Geschwindigkeiten von Übertragungstechnologien im Vergleich

Um Ihnen einen Eindruck zu vermitteln, wie sehr sich die Internetgeschwindigkeit in den vergangenen Jahren und Jahrzehnten weiterentwickelt hat, haben wir zwei Übersichtsgrafiken über stationäre sowie mobile Übertragungsstandards erstellt:

Internet Übertragungsstandard im Vergleich
Mobiles Internet Übertragungsstandards im Vergleich

Mit der Einführung von internetfähigen Handys standen die Webdesigner vor neuen Herausforderungen, denn die Desktop-Internetseiten waren vor allem aus zwei Gründen nicht ohne Weiteres für die mobile Nutzung geeignet:

  1. Die mobilen Datenübertragungsraten, etwa von 2G (GSM, GPRS, EDGE), waren bzw. sind begrenzt.
  2. Die Webseiten waren weder für die Ansicht noch die Benutzung auf kleinen Bildschirmen ausgelegt, weil die Schrift zum Beispiel zu klein dargestellt wurde.

Frühe Dienste wie WAP und i-mode, die spezielle Webinhalte für Handys bereitstellten, konnten nur ein sehr eingeschränktes Surferlebnis bieten. Erst als immer mehr Mobiltelefone HTML unterstützten und Desktop-Seiten mehr oder minder vollständig angezeigt werden konnten, wurde das mobile Internet massentauglich. Die Etablierung schnellerer Übertragungsstandards und zunehmende Verfügbarkeit von WLAN trieben diesen Trend ebenso voran.

Um den kleinen Bildschirmen und der Handhabung von Mobilgeräten gerecht zu werden, entwickelten Webdesigner verschiedene Strategien, um Desktop-Seiten entsprechend anzupassen. Die zuvor beschriebenen Ansätze des responsiven Designs, der dynamischen Bereitstellung von Internetseiten sowie das Erstellen von zwei unabhängigen Seiten mit unterschiedlichen URLs sind Beispiele hierfür.

Der Mobile-First-Ansatz kann als ein vorläufiger Höhepunkt der Entwicklung bezeichnet werden. Dass die Nutzer auch in Zukunft immer öfter und ausgiebiger unterwegs im Internet surfen, ist einigermaßen sicher. Doch ist es deshalb ideal, die Priorität beim Webdesign strikt auf mobile Endgeräte zu setzen? Immerhin bewegen sich die Menschen ebenso nach wie vor häufig mit anderer Hardware durch das Netz – mit Computern, aber beispielsweise auch mit Smart-TVs und Spielekonsolen.

5.2 Alternative Ansätze und Ausblick

Um dem individuellen (und oft nicht ausschließlich mobilen) Surfverhalten der Nutzer gerecht zu werden, haben sich auch verschiedene weitere Denkansätze entwickelt, die sich als Alternative zu Mobile First verstehen. Dazu zählen unter anderem:

  • User-First-Design
  • Journey-Driven-Design

Beiden Konzepten gemein ist, dass sie die Fokussierung während der Konzeption und Umsetzung von Internetseiten verschieben. Ist die Vorgehensweise bei Mobile First vor allem auf die Hardware (Displaygröße) ausgerichtet, stellen User-First- und Journey-Driven-Design den Nutzer in den Mittelpunkt und seine Ziele oder Absichten, mit denen er auf einem bestimmten Gerät das Internet nutzt.

Kerngedanken hinter dem User-First- und Journey-Driven-Design sind insbesondere:

  • Nutzer stellen andere Anforderungen und verfolgen andere Ziele an eine Website, wenn sie sie auf unterschiedlichen Geräten aufrufen.
  • Entsprechend sollten Design und Funktionsumfang von mobilen und stationären Seiten auf diese verschiedenen Bedürfnisse und die Intention des Nutzers abgestimmt werden.
User-Driven-Design

Nähere Informationen zur User-First-Strategie finden Sie in diesem Artikel. Das Journey-Driven-Design wird derweil in diesem Beitrag ausführlich dargestellt.

Verkaufen Sie noch nicht als Händler auf real.de?

 

Mit rund 19 Millionen Besuchern im Monat zählt real.de zu den größten Marktplätzen Deutschlands. Die hohe Markenbekanntheit von real.de bietet Ihnen optimale Reichweitenstärke für Ihre Angebote.

 

Servicevorteile für Händler:

  • Über 10 Online- und Offline-Marketing-Kanäle inklusive
  • 12 Bezahlmethoden inbegriffen
  • Vielfältige automatisierte Anbindungsmöglichkeiten
  • Faire Konditionen
  • Keine Vertragslaufzeiten
  • Keine versteckten Kosten

 

Weitere Informationen zu Ihren Möglichkeiten als Händler auf real.de finden Sie in unserem Händlerbereich oder starten Sie direkt durch und melden sich an – als Händler auf real.de.

 

Ihre Adresse für mehr Umsatz

Schreiben Sie einen Kommentar

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