Mobile First – Das Motto das online zählt

Mobile First – Das Motto das online zählt

Die Mobilität und die Weiterentwicklung des Internets wachsen Hand in Hand stetig an. Unsere Lebenswirklichkeit zeigt uns, dass wir in jeder Situation  jede unbeantwortete Frage im Web aufrufen und uns informieren. Für die Anwendung sind wir als Benutzer bei derselben einfachen Ausgangslage und deren Handhabung. Eine riesige Veränderung hat in der Vergangehnheit allerdings die Darstellung des Inhalts erfahren auf welchen wir diese Inhalte aufrufen und betrachten. Die Anzhal der verschiedenen Displaygrößen und Displayformate wächst stetig an und war noch nie so riesig wie heute. Jeder Hardware-Hersteller vermarktet sein eigenes Gerät, seine eigene Materialanordnung und letztlich seine eigenen Display-Formate. Zum einen ermöglicht dies natürlich viel Spielraume für inhaltliche Ansätze, andererseits erschwert es gerade für die vielen UI/UX-Designers das passende Design kompatibel für alle Geräte zu machen. Was aber für alle gilt ist das Motto Mobile First.
Dieser Artikel zeigt Dir , auf was ihr achten müsst bei der Erstellung von interaktiven Display-Visualisierungen (hier vor allem Webseiten).

Ausgangslage hinsichtlich des Mobile First

Noch vor knapp drei Jahren richtete sich bei einem Launch einer Website  hinsichtlich des Layouts alles ausschliesslich an Desktop-Versionen aus. Im Jahr 2018 hat Google sich erstmals dem Thema Mobile First angenommen und einen Parameter für den Hauptindex von Webseiten erstellt. Lange Zeit wurde darüber spekuliert, in wie weit Google für die Bewertung der Seiten nicht zwei unterschiedliche Indizes verwendet – einen für mobile Endgeräte und einen für Desktops. Retrospektiv kann man sagen, dass dies nicht der Fall war, da sich Google ganz eindeutig für die „Mobile First“-Indexierung entschieden hat, was der rasante Anstieg von mobilen Endgeräten  unterstreicht.

What’s next


Wie die aktuelle Entwicklung unweigerlich verdeutlicht, werden die mobilen Endgeräte betreffend Nachfrage immer weiter steigen und dementsprechend gegenüber Desktops auch zukünftig überlegen sein. Zumondest Stand heute ist keine Trendwende absehbar.
 Deshalb ist es  für jeden Admin essentiell wichtig sich zu vergewissern, dass seine Website auf mobilen Geräten problemlos funktioniert. Setze von Anfang an den Fokus auf die Darstellung auf den mobilen Endgeräte und sei Dir bewusst, dass bei der Anwendung die Vergrößerung des Contents deutlich einfacher erfolgt als die Verkleinerung.

Mobile-First = Content-First


An dieser Stelle scheint mir der Hinweis wichtig, dass der Mobile-First-Ansatz auch als Content-First-Ansatz zu verstehen ist. Die Mobile-Version ist u.a. betreffend der Screengrösse stark eingeschränkt. Die Bildschirmfläche und die verschiedenen Bandbreiten fordern Dich stets auf, Deinen Inhalt unweigerlich zu positionieren. Wie auch immer, das Herzstück Deiner Webseite ist und bleibt immer der Inhalt und an diesem gilt es sich primär auszurichten. Solange die Gestaltungselemente der Webseite und der Mobile-First-Ansatz gemeinisam berücksichtigt werden, steht einem gelungenen Webdesign nichts im Wege.

Breakpoints


Bei der Gestaltung von interaktiven Webseiten gilt es zu berücksichtigen, wann ein Umbruch auf ein neues Format vollzogen wird. Die Grafik zeigt die drei Grundformate, welche im Fachbereich als Norm gelten und als solche als ‘Breakpoint’ bezeichnet werden.

Mobile vs. Desktop


Eine wichtige Diskrepanz ist allerdings stets zentral: mobile User benötigen teilweise andere Inhalte als Desktop-Benutzer. Stelle Dir darum schon zu Beginn  Deines Projektes die Frage: Was benötigt ein Desktop-Benutzer in einer bestimmten Situation und was ein mobiler Benutzer? Gerätespezifische Inhalte können anhand des Kontexts beurteilt werden: was wird Dein Benutzer in welcher Situation und in welch gegebener Umgebung mehr schätzen? Der zielführende Weg, um diese Frage zu beantworten und die Bedürfnisse abzudecken, ist die Planung und das Erstellen von Benutzerszenarien.

Es besteht ein wesentlicher Unterschied zwischen einem Desktop- und einem Mobilgerät in der Bedienung. In den meisten Fällen wird bei der Desktop-Version mittels Maus navigiert und gearbeitet, hingegen bei mobilen Geräten oder Tablets die Finger des Users oder ein Stift zum Einsatz kommen. Diese unterschiedliche Funktionshandhabung führt beispielsweise dazu, dass Animationen und „Call-to-Actions“ nicht gleich ausgeführt werden können. Es ist fast selbstverständlich, aber viele UI/UX-Designers verlassen sich bei ihrer interaktiven Arbeit häufig auf ‚Hover‘- und ‚Mouseover-Effekte‘, die nur bei Desktop-versionen zum Tragen kommen.

Testing

Nachdem Du Deine Webseite fertiggestellt hast, kontrolliere den Inhalt und die Visualisierung nicht nur auf unterschiedlichen Geräten der gleichen Marke. Vor allem solltest Du die Inhalte sowohl auf Android- als auch auf IOS- Geräten checken, da es auch hier immer zu verschiedenen Fehlern kommt. Dasselbe gilt für die verschiedenen WEbbrowser (zimindest die Marktführer, um potentielle optische Fehler zu vermeiden.

 

Weitere Informationen rund um das Thema „Mobile First“ findest Du hier.

Falls Deine Webseite den Ansatz „Mobile First“ noch nicht berücksichtigt und Du Unterstützung benötigst melde Dich gerne bei uns, wir helfen gerne weiter.