DOSIGNY Lexikon · Webdesign

Mobile First

Mobile First ist ein Design-Ansatz bei dem zuerst für Smartphones gestaltet wird — und dann für größere Bildschirme erweitert.

Mobile First ist eine Design-Philosophie bei der die Website zuerst für das kleinste Display (Smartphone) gestaltet und dann schrittweise für größere Bildschirme erweitert wird. Das Gegenteil — Desktop First — war jahrelang Standard, ist aber in einer Welt wo über 60 % der Besucher mobil surfen nicht mehr zeitgemäß.

Technische Umsetzung

Mobile First wird mit CSS min-width Media Queries umgesetzt: Das Basis-Styling gilt für Smartphones. Mit @media (min-width: 768px) kommen Tablet-Anpassungen. Mit @media (min-width: 1024px) Desktop-Erweiterungen. Der Vorteil: Mobile Geräte laden nur den CSS-Code den sie brauchen — nicht das komplexe Desktop-Layout das dann wieder vereinfacht wird.

Google Mobile-First Indexing

Seit 2021 nutzt Google ausschließlich die mobile Version einer Website für Indexierung und Ranking. Content der nur auf Desktop sichtbar ist, wird potenziell nicht indexiert. Core Web Vitals werden auf Mobilgeräten gemessen. Mobile First ist nicht nur ein Design-Trend — es ist eine Google-Anforderung.

Häufig gestellte Fragen

Ist Mobile First dasselbe wie Responsive Design?
Nicht ganz. Responsive Design bedeutet, dass sich die Website an alle Geräte anpasst. Mobile First ist die Methode WIE man das macht — nämlich vom Smartphone ausgehend. Mobile First ist der empfohlene Ansatz für Responsive Design.
Muss meine Website Mobile First sein?
Wenn du bei Google gut ranken willst: Ja. Google nutzt seit 2021 ausschließlich Mobile-First Indexing. Die mobile Version deiner Website IST deine Website in Googles Augen.

Brauchst du Unterstützung bei diesem Thema?

Kostenlos beraten lassen →