Mobile-First-Design

Was ist Mobile-First-Design?

Mobile-First-Design ist ein Ansatz, bei dem Sie zuerst für den kleinsten Bildschirm gestalten und entwickeln und erst bei wachsender Breite Layout und Funktionen ergänzen. Die Basis ist eine einfache einspaltige Seite mit dem, was Besucher am Smartphone brauchen. Größere Bildschirme sind eine Erweiterung darauf, nicht der Ausgangspunkt, der nachträglich gequetscht wird.

So funktioniert es

Im Design beginnen Sie mit der Kernaufgabe: Was muss ein Besucher auf einem kleinen Bildschirm tun oder lesen können? Im Code beschreibt das Basis-CSS dieses schmale Layout, und min-width-Media-Queries ergänzen Spalten und Extras, sobald Platz da ist. MDN beschreibt die Idee so: ein einfaches einspaltiges Layout für schmale Bildschirme, dann ein mehrspaltiges Layout, wenn genug Breite vorhanden ist. Außerdem braucht die Seite das Viewport-Meta-Tag, sonst rendern Smartphones sie in Desktop-Breite und verkleinern sie. Mehr dazu unter Viewport.

<meta name="viewport" content="width=device-width, initial-scale=1">

/* base styles: one column, for every screen */
.cards { display: grid; gap: 1rem; }

/* wider screens get more */
@media (min-width: 700px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}

Das Gegenteil, Desktop-First, schreibt zuerst das volle Layout und macht es dann mit max-width-Queries auf kleinen Bildschirmen wieder rückgängig. Smartphones laden und verarbeiten dann oft CSS, das sie nie nutzen.

Warum Teams es wählen

• Fokus. Ein kleiner Bildschirm zwingt dazu, Inhalte und Aktionen zu gewichten, was oft auch die Desktop-Version verbessert.
• Weniger Last auf schwachen Geräten. MDN weist darauf hin, dass mobile Geräte weiterhin durch Akku und Bandbreite begrenzt sind und ein einziges großes Bild für alle Geräte Bandbreite verschwendet. Passend skalierte Bilder und spätes Nachladen von Medien weiter unten helfen; siehe Bildgröße und Lazy Loading.
• Suche. Google gibt an, für Indexierung und Ranking die mit dem Smartphone-Agenten gecrawlte mobile Version der Inhalte zu verwenden, und verlangt, dass die mobile Seite dieselben Inhalte wie die Desktop-Seite enthält.

Beispiel

Eine Buchungsseite. Das Smartphone-Layout zeigt Datumsauswahl, Preis und einen Button in einer Spalte. Ab 700 px Breite erscheint eine Seitenspalte mit Fotos und Zimmerliste. Nichts davon fehlt auf dem Smartphone, es wurde nur zuerst gebaut und dann erweitert.

Häufige Fehler

• Zoom sperren. user-scalable=no im Viewport-Tag hindert Menschen mit Sehbehinderung am Vergrößern. Laut MDN verlangt WCAG mindestens 2-fache Skalierung, und manche Browser ignorieren die Einstellung ohnehin.
• Inhalte auf dem Smartphone ausblenden. Gekürzte Texte oder Abschnitte können Traffic kosten, weil Google die mobile Version indexiert. Besser mit Tabs oder Akkordeons umordnen.
• Desktop-Assets auf dem Smartphone. Ein 2.000 px breites Titelbild für alle Geräte hebt den Vorteil auf. Nutzen Sie srcset und sizes.
• Interaktionen nur per Hover. Menüs und Tooltips, die mit der Maus überfahren werden müssen, haben am Touchscreen kein Gegenstück.
• Nur als Layout-Trick verstehen. Ist die mobile Version langsam, hilft das Layout nicht. Messen Sie sie.

Mobile-First, Responsive Design und Mobile-First-Indexierung

Die Begriffe hängen zusammen, sind aber verschieden. Responsive Design heißt, dass sich eine Seite an jede Bildschirmgröße anpasst. Mobile-First ist die Reihenfolge, in der Sie eine responsive Seite bauen. Mobile-First-Indexierung beschreibt, wie Google crawlt: Es geht um die Suche, nicht um Ihr CSS.

Mobile-First, Test und Monitoring

Eine Mobile-First-Seite muss auf echten Smartphones trotzdem schnell sein. Prüfen Sie die Core Web Vitals mit einem Mobilprofil, denn Layoutverschiebungen und langsame Bilder fallen dort zuerst auf, und wiederholen Sie die Prüfung nach jedem Release. Der kostenlose Core Web Vitals Checker liefert schnell einen Wert für eine URL, und das Page-Speed-Monitoring von LoadFocus führt geplante Lighthouse-Audits aus Cloud-Regionen aus, mit einem pro Monitor wählbaren Gerät. Zur Einordnung lesen Sie unseren Artikel über Performance-Tests für Mobile-First-Unternehmen und den Vergleich von Cloud- und lokalen Mobile-Performance-Tests. Gute mobile Layouts stärken außerdem die gesamte User Experience.

Häufige Fragen

Ist Mobile-First dasselbe wie Responsive Design?

Nein. Responsive Design bedeutet, dass sich eine Seite an unterschiedliche Bildschirmgrößen anpasst. Mobile-First ist eine Vorgehensweise dabei: Sie schreiben zuerst die Smartphone-Version und ergänzen breitere Layouts mit min-width-Media-Queries.

Brauche ich min-width-Media-Queries für Mobile-First-CSS?

Das ist das übliche Muster. Die Basisstile sind die mobilen, und min-width-Queries fügen Stile für breitere Bildschirme hinzu. Die Bereichssyntax, etwa width >= 700px, bedeutet dasselbe.

Wie sollte das Viewport-Meta-Tag aussehen?

MDN empfiehlt width=device-width. Viele Seiten ergänzen initial-scale=1, was meist optional ist, aber den Start-Zoom auf 100 % setzt. Vermeiden Sie user-scalable=no und maximum-scale, die das Zoomen blockieren können.

Hilft Mobile-First-Design bei SEO?

Indirekt. Google indexiert die mobile Version Ihrer Inhalte, also sieht es eine vollständige, schnelle mobile Seite. Der Designansatz selbst ist kein Rankingfaktor.

Ist Desktop-First jemals richtig?

Bei Werkzeugen, die fast nur auf großen Bildschirmen genutzt werden, etwa dichten Dashboards, kann es sinnvoll sein. Auch dann sollte die Seite auf dem Smartphone nutzbar bleiben.