Mobile-First Design
Mobile-First Design ist ein Ansatz, bei dem Websites zuerst für mobile Geräte gestaltet und dann für größere Bildschirme erweitert werden. Statt eine Desktop-Version zu verkleinern, beginnt man mit den Kernfunktionen für kleine Displays und fügt schrittweise Details für Tablets und Desktops hinzu. Dieser Ansatz zwingt zu Fokus auf das Wesentliche und spiegelt wider, dass die Mehrheit der Nutzer mobil surft.
Kernprinzipien sind Priorisierung der wichtigsten Inhalte und Funktionen für begrenzte Bildschirmfläche, Performance-Optimierung durch reduzierte Ladezeiten für mobile Verbindungen und Touch-optimierte Bedienelemente wie größere Buttons. Dazu kommen progressive Enhancement, bei dem Funktionen schrittweise hinzugefügt werden, und Mobile-First-CSS mit Media Queries für größere Breakpoints.
Viele Nutzer greifen primär oder ausschließlich mobil auf Websites zu, Google bevorzugt mobile Versionen beim Ranking (Mobile-First Indexing) und Mobile-First zwingt zu klareren Hierarchien und besserer UX. Zudem vereinfacht es die Entwicklung, da Erweiterungen einfacher sind als Reduzierungen, und verhindert überladene Designs durch bewusste Beschränkung.
Man startet mit Content-Inventar und priorisiert Kerninhalte, erstellt Wireframes für mobile Ansicht mit klarer Navigation und testet früh auf echten Geräten. Anschließend erweitert man das Design für Tablet und Desktop durch zusätzliche Spalten oder Sidebar-Elemente. CSS wird mit min-width Media Queries geschrieben, die von mobil nach Desktop arbeiten, und Touch-Targets sollten mindestens 44x44 Pixel groß sein.