Themen / Webdesign

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?

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.

Schaubild: Mobile, Tablet, Desktop

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 euch 5 mögliche standard Breakpoints die ihr nutzen könnt.

Fünf Breakpoints

Vorteile von Mobile First Design

Mobile First Design kann viele Vorteile bringen. Wir zeigen dir drei von von ihnen:

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 kann rund um die Uhr Webseiten besucht werden, in online Shops eingekauft werden 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 Webseite 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 solltet ihr bei der Umsetzung achten

Umsetzungstipps für Mobile First Design

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 deine Anwendung / Webseite und deine Zielgruppe und 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 dir gerne bei der richtigen Strategieentwicklung und Umsetzung deines Projektes.

codeblick


Wir sind eine Digital- & E-Commerce Agentur mit einem hochqualifizierten Expertenteam. Wir entwickeln auch für Sie und Ihr Unternehmen den passenden und effektiven digitalen Weg und stehen Ihnen als Ihr Partner bei der Digitalisierung zur Seite.

Bereits zahlreiche Kunden aus ganz Deutschland werden von uns unterstützt, schenken uns Ihr Vertrauen und lassen Sich von neuesten Technologien sowie modernstem Know-How & Lösungen täglich begeistern.

Wir sind eine qualifizierte und erfahrene Contentful- und Shopware Partner Agentur, sowie Partner von Facebook, Google und vielen weiteren. Kurz gefasst: Digitale Lösungen sind unsere Stärke - Lassen Sie uns gemeinsam digital überzeugen!

Google Partner Agentur codeblick aus Augsburg
Shopware Partner Agentur codeblick aus Augsburg, München und Umgebung.
codeblick Ihre Contentful Agentur aus München.

Suchen Sie einen Partner mit dem Sie Ihr Vorhaben umsetzen können?