Luke Wroblewski prägte den Begriff 2009, doch die Logik dahinter war bereits dringlich. Smartphones hatten sich zum wichtigsten Zugangspunkt zum Internet entwickelt, und die Priorisierung von Desktop-Layouts zwang Designer dazu, komplexe Funktionen später auch für kleine Bildschirme zu implementieren. Der Mobile-First-Ansatz kehrt diese Reihenfolge um. Man beginnt mit dem kleinsten Bildschirm, legt fest, was am wichtigsten ist, und erweitert das Design dann auf Tablet- und Desktop-Layouts.

Die Beschränkung ist produktiv. Ein schmaler Bildschirm zwingt zur Priorisierung. Die Navigation reduziert sich auf ein Menü. Inhalte werden in einer einzigen Spalte angeordnet. Jedes Element muss seinen Platz rechtfertigen. Designer entwerfen daumenfreundliche Tippziele, berücksichtigen die Einhandbedienung und planen für langsame Verbindungen. Wenn das Design auf einen größeren Bildschirm skaliert wird, wird der zusätzliche Platz für mehr Übersichtlichkeit und zusätzliche Bedienfelder genutzt, anstatt ihn mit neuen, unübersichtlichen Elementen vollzustopfen.

Kernpraktiken

• Beginnen Sie die Wireframes in Telefonbreite.
• Die Inhaltshierarchie sollte konsequent priorisiert werden.
• Design-Touch-Ziele mit mindestens 44 Pixeln.
• Skalieren Sie zuletzt auf Tablets und Desktop-Computer.

Responsives Design und Mobile-First gehen oft Hand in Hand. Mobile-First legt die Prioritäten fest. Responsives Design sorgt für die Anpassung an verschiedene Bildschirmauflösungen.