Weiter zum Inhalt
logo
Mobile First Handy auf Yacht

Mobile First Design – Es ist Zeit umzudenken


Saskia Grote

Jun 28, 2023

Vor einigen Jahren sorgte das Thema Mobile First noch für große Aufmerksamkeit. Die mobile Internetnutzung nimmt noch immer zu und nicht mobil-optimierter (responsive) Content ist kaum noch vorstellbar. Das liegt vor allem auch daran, dass die Anzahl der mobilen Endgeräte weiterhin unaufhaltsam steigt. Schaut man sich heutzutage in Cafes, U-Bahnen oder Restaurants um, stellt man fest, dass die Kommunikation größtenteils über das Smartphone stattfindet. Es ist somit fast selbstverständlich, dass Websites für mobile Endgeräte optimiert werden müssen. Damit ist ein Mobile First Design für Websites nicht mehr wegzudenken.

Die Webentwicklung und das Webdesign haben sich von Beginn an auf die Ausrichtung von Websites für stationäre Desktops konzentriert. Mit der vermehrten Verwendung von Smartphones zum Surfen wurde die mobile Optimierung und damit das responsive Design von Websites immer wichtiger. Doch immer öfter hört man in der Marketingbranche auch die Bezeichnung “Mobile First”. Im Folgenden erklären wir, was Mobile First Design bedeutet, welche Vorteile es mit sich bringt und wie die Umsetzung dieses Prinzips funktioniert.

Was bedeutet Mobile First?

Mobile First lässt sich als neuer Denkansatz im Webdesign definieren. Diese Entwicklung geht mit der immer weiter verbreiteten Nutzung von Smartphones einher. Wie der Begriff schon vermuten lässt, handelt es sich dabei um einen Ansatz, bei dem das Design einer Website erstmal in der mobilen Version optimiert wird, bevor es für größere Bildschirme kreiert wird. Man arbeitet also von der kleinsten Layout-Version hin zur größten.

Die 3 größten Vorteile des Mobile First Designs

Logischerweise hat man als Webdesigner für eine mobile Ansicht im Vergleich zum Design von Desktop-Seiten wesentlich weniger viel Platz, um seiner Kreativität freien Lauf zu lassen. Das mag im ersten Moment nach einer großen Einschränkung klingen. Nach genauerem Hinsehen, ergeben sich allerdings einige Vorteile:

  1. Weniger ist mehr:
    Man konzentriert sich als Designer auf das Wesentliche, wenn man nicht so viel Platz zur Verfügung hat. Dadurch wird ein Layout zwangsläufig übersichtlicher und benutzerfreundlicher. Die vermeintliche Schwäche des Platzmangels wird demnach zu einer der größten Stärken von Mobile First. Gerade in der frühen Phase, in der man das Layout skizziert, ist es sinnvoll den Mobile First Ansatz zu integrieren, um die elementaren Bedürfnisse der Nutzer in den Vordergrund des Designs zu stellen.
  2. Not macht erfinderisch:
    Der Mobile-First-Ansatz fördert den Einsatz moderner Front-End-Entwicklungsmethoden, mit denen beispielsweise das mobile Design an verschiedenen Ankerpunkten an die Größe von Bildschirmen angepasst wird. Und wenn man sich gut mit den neuesten responsive Technologien auskennt, findet man vielleicht auch für andere Probleme innovative Lösungen.
  3. Besserer Access = mehr potentielle Reichweite:
    Der größte Vorteil eines Mobile First Designs ist ziemlich offensichtlich: Man kann viel mehr potenzielle Kunden erreichen. Denn die Entwicklung von mobilen Internetnutzern in Deutschland steigt noch immer kontinuierlich, weshalb das Thema Responsive Webdesign nicht mehr wegzudenken ist. Laut Statista nutzten im Jahr 2016 knapp 60% der Deutschen das mobile Web. 2018 waren es bereits knapp 70%. Dies verdeutlicht, wie wichtig eine gute mobile Webansicht mit adaptivem Design heutzutage ist. Darüber hinaus sind Informationen für jeden User zugänglich und jeder verfügt über dieselbe Performance und über dieselben Inhalte der Website.

Wie funktioniert die Umsetzung von Mobile First?

Welcome to mobile where the only thing you can count on is change. […] So what’s a web designer to do — get swept up in a sea of constant instability? Quite the opposite. Because things continue to be so Wild West out there, you need to be a cowboy. Take risks, try new things, and accept that not all the boundary lines between devices, browsers, and the web have been drawn yet. –  – Luke Wroblewski, Product Director bei Google und Autor von „Mobile First“

Technisch gesehen erfordert die Umsetzung von Mobile First das richtige Know-How, das vor allen Dingen von Webdesignern beherrscht werden sollte. Dennoch ist es vor allem auch für Marketer hilfreich zu wissen, wie der Mobile-First-Ansatz ungefähr funktioniert.Bei der Anwendung der Mobile-First-Strategie werdenspezielle Raster (sogenannte „Grids“) der Webseiten im Smartphone-Format erstellt und anschließend entsprechend für größere Screen-Formate skaliert. Die Raster passen sich je nach Format automatisch an die Displaygröße an und stellen Inhalte jederzeit optimal dar. Diese Anpassung verläuft aber selten reibungslos, weswegen die Verwendung von neuesten Techniken bei der Einführung von Mobile First ausschlaggebend ist. Nur so kann man dem Nutzer ein ganzheitlich optimiertes Nutzererlebnis bieten. Wenn ihr mehr über ein solches „Responsive-CSS-Grid-System“ erfahren wollt, empfehlen wir euch gesonderte technischere Beiträge, da wir mit dem Thema hier den Rahmen sprengen würden.

Denkt immer daran, dass auch euer Mobile First Design mit eurer Corporate Identity verknüpft sein muss!

Infografik Mobie First Regeln Erklärung

Was bedeutet Mobile First Design für uns Marketing-Profis?

Deshalb klären wir nun eher die Frage, was ein responsive Layout genau mit der Marketingarbeit zu tun haben soll. Fakt ist, dass das Smartphone nicht nur für den privaten Gebrauch immer zentraler, viel mehr auch für geschäftliche Prozesse. Generell sehen wir eine Durchdringung des Messenger in jeglichen Bereichen, was eine enorme Auswirkung auf das Marketing in Besonderen auf das Social Media Marketing hat und auch zukünftig immer stärker haben wird. Die Kommunikation über Messenger ist oftmals direkter und meist mobil. Messenger Marketing ist somit ein neuer, fester Bestandteil des Online-Marketings geworden. Mobile Kommunikation wird sowohl für externe und interne Kommunikation immer alltäglicher, da sich das Verhalten im Privatleben auch auf das Geschäftliche auswirkt. Die Kommunikation findet beispielsweise über Messenger wie WhatsApp, Skype, Slack oder auch den Facebook-Messenger statt. Weil sich so viele User täglich in Messengern aufhalten, liegt es nahe, auch in diesem Social Space Werbung zu schalten.

Ist ein Mobile First Design auch im B2B-Bereich relevant?

Auch im B2B-Bereich ist der Mobile-First-Ansatz angekommen. Eine Sistrix-Studie zeigt, dass 50% der B2B relevanten Suchanfragen mobil laufen. Es wird geschätzt, dass diese Zahl bis 2020 mindestens auf 70% steigen wird. Von daher könnt ihr das responsive Webdesign auch im B2B nicht mehr ignorieren. Denn auch Geschäftsleute surfen am Tag viel mit ihren Smartphones.

Ihr habt euren Website Traffic analysiert und festgestellt, dass die meisten eurer Besucher eure Website über ihren Desktop nutzen. Jetzt könnt ihr fälschlicherweise daraus den Schluss ziehen, dass eine Optimierung für mobile für euch keinen Sinn ergibt. Das stimmt allerdings nicht! Denn seit Ende März 2018 hat Google offiziell bekanntgegeben, Rankings nun auch vom adaptiven Design der Websites abhängig zu machen. Zuvor wurden das Crawlen, Indexieren und Ranken von Seiten typischerweise von den Desktop-Versionen von Websites abhängig gemacht. Durch Mobile-First-Indexierung sind nun mobile Seiten ebenfalls Ausgangspunkt für Indexierung und Ranking, um mobilen Internetnutzern eine möglichst gute Erfahrung zu bieten. Das bedeutet, dass ihr Mobile-First für ein gutes Ranking – egal ob im B2C- oder im B2B-Bereich – nicht ignorieren solltet. Ansonsten gehen euch gute Positionen auf Google für die für euer Business relevanten Keywords vermeintlich verloren.

Fazit: Es wird Zeit umzudenken

Wir hoffen, euch in diesem Beitrag genug Input zum Thema Mobile First geliefert zu haben. Wir hoffen auch, dass wir ein neues Thema angestoßen und euch zum Nachdenken angeregt haben. Wir möchten euch an dieser Stelle noch ans Herz legen, dass es nicht darum geht, alle Änderungen so schnell wie möglich umzusetzen, sondern sich dem Thema nach und nach anzunehmen. Wir wissen immerhin alle, dass Webdesign und -entwicklung ein teurer Spaß sein kann.

Wenn ihr das Mobile-First-Konzept für eure Seite ausrollen wollt, solltet ihr zuerst eine sinnvolle Strategie ausarbeiten. Denn es reicht nicht aus, ein minimalistisch reduziertes Design zu kreieren. Vielmehr müssen auch Faktoren, wie User Experience und Kontext stimmen. Dabei dürft ihr das Nutzerverhalten nicht aus den Augen verlieren. Wie kommt der Nutzer zum Produkt, in welcher Umgebung verhält er sich wie und wo nutzt er welche Zusatzleistungen? Das sind grundlegende Fragestellungen, die ihr beantworten können solltet, bevor ihr euch an die Erstellung der Designs macht.  

Mobile First ist kein Buzzword mehr, viel mehr Alltag für jedes Unternehmen. Wenn man heutzutage im Netz einen erfolgreichen Auftritt hinlegen möchte, müssen alle Seiten mobil optimiert sein. Die Arbeitsansätze werden sich nachhaltig verändern. Weniger ist mehr! Das wird sich übrigens wohl auch auf die Desktop-Versionen der Websites übertragen. Nur, weil man ein größeres Display zur Verfügung hat, heißt das nicht, dass man dieses mit unwichtigen Informationen und Features beladen muss. Optimal ist eine übersichtliche, leicht bedienbare Designlösung.