Warum Mobile-First?
Über 60% des E‑Commerce-Traffics kommt von mobilen Geräten. Wer immer noch «Desktop zuerst» designt und dann «responsive macht», denkt von gestern.
Mobile-First bedeutet: Sie designen zuerst für das kleinste Display. Dann erweitern Sie für grössere Bildschirme. Das zwingt zu Klarheit und Fokus.
Die Grundprinzipien
1. Touch-First, nicht Click-First
Buttons müssen gross genug für Daumen sein (mindestens 44x44px). Hover-Effekte funktionieren nicht – der Feedback muss anders kommen. Swipe-Gesten statt Scroll-Pfeile.
2. Vertikales Layout
Mobile Screens sind vertikal. Ihre Navigation, Ihre Produktdarstellung, Ihr Checkout – alles muss vertikal fliessen. Keine horizontalen Tabs, keine nebeneinander liegenden Formulare.
3. Performance ist UX
Auf Mobile ist Bandbreite kostbar und variabel. Jedes Kilobyte zählt. Lazy Loading, optimierte Bilder, minimales JavaScript – nicht optional, sondern Pflicht.
Der Mobile-First Checkout
Der Checkout ist der kritischste Teil. Hier verlieren Sie Kunden – oder gewinnen sie.
- Ein Feld pro Zeile – Niemals zwei Felder nebeneinander auf Mobile
- Richtige Input-Types – type=«tel» für Telefonnummern (zeigt Nummern-Tastatur)
- Apple Pay / Google Pay – Ein Tap statt 20 Formularfelder
- Adress-Autocomplete – Niemand tippt gerne Adressen auf dem Handy
- Sticky «Kaufen»-Button – Immer sichtbar, immer erreichbar
Navigation auf Mobile
Das Hamburger-Menü ist nicht perfekt, aber oft die beste Lösung. Wichtiger: Die wichtigsten Aktionen müssen ohne Menü erreichbar sein.
- Suche prominent platzieren
- Warenkorb immer sichtbar (mit Badge)
- Zurück-Button klar erkennbar
- Breadcrumbs für Orientierung
Bilder auf Mobile
Produktbilder müssen grösser sein als auf Desktop – relativ zum Screen. Zooming muss funktionieren. Und: Bilder müssen schnell laden.
- WebP-Format mit JPEG-Fallback
- Responsive Images mit srcset
- Lazy Loading für Bilder below-the-fold
- Blur-Up Placeholder für bessere wahrgenommene Performance
Testen, Testen, Testen
Simulatoren sind nicht genug. Testen Sie auf echten Geräten:
- Verschiedene iPhone-Generationen
- Android-Geräte verschiedener Preisklassen
- Mit langsamer Verbindung (3G)
- Im Sonnenlicht (Kontrast!)
- Mit einer Hand (Erreichbarkeit)
Fazit
Mobile-First ist keine Technik – es ist eine Denkweise. Es zwingt Sie, das Wesentliche vom Überflüssigen zu trennen. Und das macht Ihren Shop besser – auf allen Geräten.