Der Begriff Mobile First kommt aus dem Bereich der Suchmaschinenoptimierung und wird auch immer wichtiger in der Welt des Webdesigns. Dabei wird die neugestaltete Website zuerst aus der Sicht eines Smartphone Benutzers gestaltet und konzeptioniert und anschließend erst für Desktop Nutzer.

Mobile First Screendesign Herangehensweise

Im Screendesign wird mit UX/UI Programmen wie Adobe xD oder Figma das Layout für die Smartphone Version umgesetzt. Dabei werden Elemente speziell so ausgelegt um die beste Nutzererfahrung und Conversionrate für mobil Nutzer zu gewährleisten.

Die Aufgabe des Screendesigners ist es außerdem schon an die Entwicklung zu denken, indem er versucht möglichst viele Designelemente auf größeren Viewports “aufklappbar” zu machen und versteht wie Fluide Grid Systeme, Container und Breakpoints funktionieren. Für ein erfolgreiches Mobile First Screendesign ist es außerdem sehr wichtig den kompletten Inhalt der einzelnen Templates zu kennen und bereits ausformulierte Texte zur Verfügung zu haben.

Fängt ein “Webdesigner” mit dem Design oder sogar der Umsetzung der Website an bevor überhaupt klar ist welche Strategie und welcher Inhalt umgesetzt werden soll endet das meist in einem unsauberen CSS Regelwerk.

Mobile First Entwicklung Herangehensweise

Bei der Mobile First Frontend Entwicklung werden zuerst die CSS Regeln für den Smartphone Breakpoint erstellt. Die Elemente werden bei den größeren Breakpoints überschrieben. Dadurch spart sich der Mobile Browser Rechenleistung, weil er die Stile der Elemente nicht neu berechnen muss.

Bei Webseiten welche die neusten Versionen von CSS Framworks wie Bootstrap oder UiKit3 verwenden ist das Grundprinzip bereits vorgegeben. Es liegt jedoch am Entwickler diesen Entwicklungsansatz konsequent weiterzuführen.

Vorteile des Mobile First Ansatz?

Mobile First setzt den Fokus auf mobile Besucher, welche den Großteil des Traffic ausmachen. Die Performance der Website ist besser, weil der Browser weniger CSS Regeln verarbeiten muss.

Ineinanderspiel mit responsive Frontend Entwicklung

Ein Mobile First Screendesign geht Hand in Hand mit der technischen Umsetzung der responsiven Frontend Entwicklung.