Was ist Mobile First?

Immer mehr Menschen besuchen Websites mit ihren mobilen Endgeräten. Auf diesen Trend reagiert die Welt des Webdesigns mit dem Mobile-First-Ansatz: Zunächst werden die Websites für Smartphones und Tablets gestaltet und programmiert, die Desktopversion baut auf diesem Grundgerüst auf.

Was bedeutet Mobile First?

Mobile First ist ein Konzept für mobil optimiertes Webdesign. Dabei entsteht zuerst die für mobile Endgeräte optimierte Seite und später folgen dann sukzessive Erweiterungen für den Desktop-Browser. Mobile First ist also ein Designtrend, der auf die Evolution von Suchmaschinen wie Google im mobilen Sektor reagiert.

Bislang war es üblich, dass sich Webdesignende und Programmierende zunächst um die Umsetzung der Website für den Desktop kümmerten. Dabei wurde mit der vollen Palette an Funktionen, Grafiken und gestalterischen Möglichkeiten eine Seite konzipiert, die auf große Bildschirme und schnelle Datenverbindung ausgelegt war. Erst im zweiten Schritt folgte die Planung der mobilen Seite, die oft nur als eine Art Anhang gesehen wurde. Die Mobile-First-Strategie kehrt diesen Workflow um und setzt die Prioritäten anders. Das wirkt sich auch auf die Gestaltung der technischen Infrastruktur hinter der Website aus.

Welche Maßnahmen umfasst der Mobile-First-Ansatz?

Bei der Konzeptionierung einer Mobile-First-Strategie werden zunächst die zentralen Aspekte des Angebots und der Seite definiert. Dabei geht es nicht nur um Inhalte und Bilder, sondern vor allem um die wichtigsten Funktionen und Module, die als Elemente auf der Website integriert werden müssen. Konkret werden folgende Maßnahmen beim Webdesign nach dem Mobile-First-Prinzip berücksichtigt:

• Beschränkung auf das Wesentliche
• Nicht mehr Programmieraufwand als nötig
• Maximale Performance auf allen Endgeräten
• Schneller Informationszugriff: Strukturierte Inhalte
• Design-Entwürfe aufs Smartphone Display angepasst
• Keine großen Bilder und unnötigen Funktionen
• Kürzungen im Quellcode
• Verzicht auf JavaScript, Seite wird direkt in HTML5 programmiert

Im Zentrum steht die Entwicklung einer optimalen Lösung für mobile Endgeräte. Erst im Anschluss werden nach dem Prinzip der progressiven Verbesserung (Progressive Enhancement) Desktop- und Laptop-Darstellungen optimiert. Die optimale Inhaltsdarstellung auf allen Geräten folgt den Grundsätzen des Responsive Webdesigns und nutzt häufig CSS-Grids, damit die Seite skalierbar bleibt.

Welche Vorteile bietet Mobile First?

Webdesign sollte sich mittlerweile hauptsächlich auf Mobile-Seiten konzentrieren. Denn mobil optimierte Websites erreichen ein sehr großes Publikum. Außerdem profitiert man bei Mobile First von schneller Anpassbarkeit: Durch die schlanke Struktur, die sich auf das Wesentliche beschränkt, kann die Webpräsenz später besser verändert und neue Entwicklungen können einfacher eingebracht werden. Da aufgrund beschränkter Bildschirmgröße nur die wesentlichen Elemente in die Website eingebracht werden, bieten mobile Websites oft verbessertes User-Experience-Design und höhere Benutzerfreundlichkeit.

Zudem können sich Webdesignerinnen und Webdesigner die Arbeit erleichtern, indem sie bei der Generierung des CSS-Designs Präprozessoren verwendet. Mit Hilfe von CSS-Präprozessoren lassen sich Parameter wie Farben, Schriftarten usw. variabel verändern und müssen nicht mühsam im CSS-Code geändert werden.

Die Vorteile von Mobile First auf einen Blick

• Erreichen einer großen Zielgruppe
• Benutzerfreundliche und übersichtliche Websites
• Schnelle und effiziente Entwicklung
• Flexiblere und einfacher anpassbare Webpräsenzen

Welche Nachteile hat Mobile First?

Vielfach kommt es beim mobilen Webdesign zu Fehlern, sodass die eigentlich optimierte Website im Endeffekt nur wenig benutzerfreundlich ist. Doch auch ohne Fehler kann der Mobile-First-Ansatz an manchen Stellen nachteilig sein.

Wenn Sie über eine Desktop-optimierte Website verfügen, ist eine Migration auf mobile Endgeräte unter Umständen schwierig und erfordert ein gänzlich neues Designkonzept oder sogar einen kompletten Relaunch. Auch für Grafiken und Bildinhalte gilt: Auf mobiles Design optimierter Content kann in der Desktopversion schlechter aussehen, da die Auflösung von Computer- und Laptopbildschirmen eine gänzlich andere ist.

Außerdem ist zu beachten, dass Mobile First nicht für alle Anwendungsfälle eine valide Lösung ist: Möchten Sie beispielsweise komplexe Webanwendungen für mobile Endgeräte bereitstellen, kann es gut sein, dass eine mobil optimierte Website nicht ausreichend oder sogar unmöglich ist. In solchen Fällen sollte über eine eigene App nachgedacht werden, die allerdings einen verhältnismäßig hohen Programmieraufwand mit sich bringt.

Die Nachteile von Mobile First auf einen Blick

✗ Migration von bestehenden Desktopsites schwierig ✗ Grafiken und Bildinhalte benötigen andere Auflösung ✗ Komplexe Webpräsenzen können unter Umständen mobil nicht vollumfänglich repräsentiert werden ✗ Nicht für jeden Usecase geeignet

Was ist Mobile Friendly?

Eng einher mit dem Mobile-First-Konzept geht die Frage, wann eine Seite als Mobile Friendly einzustufen ist. Dies ist im Allgemeinen der Fall, wenn:

• Die Inhalte möglichst schnell erfasst werden können
• Die Inhalte responsiv und damit auf Anhieb lesbar sind
• Die Website kurze Ladezeiten hat
• Links leicht lesbar und problemlos klickbar sind

Wurde im Webdesign das Mobile-First-Prinzip beachtet, sollte Ihre Website die genannten Punkte eigentlich erfüllen. Ob eine Seite auch von Google als Mobile Friendly erkannt wird, kann man als betreibende Person leicht testen. Das Tool Chrome Lighthouse ist Bestandteil von Chrome DevTools und prüft Ihre Website automatisiert.

Neben dem Mobile-Friendly-Test von Google bieten sich Website-Check-Tools an, um die eigene Seite auf mobile Optimierung hin zu testen. Beim Website-Checker von IONOS liefert die Überprüfung darüber hinaus weitere relevante Insights zur Auffindbarkeit der geprüften Website im Web.

Zusammenfassung: Mobile First

Bei der Erstellung einer Website sollten Sie über den Mobile-First-Ansatz nachdenken: In Anbetracht der Tatsache, dass die meisten Endnutzerinnen und Endnutzer Webpräsenzen auf mobilen Endgeräten aufrufen, ist es nur sinnvoll, diesen besondere Aufmerksamkeit zu widmen und dafür zu sorgen, dass Ihre Website auf Smartphones und Tablets ohne Probleme performt. Die Desktopversion der Seite kann im Anschluss direkt aus der Mobilversion abgeleitet werden, was einiges an Arbeit erspart. Bedenken Sie jedoch, dass sich nicht jeder Usecase für Mobile First eignet: Komplexe Webseiten oder gar Webapps sollten nach einem anderen Designprinzip gestaltet werden.