Mehr als die Hälfte des Internetverkehrs erfolgt über mobile Geräte. Websites, die nicht mobil optimiert sind, riskieren schlechtere Suchmaschinenplatzierungen und verlieren potenziellen Traffic. Eine gute mobile Nutzererfahrung steigert nicht nur die Zufriedenheit der Besucher, sondern auch Verkäufe und Sichtbarkeit.
Optimieren Sie Ladezeiten, gestalten Sie Inhalte mobilfreundlich und testen Sie regelmäßig. Eine mobil optimierte Website sorgt für höhere Kundenbindung und bessere Geschäftsergebnisse.
Mobile Design Grundlagen
Mobile-First vs. Responsive Design
Mobile-First Design konzentriert sich zunächst auf die mobile Version einer Website und erweitert diese dann für grössere Bildschirme. Dieser Ansatz eignet sich besonders für Websites mit:
- einem klaren Fokus auf mobile Nutzer
- einfachen Interaktionen und
- einem überschaubaren Umfang an Inhalten.
- inhaltsreiche Websites
- Seiten mit komplexen Formularen und
- Plattformen, bei denen die Mehrheit der Nutzer über den Desktop zugreift.
Beide Ansätze bieten unterschiedliche Vorteile und bilden die Basis für durchdachte Designstrategien, die im nächsten Abschnitt genauer beleuchtet werden.
Designregeln für Mobile Websites
Diese Prinzipien helfen dabei, die Nutzerfreundlichkeit zu maximieren und gleichzeitig die Conversion-Rate zu steigern.
Mobile Accessibility
Neben einem guten Design ist auch die Barrierefreiheit ein zentraler Aspekt. Wichtige Massnahmen zur Umsetzung umfassen:
- Anpassung von Farbkontrasten und Schriftgrössen nach dem WCAG 2.1 AA-Standard
- Sicherstellung der Tastaturnavigation
- Bereitstellung von Alternativtexten für Bilder sowie
- Untertitel oder Transkripte für Multimedia-Inhalte.
Speed und Performance
Tipps zur Ladegeschwindigkeit
Round Trip Requests (RTRs) reduzieren:
- JavaScript- und CSS-Dateien zusammenfassen
- Fehlende Ressourcen und Weiterleitungen beheben
- Die Reihenfolge der Ressourcenladevorgänge optimieren
Eine gute Strategie legt den Fokus auf kritische Inhalte wie den Head-Tag und das grundlegende Layout, während weniger wichtige Inhalte per Lazy-Loading nachgeladen werden. Danach sollte die Optimierung von Bildern im Mittelpunkt stehen, da sie oft eine erhebliche Datenlast verursachen.
| Designprinzip | Beschreibung | Vorteil |
|---|---|---|
| Klare Navigation | Einsatz von Tab-Bars statt Hamburger-Menüs | Bessere Auffindbarkeit der Inhalte |
| Beschriftete Icons | Text-Labels für alle Icons | Weniger Missverständnisse und Bedienungsfehler |
| Touch-Targets | Mindestens 44 Pixel gross | Einfachere Bedienung und präzisere Interaktionen |
| Schnelle Ladezeiten | Optimierte Medien und technische Umsetzung | Vermeidung von Konversionsverlusten – eine Sekunde Verzögerung kann bis zu 20 % Rückgang bedeuten |
Mobile Bildoptimierung
Sobald die kritischen Ressourcen priorisiert sind, ist die Optimierung von Bildern der nächste Schritt. Bilder machen oft mehr als 50 % des Seitengewichts aus.
Empfohlene Bildgrössen:
Hero-Bilder: 800 x 1.200 Pixel
Banner: 320 x 480 Pixel, 300 x 250 Pixel oder 320 x 50 Pixel
Blog-Bilder: 640 x 320 Pixel
Caching-Strategien
Neben den oben genannten Massnahmen kann ein durchdachtes Caching die Gesamtperformance deutlich verbessern. Hier sind einige Ansätze:
LocalStorage: Ideal für kleinere Datenmengen.
IndexedDB: Geeignet für grössere, strukturierte Datensätze.
Mobile Content Guide
Texte für Mobile optimieren
Inhalte für mobile Geräte erfordern eine klare und durchdachte Herangehensweise. Der sogenannte «Bite, Snack, Meal»-Ansatz ist dabei besonders hilfreich: Die Überschrift dient als «Bite», die Zusammenfassung als «Snack» und der vollständige Artikel als «Meal».
Einige Tipps für eine optimale Textstruktur:
- Kurze Überschriften (ca. 6 Wörter)
- Knackige Absätze
- Einfache, leicht verständliche Sprache
- Genügend Weissraum für bessere Lesbarkeit
Hier ein kleiner Spickzettel für vereinfachte Formulierungen:
Mit prägnanten Texten schaffen Sie die Basis – jetzt geht es darum, wie Sie Medieninhalte optimal für mobile Nutzer gestalten.
Best Practices für mobile Medien
Bilder spielen eine grosse Rolle, da sie oft über 60 % des Seitengewichts ausmachen. Zudem nutzen 80 % der Social-Media-User ihre Plattformen überwiegend mobil.
Empfohlene Bildformate:
Quadratisch: 1.080 x 1.080 Pixel
Hochformat: 1.080 x 1.350 Pixel
Vertikale Videos: 9:16-Format
Hochwertige und optimierte Medien sind essenziell, aber auch mobile Funktionen tragen entscheidend zum Nutzererlebnis bei.
Mobile-spezifische Funktionen
Neben optimierten Texten und Bildern bieten Smartphones native Funktionen, die das mobile Nutzererlebnis bereichern. Hier einige Beispiele:
Augmented Reality (AR): Virtuelle Produktansichten
GPS: Standortbasierte Dienste
Kamera: QR-Code-Scanning
Bewegungssensoren: Fitness-Tracking
Mobile Websites testen
Mobile Testing Tools
Wichtige Kennzahlen, die Sie im Blick behalten sollten:
Ladegeschwindigkeit: Seiten sollten in weniger als 3 Sekunden laden, da 40 % der Nutzer langsame Seiten verlassen.
Absprungrate: Vergleichen Sie, wie viele Nutzer mobil im Vergleich zu Desktop abspringen.
Mobile Käufe: Rund 30 % aller Online-Käufe werden über mobile Geräte getätigt.
Verweildauer: Analysieren Sie, wie lange Nutzer pro Seite und Gerät bleiben.
A/B-Testing Guide
Bereiche, die Sie testen sollten:
Navigation: Ist die Menüführung logisch und sind Touch-Targets leicht bedienbar?
Formulare: Sind Eingabefelder benutzerfreundlich und die Tastatureingabe optimiert?
Content-Layout: Wie wirken Anordnung und Gewichtung der Inhalte?
Call-to-Actions: Sind Handlungsaufforderungen klar sichtbar und leicht anklickbar?
Führen Sie Tests regelmässig auf verschiedenen Geräten (z. B. Samsung, iPhone, Tablets) und unter unterschiedlichen Netzwerkbedingungen durch. Achten Sie dabei besonders auf Touch-Interaktionen und die Darstellung auf verschiedenen Bildschirmgrössen.
CEO, MIK Group
Maxi Maxhuni ist CEO der MIK Group und Experte für Suchmaschinenoptimierung und digitale Wachstumsstrategien. Mit über 10 Jahren Erfahrung im Online-Marketing hilft er Schweizer KMU, ihre digitale Sichtbarkeit nachhaltig zu steigern.