Übergeordnetes Thema: Responsive Webdesign
Responsive Webdesign beschreibt die Methode, mit welcher man Webseiten für jede Art von Gerät optimiert. Das heißt die Webseite wird korrekt dargestellt egal ob du auf dem Handy, deinem Tablet oder am PC unterwegs bist. Wenn du mehr über Responsive Webdesign lesen möchtest, sieh dir gerne diesen Blogartikel an: Was ist Responsive Webdesign?. Mobile First (deutsch: Mobil zuerst) ist ein Prinzip aus dem Bereich Responsive Webdesign.
Mobile First wurde immer wichtiger in den letzten Jahren
Vor dem Smartphone war das Thema Responsive Webdesign nicht ansatzweise so wichtig wie heute, da noch niemand wirklich mit einem Handy deine Webseite besuchen konnte. Mittlerweile ist jedoch die Zahl der Smartphone Benutzer enorm gestiegen. Das bedeutet für Webdesigner und Webentwickler, dass jede Website auch auf ein Handy und Tablet Bildschirm angepasst sein muss.
Mobile First Prinzip
Viele Webdesigner setzen aufgrund des oben genannten Punktes auf das “Mobile First” Prinzip. Dabei wird erst die Webseite für Smartphones erstellt und danach auf Basis der Mobilversion die Desktop Variante entwickelt. Nehmen wir an du arbeitest mit einem Design Tool wie beispielweise Figma und erstellst vor der Website Entwicklung damit die Designs und Prototypen. In dieser Situation könntest du Mobile First anwenden, indem du erst die Version für Smartphones und danach die Version für PCs erstellst. Damit stellst du sicher, dass das Konzept der Webseite primär für mobile Endgeräte optimiert ist.
Mobile First Workflow
Jeder muss seinen eigenen Workflow finden. Hier ist jedoch eine Hilfestellung wie ein mobile First Workflow aussehen könnte:
- Mobile Version in Figma erstellen
- Tablet Version in Figma erstellen
- Desktop Version in Figma erstellen
- Mobile Version im Page Builder erstellen
- Tablet Version im Page Builder erstellen
- Desktop Version im Page Builder erstellen
Zusammenfassung in einem Satz
Mobile First bedeutet, dass man zuerst die Smartphone Version einer Webseite erstellt.