Mobile Website: 10 Regeln mit Vorher-nachher-Beispielen
Die meisten Besucher eines Onlineshops kommen mit dem Smartphone – und entscheiden dort, ob sie kaufen. Hier sind 10 Regeln für die mobile Website mit Vorher-nachher-Beispielen und genauen Button- und Schriftgrößen nach Apple, Google und WCAG.
Warum ist die mobile Version keine verkleinerte Website?
Am Smartphone tippt man mit dem Finger, liest auf kleinem Bildschirm und nutzt oft nur eine Hand. Was am Computer bequem ist, wird am Handy winzig, eng und unklar. Zudem indexiert Google Websites anhand der mobilen Version – Suche und Umsatz hängen also davon ab.
10 Regeln mit Beispielen
1. Große Buttons
Getippt wird mit dem Finger, nicht mit dem Cursor. Apple empfiehlt eine Trefferfläche von mindestens 44 × 44 pt, Android 48 × 48 dp, und der Barrierefreiheitsstandard WCAG 2.2 setzt mindestens 24 × 24 px an.
2. Größere Schrift
Was am Computer passt, ist am Handy unleserlich. Fließtext meist ab 16 px, damit niemand zoomen muss; Googles Lighthouse markierte Seiten, auf denen über 40 % des Texts kleiner als 12 px waren.
3. Auf Abstände achten
Stehen Blöcke dicht an dicht, wirkt der Bildschirm überladen und billig. Es braucht mehr Luft, als man denkt.
4. Buttons untereinander
Zwei Buttons nebeneinander werden am Handy schmal. Volle Breite, untereinander – leichter zu treffen, weniger Fehltipper.
5. Wischbarkeit zeigen
Lassen sich Karten wischen, sollte man es sehen: der Rand der nächsten Karte, Punkte oder Pfeile zeigen, dass mehr kommt.
6. Kompaktes Menü
Der Kopfbereich darf nicht den halben Bildschirm füllen. Ein kompakter Header mit Logo und Menü-Button lässt Platz für das Wesentliche.
7. Nebensächliches einklappen
Am Handy muss nicht alles sofort sichtbar sein: Akkordeons, Tabs und „Mehr anzeigen“ halten die Seite aufgeräumt. Einklappen, nicht löschen – Google indexiert die mobile Version, der Inhalt sollte dem Desktop entsprechen.
8. Kontakte antippbar machen
Telefonnummer und E-Mail sollten sich mit einem Tipp öffnen – dafür gibt es tel:- und mailto:-Links. Ein „Anrufen“-Button ist noch einfacher.
9. Ersten Bildschirm nicht überladen
Oben ist wenig Platz: eine Überschrift, eine kurze Erklärung, eine Hauptaktion. Banner, Rabatte und Newsletter gehören weiter nach unten.
10. Desktop nicht 1:1 kopieren
Die mobile Version ist keine kleinere Website. Blöcke werden umgestellt, aus drei Spalten wird eine, Überflüssiges fällt weg.
Metriverra zeigt, wie Besucher vom Smartphone und vom Computer konvertieren – so prüfen Sie leicht, ob Verbesserungen der mobilen Version Umsatz gebracht haben.
Kurz gesagt
- Buttons ab 44 × 44 pt (Apple) oder 48 × 48 dp (Android); WCAG-Minimum 24 × 24 px.
- Fließtext ab 16 px, mit Abständen zwischen Blöcken.
- Buttons in voller Breite untereinander; Kontakte antippbar.
- Erster Bildschirm: eine Hauptaktion; Nebensächliches in Akkordeons.
- Mobil ist ein Umbau, keine verkleinerte Seite; Inhalt wie am Desktop.
Quellen: Apple — Human Interface Guidelines: Accessibility · Android Developers — Make apps more accessible · W3C — WCAG 2.2: Target Size (Minimum) · Chrome for Developers — Lighthouse: legible font sizes · MDN — The Anchor element · Google Search Central — Mobile-first indexing
