Was Mobile-First-Design wirklich bedeutet, wie es sich von Responsive Design unterscheidet und wie man eine Mobile-First-Website entwirft und baut: Inhaltsreihenfolge, Touch-Targets, CSS min-width Breakpoints, Bilder und Tests sowie Hinweise für Unternehmen mit mehreren Standorten.
Responsive Design bedeutet eine Website, deren Layout sich an jede Bildschirmgröße anpasst. Mobile-First ist die Reihenfolge, in der man entwirft und programmiert: zuerst mit dem kleinen Bildschirm beginnen und Layout für größere Bildschirme hinzufügen. Eine Mobile-First-Website ist responsiv, aber eine Desktop-First-Website hat oft eine beengte, nachgedachte mobile Version.
Google verwendet Mobile-First-Indexierung, d.h. es verwendet primär die mobile Version einer Seite für die Indexierung und das Ranking. Wenn Inhalte, Überschriften, strukturierte Daten oder Links auf Mobilgeräten fehlen, sieht Google sie möglicherweise nicht.
Die Inhalte entscheiden lassen: den Browser verbreitern, bis das Layout gestreckt aussieht, dann dort einen Breakpoint hinzufügen. Häufige Ausgangspunkte sind ca. 640px, 768px, 1024px und 1280px, die viele CSS-Frameworks verwenden, geschrieben als min-width Media Queries.
WCAG 2.2 setzt eine Mindestzielfläche von 24 mal 24 CSS-Pixeln (Level AA) und empfiehlt 44 mal 44 (Level AAA). Apples Richtlinien verwenden 44 Punkte und Googles Material-Empfehlung 48dp. Für primäre Buttons und Links in Menüs ca. 44 bis 48 Pixel anstreben.
Eine gemeinsame Vorlage mit einer Standortseite pro Franchise verwenden, jeweils mit Anruf-Button, Navigations-Button, Öffnungszeiten und einer filialbezogenen Buchungs- oder Bestellaktion oben. Mobile Besucher, die in meiner Nähe suchen, möchten sofort handeln, also müssen der Standortfinder und die primäre Aktion mit einem Daumen funktionieren.
Kurze Antwort: Mobile-First-Webdesign bedeutet, dass man die Telefon-Version einer Seite zuerst entwirft und baut, dann Layout für Tablets und Desktops hinzufügt, wenn der Bildschirm breiter wird. Im Code ist Ihr Basis-CSS das mobile Layout und Sie verwenden min-width Media Queries, um es zu erweitern. Es zwingt Sie zu entscheiden, was auf jeder Seite am wichtigsten ist, und entspricht der Art, wie Google Websites heute indexiert.
Menschen verwenden diese Begriffe synonym, aber sie beantworten verschiedene Fragen.
| Responsive Design | Mobile-First-Design | |
|---|---|---|
| Was es ist | Eine Website, deren Layout sich an die Bildschirmgröße anpasst | Ein Prozess: klein anfangen, nach oben erweitern |
| CSS-Stil | Kann max-width oder min-width sein | min-width (Mobile vergrößern) |
| Inhalts-Priorität | Oft auf dem Desktop entschieden, dann gequetscht | Auf dem kleinsten Bildschirm entschieden |
| Typisches Versagen | Versteckte Inhalte, winzige Tap-Targets, schwere Seiten | Desktop-Layout wirkt spärlich, wenn nicht erweitert |
Best Practice ist beides: eine responsive Website, Mobile-First gebaut.
Auf einem schmalen Bildschirm ist alles eine Spalte, also ist Reihenfolge Ihr gesamtes Layout. Für jede Seite eine nummerierte Liste von Abschnitten in der Reihenfolge schreiben, die ein Besucher auf einem Telefon benötigt.
Für eine lokale Dienstleistungs-Startseite könnte es sein:
Alles, was keinen Platz in dieser Liste verdient, gehört wahrscheinlich auch nicht auf den Desktop.
Mit dem Viewport-Tag im Head jeder Seite beginnen:
``html <meta name="viewport" content="width=device-width, initial-scale=1"> ``
Basis-Stile für das Telefon schreiben, ohne Media Query. Dann min-width Queries hinzufügen:
```css .services { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .services { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .services { grid-template-columns: repeat(3, 1fr); } .site-nav { display: flex; } /* vollständige Nav anzeigen, Menü-Button verstecken */ } ```
Einige Techniken, die das erleichtern:
Breakpoints dort wählen, wo Ihre Inhalte brechen, nicht für bestimmte Telefonmodelle.
Telefone haben langsamere Prozessoren und weniger zuverlässige Netzwerke als der Laptop, auf dem man gestaltet. Googles Core Web Vitals messen das: Largest Contentful Paint (Laden), Interaction to Next Paint (Reaktionsfähigkeit) und Cumulative Layout Shift (visuelle Stabilität).
Sobald das Telefon-Layout funktioniert, Browser verbreitern und Wert hinzufügen:
Franchise- und Multi-Location-Websites haben ein spezifisches mobiles Problem: die meisten Besucher kommen von einer In-meiner-Nähe-Suche auf einem Telefon und wollen sofort Details zu einem Standort.
Jede Website, die We.Inc baut, ist von Anfang an responsiv, und man kann das Telefon-Layout im Editor in der Vorschau sehen. Die Vorlagen durchsuchen, um zu sehen, wie Layouts auf eine Spalte zusammenklappen.
Kostenlos starten · Keine Kreditkarte nötig