Mobile First Design
Das Smartphone begleitet uns tagtäglich. Ob Zuhause, in der Straßenbahn, im Supermarkt oder im Cafe, es ist so gut wie immer griffbereit und wir lassen es kaum aus den Augen. Der Stellenwert und auch das Einsatzgebiet von unseren kleinen Helfern weitet sich immer mehr aus. Neben Chatnachrichten, Social Media, Kalenderfunktionen und vielem mehr werden auch täglich Webseiten aufgerufen. Die kleinen Displays verlangen eine gesonderte Darstellung gegenüber großen Bildschirmen. Was hat es mit dem Begriff Mobile First Design auf sich? Welche Vorteile bietet es und ist es immer sinnvoll es einzusetzen?
:quality(50))
:quality(50))
Was ist Mobile First Design?
Bei dem Mobile First Design Ansatz, wird von der kleinen Layout-Version hin zu größeren Versionen gearbeitet. Dabei wird zuerst das Design der Website als mobile Version optimiert und anschließend für größere Bildschirme erstellt. Durch den kleinen Screen und dadurch kleinere Fläche zum Gestalten, wird der Fokus bei der Entstehung direkt auf den Inhalt und das Wesentliche gelegt.
Standard Breakpoints
Es gibt die unterschiedlichsten Smartphones mit den verschiedensten Displaygrößen. Was bedeutet mobile überhaupt und ab wann ist ein Screen nicht mehr mobile? Wir zeigen Ihnen 5 mögliche Standard-Breakpoints die Sie nutzen können.
Vorteile von Mobile First Design
Mobile First Design kann viele Vorteile bringen. Wir zeigen Ihnen drei davon:
Höhere potentielle Reichweite
Wie bereits erwähnt begleiten uns Smartphones tagtäglich. Wir sind ständig am Handy und können zu jeder Zeit online sein. Diese ständige Bereitschaft bietet eine große potentielle Reichweite. So können rund um die Uhr Webseiten besucht werden, in Online-Shops eingekauft oder Werbung geschaltet werden. Wer hier nicht auf Mobile setzt und eine für das Smartphone gerechte Nutzung bietet, verliert mobile Käufer.
Fokussiertes Design
Durch die kleine Displaygröße hat man auch für das Platzieren von Inhalten und Elementen einen reduzierten Bereich. Hier ist eine Priorisierung dieser Elemente und Inhalte wichtig. Bedürfnisse der Zielgruppe müssen in den Vordergrund gestellt werden. Beispielsweise welche Information ist für die Zielgruppe am wichtigsten. Dadurch konzentriert sich der Inhalt der Webseite auf das Wesentliche mit der höchsten Priorisierung. Auf größeren Displaygrößen können durch mehr Platz Elemente und Funktionen mit geringerer Priorität hinzugefügt werden.
Performance Steigerung
Durch schnelle mobile Ladezeiten der Website werden diese über Suchmaschinen wie beispielsweise Google häufiger als Treffer aufgeführt, bzw. höher indexiert als langsame Seiten. Bei der Entwicklung ist darauf zu achten, dass die Größe der mobilen Webseite gering gehalten wird.
Wann ist Mobile First Design sinnvoll?
Vor einem Projektbeginn sollte eine Strategie ausgearbeitet werden. Dabei muss definiert werden, welche Zielgruppe angesprochen werden soll und welche Endgeräte diese am häufigsten nutzen. Beispielsweise sind B2B Zielgruppen häufig eher auf größeren Bildschirmen (Desktops) unterwegs als B2C Zielgruppen (muss jedoch individuell je Zielgruppe betrachtet werden). So kann entschieden werden wo die Prioritäten liegen und ob für das jeweilige Projekt ein Mobile First Design sinnvoll ist.
Umsetzungstipps
Die Umsetzung von Mobile First Design (Design auf sehr kleiner Fläche) benötigt Zeit und ein gutes Designer und Entwickler Know-how. Auf die folgenden Punkte sollten Sie bei der Umsetzung achten:
Fazit
Mobile ist notwendig in der heutigen Zeit. Wie bereits am Anfang erwähnt, gehört die Nutzung eines Smartphones für viele von uns zum Alltag, daher sollte auch unbedingt eine mobile Variante angedacht werden, um das Potenzial, das dieses Format bietet nicht zu verschwenden. Wichtig bei einem Mobile First Design Ansatz ist es, eine Strategie zu verfolgen, die angepasst ist auf Ihre Anwendung / Webseite und Ihre Zielgruppe, deren Bedürfnisse und Nutzungsverhalten!
Egal ob Mobile, Tablet, Desktop oder andere Größen, es ist über alle Breakpoints wichtig die Übersichtlichkeit zu bewahren und dem Nutzer eine intuitiv bedienbare Anwendung zu bieten. Wir helfen Ihnen gerne bei der richtigen Strategieentwicklung und Umsetzung Ihres Projektes.