Stell dir vor, du baust ein Haus – aber du planst zuerst die Villa und versuchst dann, alles irgendwie in eine Einzimmerwohnung zu quetschen. Klingt absurd? Genau das passiert, wenn Websites zuerst für den Desktop gestaltet und dann «irgendwie» mobilfreundlich gemacht werden.
Mobile-First dreht diesen Ansatz um: Du gestaltest zuerst für das Smartphone und erweiterst dann für grössere Bildschirme. Warum? Weil die Mehrheit deiner Besucher – laut aktuellen Statistiken über 70 % – deine Website auf dem Handy besucht.
Für Schweizer KMU ist das besonders relevant: Wenn ein potenzieller Kunde unterwegs nach deiner Dienstleistung sucht und deine Website auf dem Smartphone schlecht funktioniert, ist er beim Mitbewerber – in Sekunden.
Dieser Artikel ist Teil des Perfekte-Website-Guides für Schweizer KMU – dem umfassenden Leitfaden für Websites, die wirklich funktionieren.
Mobile-First ist ein Designansatz, bei dem die mobile Version einer Website zuerst entwickelt wird. Erst danach wird das Design schrittweise für Tablets und Desktop-Bildschirme erweitert.
Die Begriffe werden oft verwechselt, aber es gibt einen wichtigen Unterschied:
- Responsive Design bedeutet, dass sich eine Website an verschiedene Bildschirmgrössen anpasst. Das kann auch «Desktop-First» sein – also zuerst für den grossen Bildschirm gebaut und dann herunterskaliert.
- Mobile-First ist eine Philosophie: Du startest beim kleinsten Bildschirm und baust von dort aus auf. Das zwingt dich, dich auf das Wesentliche zu konzentrieren.
Seit 2021 nutzt Google den Mobile-First Index. Das bedeutet: Google bewertet die mobile Version deiner Website für das Ranking – nicht die Desktop-Version. Wenn deine mobile Seite langsam, schlecht strukturiert oder unvollständig ist, leidet dein Ranking auf allen Geräten.
Auf dem Smartphone bedient man die Website mit dem Daumen. Das klingt trivial, hat aber enorme Auswirkungen auf das Design.
Die Thumb-Zone beschreibt die Bereiche auf dem Bildschirm, die der Daumen bequem erreichen kann. Studien zeigen:
- Einfach erreichbar (grüne Zone): Untere Mitte des Bildschirms
- Erreichbar mit Streckung (gelbe Zone): Mittlerer Bereich und untere Ecken
- Schwer erreichbar (rote Zone): Obere Bildschirmhälfte, besonders die Ecken
- Wichtige Buttons unten platzieren: Call-to-Action-Buttons, Navigation und häufig genutzte Funktionen gehören in den leicht erreichbaren Bereich.
- Sticky Navigation am unteren Rand: Eine fixierte Navigationsleiste unten ist bequemer als ein Hamburger-Menü oben rechts.
- Genügend Abstand zwischen Touch-Zielen: Mindestens 44 x 44 Pixel pro Touch-Ziel. Wenn Buttons zu nah beieinander liegen, tippt man versehentlich den falschen an.
- Formulare vereinfachen: Jedes zusätzliche Eingabefeld ist auf dem Smartphone eine Hürde. Frage nur das Nötigste ab.
Die Navigation auf dem Smartphone ist eine der grössten Herausforderungen im Webdesign. Du hast wenig Platz und musst trotzdem alle wichtigen Seiten zugänglich machen.
Das Hamburger-Menü (die drei horizontalen Striche) ist zum Standard geworden. Aber es hat Schwächen:
- Vorteil: Spart Platz und sieht aufgeräumt aus
- Nachteil: Versteckt die Navigation – Nutzer sehen nicht sofort, was verfügbar ist
- Nachteil: Erfordert zwei Taps statt einem (Menü öffnen + Seite wählen)
- Tab-Navigation am unteren Rand: Wie bei Apps (Instagram, WhatsApp). Die 4–5 wichtigsten Seiten sind immer sichtbar und mit einem Tap erreichbar.
- Kombination: Sichtbare Hauptnavigation unten + Hamburger-Menü für Nebenseiten oben.
- Priorisierung: Auf dem Smartphone müssen nicht alle Seiten in der Navigation sein. Fokussiere dich auf die 3–5 wichtigsten Ziele deiner Besucher.
Ein typisches Schweizer KMU braucht folgende Hauptpunkte in der mobilen Navigation:
- Home
- Leistungen / Angebot
- Über uns
- Kontakt
- Optional: Blog, Referenzen
Alles andere (Impressum, Datenschutz, AGB) kann im Footer oder im erweiterten Menü untergebracht werden.
Was mit der Maus einfach ist, kann auf dem Touchscreen zur Frustration werden. Gutes Mobile-First-Design berücksichtigt die Eigenheiten der Touch-Bedienung.
- Grosse, klare Buttons: Mindestens 44 px hoch und breit. Ein «Offerte anfordern»-Button muss auf dem Smartphone mindestens so gross sein wie eine Fingerkuppe.
- Kein Hover: Auf dem Touchscreen gibt es kein Hover. Informationen, die nur beim Darüberfahren mit der Maus erscheinen, sind auf dem Smartphone unsichtbar. Zeige alle wichtigen Infos direkt an.
- Swipe-Gesten nutzen: Bildergalerien und Karussells sollten per Swipe bedienbar sein – das fühlt sich auf dem Smartphone natürlich an.
- Formulare mobilfreundlich gestalten: Nutze den richtigen Input-Typ (z. B.
type="tel" für Telefonnummern, type="email" für E-Mail-Adressen). So zeigt das Smartphone automatisch die passende Tastatur an.
Ein Desktop-Kontaktformular mit acht Feldern ist auf dem Smartphone ein Albtraum. Für Mobile-First gilt:
- Reduziere auf 3–4 Felder (Name, E-Mail, Nachricht, optional Telefon)
- Nutze grosse Eingabefelder mit gut lesbarem Placeholder-Text
- Setze einen auffälligen Sende-Button am Ende
- Zeige eine klare Bestätigungsmeldung nach dem Absenden
Mobile Nutzer sind ungeduldig. Studien zeigen, dass über die Hälfte der Besucher abspringt, wenn eine Seite länger als drei Sekunden lädt. Auf dem Smartphone, oft über Mobilfunknetze, ist Performance noch kritischer als auf dem Desktop.
- Zu grosse Bilder: Ein 5-MB-Foto, das auf dem Desktop scharf aussieht, blockiert auf dem Smartphone das gesamte Laden. Nutze moderne Formate wie WebP und lade Bilder in der passenden Grösse.
- Zu viele Schriften: Jede Schriftdatei muss geladen werden. Beschränke dich auf maximal zwei Schriften mit je 2–3 Schnitten. Mehr dazu in unserem Beitrag zu Webdesign-Grundlagen.
- Unnötige Scripts: Tracking-Pixel, Chat-Widgets, Social-Media-Einbettungen – jedes Script kostet Ladezeit. Lade nur, was wirklich nötig ist.
- Render-blockierende Ressourcen: CSS und JavaScript, die das Rendern der Seite blockieren, sollten optimiert oder verzögert geladen werden.
- Bilder komprimieren: Tools wie Squoosh reduzieren die Dateigrösse um bis zu 80 % ohne sichtbaren Qualitätsverlust.
- Lazy Loading aktivieren: Bilder und Videos erst laden, wenn sie in den sichtbaren Bereich scrollen.
- Browser-Caching nutzen: Wiederkehrende Besucher müssen nicht alles neu laden.
- Critical CSS inlinen: Das CSS für den sichtbaren Bereich direkt im HTML einbetten, damit die Seite sofort rendert.
- CDN verwenden: Ein Content Delivery Network liefert Inhalte vom nächstgelegenen Server. Für Schweizer KMU ideal, da Besucher aus der Region schnell bedient werden.
Bei D3 Webstudio in Solothurn bauen wir Websites standardmässig mit Next.js – einem Framework, das automatische Bildoptimierung, Code-Splitting und Server-Side Rendering mitbringt. Das Ergebnis: Ladezeiten, die auch auf dem Smartphone beeindrucken.
Bevor du deine Website veröffentlichst (oder optimierst), solltest du sie gründlich auf Mobilgeräten testen.
- Google PageSpeed Insights: Zeigt Ladezeit und Performance-Score für Mobile separat an
- Chrome DevTools: Im Browser die Mobilansicht simulieren (F12 > Toggle Device)
- Google Search Console: Der Bericht «Mobile Nutzbarkeit» zeigt Probleme auf
- Reale Geräte: Teste auf mindestens einem iPhone und einem Android-Gerät. Simulatoren zeigen nicht alles
- Lassen sich alle Buttons und Links problemlos antippen?
- Ist der Text ohne Zoomen lesbar?
- Lädt die Seite in unter drei Sekunden?
- Funktioniert die Navigation intuitiv?
- Sind Formulare einfach auszufüllen?
- Werden Bilder korrekt angezeigt und nicht abgeschnitten?
- Gibt es horizontales Scrollen (sollte es nicht geben)?
Nein, auf keinen Fall. Separate mobile Websites (m.deinefirma.ch) sind veraltet und schlecht für SEO. Setze auf ein responsives Design, das sich automatisch an jede Bildschirmgrösse anpasst. Das ist der Standard.
Du kannst das in Google Analytics unter «Zielgruppe > Technologie > Geräte» prüfen. In der Schweiz liegt der mobile Anteil branchenübergreifend bei über 60 %, in manchen Branchen (Gastronomie, lokale Dienstleistungen) bei über 80 %.
Das hängt vom aktuellen Zustand ab. Wenn deine Website bereits responsive ist, reichen oft kleinere Anpassungen (CHF 500–1'500). Wenn das Grundgerüst nicht mobiltauglich ist, kann ein Redesign sinnvoller sein. In unserem Konfigurator kannst du die Kosten für dein Projekt unverbindlich schätzen.
Ja. Auch im B2B-Bereich nutzen Entscheidungsträger zunehmend mobile Geräte für Recherchen – besonders unterwegs, auf Messen oder zwischen Meetings. Die Desktop-Dominanz im B2B nimmt stetig ab.
Mobile-First ist keine Option mehr – es ist die Grundlage jeder erfolgreichen Website. Wenn deine Website auf dem Smartphone nicht überzeugt, verlierst du die Mehrheit deiner potenziellen Kunden, bevor sie auch nur eine Zeile gelesen haben.
Prüfe deine aktuelle Website mit den oben genannten Tools. Wenn du merkst, dass grundlegende Verbesserungen nötig sind, ist es vielleicht Zeit für einen Neuanfang mit einer modernen, Mobile-First konzipierten Website.
Starte jetzt im Website-Konfigurator und erfahre, was eine mobile-optimierte Website für dein KMU kosten würde – unverbindlich und in wenigen Minuten.
Den Gesamtüberblick über alle Aspekte einer perfekten Website findest du im Perfekte-Website-Guide für Schweizer KMU.
