Mobile First


Mit dem Begriff Mobile First wird ein Konzept für das Webdesign sowie die Konzeption von Webseiten bezeichnet. Dieses Konzept sieht vor, dass die für mobile Endgeräte optimierte Version zuerst entsteht und sukzessive Erweiterungen stattfinden. Damit folgt die Strategie „Mobile First“ dem Trend, dass immer mehr Nutzer mit dem Smartphone oder Tablet im Internet surfen und nicht mit dem Desktop.

600x400-mobilefirst-01.png

Hintergrund[Bearbeiten]

Die Webentwicklung sowie das Webdesign haben sich von Beginn an ausschließlich auf die Ausrichtung von Websites für stationäre Desktops konzentriert. Zunächst war das Design jedoch aufgrund der geringeren Downstream-Bandbreiten relativ schlicht, denn der Anschluss an das Internet erfolgte in den 1990er-Jahren noch per Einwähl-Modem und Geschwindigkeiten von maximal 54 kbit/s. Folglich mussten Design sowie Funktionalität an die Surfgeschwindigkeit angepasst werden. Doch schließlich konnten Websites immer mehr Features bieten, denn die Downloads wurden dank DSL immer schneller. Mit Highspeed-Internet via VDSL lassen sich je nach Region Geschwindigkeiten von mehr als 100 Mbit/s erzielen. Die Ladegeschwindigkeiten moderner Websites könnten heute mit einem herkömmlichen Einwähl-Modem nicht mehr realisiert werden.

Doch während sich die Internetzugänge Zuhause schnell weiterentwickelten, entstand parallel dazu auch das mobile Internet, das von Beginn an mit dem GSM-Standard möglich war und mit WAP eine erste Spezialisierung erfuhr. Nachdem auch die mobilen Datenverbindungen sukzessive schneller wurden und heute mit der vierten Mobilfunkgeneration LTE bzw. LTE+ ihren vorläufigen Höhepunkt hatten (Stand Mai 2014), wurde auch die mobile Internetnutzung immer populärer. So nutzten bspw. in Deutschland im Jahr 2016 gut 80 Prozent der Internetuser auch ihr Smartphone zum Surfen.[1]

Im Zuge dieser Parallelentwicklung müssen sich Webdesigner, Webmaster und auch SEOs immer häufiger fragen, wie Inhalte für mobile Endgeräte optimiert werden können. Die mobile Optimierung ist eine Konsequenz aus diesen Überlegungen. Dieser liegt die Vorgehensweise zugrunde, sich beim Design von Darstellung und Bedienbarkeit einer Webseite zunächst an der mobilen Usability zu orientieren. Damit löste Mobile First den bisherigen Lösungsansatz des Responsive Designs ab.

Das Prinzip[Bearbeiten]

Üblicherweise wird eine Website für Desktops konzipiert. Webdesigner und Programmierer entwickeln demnach umfangreiche Funktionen und Grafiken, die sowohl auf große Bildschirme als auch auf schnelle Datenverbindungen ausgelegt sind. Eine mobile Version eines Shops oder einer Website wird erst im zweiten Schritt geplant und ist meist nur eine Art „Anhängsel“ der Hauptseite. Im Sinne von Mobile First werden die Prioritäten anders gesetzt.

So entstanden zunächst mobile Unterseiten, gekennzeichnet durch ein m. vor dem Domainnamen (Beispiel: m.ryte.com). Auf diese Seiten griffen User ausschließlich über ihr Smartphone zu. Bald stellten sich mit diesen mobilen URLs aber erste Probleme ein. Allen voran im Design. Oft wich dieses stark von dem der Homepage ab, sodass keine Assoziation bzw. kein Wiedererkennungswert zwischen den beiden Page-Varianten entstehen konnte. Ein weiteres Problem war die große Anzahl unterschiedlicher Displaygrößen bei den Smartphones.

Weil eine einheitliche Darstellung mobiler Webseiten nicht möglich war, entwickelte man ein dynamisches Design, das seit etwa 2010 den Standard mobilfreundlichen Designs markierte, das Responsive Design. Hierbei werden mittels Media Queries einzelne Design-Elemente im CSS so gesteuert, dass sich die Webseitendarstellung durch Skalierung an die Browsergröße anpasst. So wird vermieden, dass der User bei der Betrachtung am Smartphone-Display zoomen muss oder Elemente der Seite in der mobilen Darstellung ungewollt abgeschnitten werden.

Ein Manko des Responsive Designs war, dass manche Seiten auf dem Smartphone im „Endlosmodus“ angezeigt wurden, der User also unendlich scrollen musste, um ans Ende einer Seite zu gelangen. Die Lösung war dann oft, das mobile Design zu entschlacken. Texte also zu kürzen, Bilder und Grafiken auszublenden und ähnliche Maßnahmen. Darunter leidet aber zusehends die Usability, die man damit ursprünglich verbessern wollte, weil sie mobilen Nutzern nur einen Teil der Inhalte zur Verfügung stellt.

Aus dieser Problematik wurde das Prinzip Mobile First geboren. Dabei werden die Prioritäten andersherum gesetzt. Das Design bzw. die Struktur einer Website orientiert sich an der Darstellung auf mobilen Endgeräten, allen voran Smartphones. Diesem Ansatz liegen folgende Überlegungen zugrunde, die die Basis des zukünftigen Webseitendesigns bilden:

  • Was ist der zentrale Aspekt meiner Seite?
  • Welche Elemente meiner Website sind für das Webdesign unbedingt nötig?
  • Welche Bereiche sollen unbedingt auf Desktops und mobilen Endgeräten funktionieren?
  • Für welche Bildschirmgröße sind meine Inhalte ausgelegt?


Die Konzeption einer Website wird somit auf das Rudimentäre und das Wesentliche beschränkt. Es wird nicht mehr als nötig programmiert und eingerichtet, um eine maximale Funktionalität auf allen Endgeräten zu erzielen. Skizzen von Webseiten werden direkt für die Smartphone-Bildschirme entworfen. Auf diese Weise bleibt kein Platz für große Bilder oder Funktionen. Diese für das Smartphone optimierten Elemente werden auf der Homepage dann flächengreifender angeordnet.

Doch nicht nur die optisch sofort ersichtlichen Bereiche werden radikal gekürzt, sondern auch der Quellcode. Funktionen wie JavaScript werden z.B. üblicherweise bei Mobile First überhaupt nicht berücksichtigt. Die Seite selbst kann sofort in HTML5 programmiert werden.

Die Vorteile[Bearbeiten]

Wer die Strategie des Mobile First verfolgt, kann von vielen Vorteilen profitieren. Zum einen wird er damit dem Trend gerecht, mit Smartphones im Internet zu surfen. Eine mobile Optimierung findet somit automatisch schon zu Beginn der Websitekonzeption statt. Und die ist umso wichtiger, als dass mobile Endgeräte durch verbesserte Touchsteuerung oder Ausrichtungserkennung des Smartphones zunehmend funktionaler werden.

Doch auch die Desktopversion kann von Mobile First profitieren. Denn im Grunde handelt es sich nicht um einen Design-Ansatz, sondern um einen Content-bezogenen Ansatz: nur die wichtigsten Inhalte kommen auf der Seite vor und nur das Wesentliche wird dargestellt. Wer seine Website später noch um weitere Funktionen erweitern will, kann das problemlos tun. Zudem kann eine für mobile Endgeräte optimierte Seite aufgrund der schlankeren Struktur leichter an neue Entwicklungen angepasst werden als eine herkömmlich programmierte Website.

Kritik an Mobile First[Bearbeiten]

Kritische Stimmen glauben, dass man sich bei der Konzeption einer Website beim Mobile-First-Prinzip sehr einschränkt. So seien zwar viele Seiten mittlerweile auf eine mobile Bedienfreundlichkeit optimiert, die User Experience am PC würde darunter aber oft leiden, weil die Usability unnötig verkompliziert würde. Etwa müsste man einzelne Bedienfelder in versteckten Navigationsleisten suchen [2]. Ein weiterer Kritikpunkt ist, dass für mobile Geräte aufgebaute Seiten, in der Desktop-Variante zu minimalistisch wirken könnten.

Alternative Ansatzpunkte wie User First Design [3] oder Journey-Driven Design [4] rücken das Nutzerverhalten in den Vordergrund der Webseitengestaltung. Dabei wird unter anderem die Tatsache berücksichtigt, dass viele Nutzer auf dem Smartphone oder Tablet andere Inhalte konsumieren, als am Desktop oder Smart-TV.

Mobile First, Google und SEO[Bearbeiten]

Google hat die Bedeutung von Mobile First nochmals verstärkt, seit der Suchmaschinenkonzern die Mobile Friendliness 2016 zum Rankingfaktor und später den mobilen Index zum primären Index gemacht hat. Statt der Desktopversion wird seitdem die mobile Webseitenversion gecrawlt.

Mobile First hat auch Auswirkungen auf die Suchmaschinenoptimierung. Elemente wie Voice Search, als Suche via Spracheingabe und Page Speed nehmen an Bedeutung zu. Die Optimierung hierauf sollte von Mobile First Seiten besondere Priorität erfahren.

Einzelnachweise[Bearbeiten]

  1. Mobile Internetnutzung über Handy in Deutschland statista.com. Abgerufen am 02.11.2018
  2. Mobile First Not Mobile Only, Studie der Nielsen Norman Group nngroup.com. Abgerufen am 02.11.2018
  3. User First Design uxbooth.com. Abgerufen am 02.11.2018
  4. Journey Driven Design pegasusone.com. Abgerufen am 02.11.2018

Weblinks[Bearbeiten]