Bei den meisten Unternehmens-Websites in Österreich kommen heute zwischen 60 und 80 % aller Besucher über mobile Geräte. Trotzdem entstehen viele Designs in Figma im 1440-Pixel-Layout — und werden später irgendwie auf 375 Pixel “responsive gemacht”. Das Ergebnis: Komprimierte Hero-Bilder, abgeschnittene Überschriften, Buttons, die zu klein sind, Menüs, die nur mit Mühe funktionieren.
Mobile-First Design dreht den Prozess um. Die Entscheidung beginnt mit der schmalsten Viewport-Breite — und wird dann nach oben skaliert. Was auf 375 Pixeln funktioniert, funktioniert auch in der Desktop-Variante. Umgekehrt fast nie.
Die typischen Fehler bei “responsiv nachträglich”
- Versteckte Inhalte: Wichtige Texte oder CTAs werden auf Mobil ausgeblendet, weil sie “nicht passen”. Das verschlechtert SEO und entzieht Besuchern wichtige Information.
- Riesige Hero-Bilder: 1920×1080 als JPEG geladen, dann per CSS auf 375 Pixel skaliert. 2 MB Daten für ein Bild, das nur 50 KB sein müsste.
- Burger-Menüs ohne Hinweis: Drei Striche oben rechts — kein Label, kein Hinweis. Nutzer übersehen das systematisch.
- Tap-Targets unter 44 Pixeln: Apple-Richtlinie ist 44pt, Material Design 48dp. Kleinere Klickflächen führen zu Fehl-Taps und Frust.
- Sticky-Header und Cookie-Banner gleichzeitig: Auf einem kleinen Bildschirm bleibt dann oft 30 % weniger Inhalt sichtbar.
Was Mobile-First konkret heißt
- Inhalt vor Layout: Welche Information ist auf dieser Seite die wichtigste? Welche Aktion soll der Nutzer ausführen? Diese muss auf Mobil sofort und ohne Scrollen erkennbar sein.
- Typografie für Lesbarkeit: 16 Pixel Body-Text als absolutes Minimum, Zeilenhöhe 1,4–1,6, ausreichend Kontrast.
- Touch-First Interaktionen: Hover-Effekte funktionieren auf Mobil nicht. Stattdessen klare Visuell-Zustände für Touch-Aktionen.
- Performance als Design-Faktor: Ein 4G-Anschluss in der U-Bahn liefert oft nur 200–500 KB/s. Daran muss das Design messbar.
- Native Features einbeziehen:
<a href="tel:">für Telefonnummern,<a href="mailto:">für E-Mails,geolocationfür lokale Services.
Mobile-First bedeutet nicht “Mobile-Only”
Desktop-Nutzer sind selten geworden, aber nicht unwichtig — vor allem im B2B-Bereich. Mobile-First Design bedeutet, dass die schmalste Variante zuerst stimmen muss, nicht dass Desktop zweitrangig ist. Eine gut gemachte Desktop-Variante nutzt zusätzlichen Platz aktiv: mehr Inhalt nebeneinander, größere Hero-Bereiche, Side-Navigationen.
Wir entwerfen Designs grundsätzlich Mobile-First — und bauen sie so, dass jede Bildschirmbreite eine bewusste Entscheidung trägt, nicht nur ein Skalierungsfaktor ist. Wenn Sie wissen möchten, wo Ihre aktuelle Website auf Mobil Conversion verliert, sprechen wir gerne über einen Mobile-Audit.
