Optimierung der mobilen Ansicht in Sitebuilder
Optimierung der mobilen Ansicht in Sitebuilder
Mehr als 60% Ihrer Besucher betrachten Ihre Website auf einem Smartphone oder Tablet. Eine Website, die auf Mobilgeräten nicht gut funktioniert, verliert Besucher und Kunden. Sitebuilder macht es einfach, Ihre Website auf jedem Bildschirmformat perfekt funktionieren zu lassen.
Warum mobile Optimierung wichtig ist
Die Auswirkungen mobiler Nutzer:
- Google verwendet Mobile-First-Indexierung für Rankings
- Besucher verlassen langsame mobile Seiten innerhalb von 3 Sekunden
- Schlechte mobile Erfahrung schadet Ihrem Markenimage
- Mobile Konversionen wachsen schneller als Desktop
- Viele Besucher kommen nur über Mobilgeräte
Grundlagen des responsiven Designs
Was ist responsives Design
Responsives Design passt Ihre Website automatisch an den Bildschirm an. Elemente werden umgeordnet, Text skaliert und Bilder passen sich an.
Wie Sitebuilder dies regelt
Sitebuilder ist vollständig responsive out of the box:
- Spalten stapeln sich automatisch auf kleinen Bildschirmen
- Textgröße passt sich an
- Navigation wird zu einem Hamburger-Menü
- Bilder skalieren proportional
Mobile Vorschau
Die mobile Ansicht anzeigen
- Öffnen Sie den Seiten-Editor
- Klicken Sie auf das Mobil-Icon in der Symbolleiste
- Sie sehen nun die mobile Ansicht
- Klicken Sie auf das Tablet-Icon für diese Ansicht
Verschiedene Bildschirmformate testen
Testen Sie auf mehreren Formaten:
- Desktop (1920px und breiter)
- Laptop (1024-1366px)
- Tablet (768-1024px)
- Großes Telefon (414-768px)
- Kleines Telefon (320-414px)
Elemente an Geräte anpassen
Sichtbarkeit pro Gerät
Verbergen oder zeigen Sie Elemente speziell für Mobilgeräte:
- Wählen Sie ein Element aus
- Gehen Sie zu Einstellungen
- Finden Sie Sichtbarkeit
- Wählen Sie:
- Anzeigen auf Desktop
- Anzeigen auf Tablet
- Anzeigen auf Mobil
- Schalten Sie pro Gerät ein oder aus
Wann Elemente verbergen
Gute Gründe, um auf Mobilgeräten zu verbergen:
- Große Bilder, die ablenken
- Seitenleisten, die nicht passen
- Sekundäre Inhalte
- Komplexe Tabellen
Mobil-spezifische Inhalte
Fügen Sie alternative Inhalte für Mobilgeräte hinzu:
- Erstellen Sie eine vereinfachte Version
- Zeigen Sie nur auf Mobilgeräten
- Verbergen Sie die komplexe Version auf Mobilgeräten
Navigation optimieren
Hamburger-Menü
Auf Mobilgeräten wird Ihr Menü automatisch zu einem Hamburger-Menü:
- Gehen Sie zu Header-Einstellungen
- Konfigurieren Sie das Mobile Menü
- Wählen Sie:
- Menü-Icon (Hamburger, Kreuz, etc.)
- Animation
- Hintergrundfarbe
Sticky Header
Halten Sie die Navigation beim Scrollen sichtbar:
- Wählen Sie den Header aus
- Schalten Sie Sticky ein
- Der Header bleibt beim Scrollen oben
- Testen Sie, ob dies auf Mobilgeräten gut funktioniert
Touch-freundliche Links
Stellen Sie sicher, dass Links leicht zu tippen sind:
- Mindestens 44x44 Pixel
- Ausreichender Abstand zwischen Links
- Deutliche visuelle Rückmeldung bei Berührung
Typografie anpassen
Textgröße pro Gerät
- Wählen Sie einen Textblock aus
- Wechseln Sie zur mobilen Ansicht
- Passen Sie die Textgröße für Mobilgeräte an
- Überschriften oft 20-30% kleiner
Zeilenhöhe und Abstand
Auf kleinen Bildschirmen:
- Erhöhen Sie die Zeilenhöhe für bessere Lesbarkeit
- Verringern Sie Abstände zwischen Absätzen
- Halten Sie ausreichend Weißraum
Schriftarten-Optimierung
- Verwenden Sie maximal 2 Schriftarten
- Wählen Sie lesbare Schriftarten für kleine Bildschirme
- Vermeiden Sie zu dünne Schriftarten
Bilder optimieren
Responsive Bilder
Sitebuilder lädt automatisch die richtige Bildgröße:
- Kleinere Versionen für Mobilgeräte
- Spart Bandbreite und Ladezeit
- Erhaltung der Qualität
Bildformat
- Verwenden Sie WebP, wo möglich
- JPEG für Fotos
- PNG für Grafiken mit Transparenz
- SVG für Logos und Icons
Lazy Loading
Laden Sie Bilder erst, wenn sie im Sichtfeld erscheinen:
- Gehen Sie zu Site-Einstellungen
- Schalten Sie Lazy Loading ein
- Bilder laden beim Scrollen
Formulare für Mobilgeräte
Touch-freundliche Eingabefelder
- Machen Sie Eingabefelder groß genug
- Fügen Sie ausreichend Abstand zwischen Feldern hinzu
- Verwenden Sie den richtigen Eingabetyp:
- email für E-Mail-Adressen
- tel für Telefonnummern
- number für Zahlen
Tastatur-Optimierung
Die richtige Tastatur erscheint automatisch:
- E-Mail-Feld: @ Taste direkt verfügbar
- Telefon: numerische Tastatur
- URL: .com Taste verfügbar
Senden-Button
- Machen Sie den Button breit genug
- Platzieren Sie ihn unten im Formular
- Verwenden Sie einen klaren Call-to-Action
Geschwindigkeit optimieren
Mobile Ladezeit
Mobile Nutzer erwarten Geschwindigkeit:
- Gehen Sie zu Einstellungen und wählen Sie Leistung
- Schalten Sie Caching ein
- Aktivieren Sie Code-Minimierung
- Schalten Sie Lazy Loading ein
Kritische Inhalte zuerst
- Stellen Sie sicher, dass Above-the-Fold-Inhalte schnell laden
- Priorisieren Sie wichtige Bilder
- Vermeiden Sie blockierende Skripte
AMP in Betracht ziehen
Für inhaltsorientierte Seiten:
- AMP-Versionen laden blitzschnell
- Gut für Nachrichtenartikel und Blogs
- Erfordert spezifische Implementierung
Touch-Gesten
Scroll-Verhalten
- Sorgen Sie für sanftes Scrollen
- Vermeiden Sie horizontales Scrollen
- Testen Sie lange Seiten auf Mobilgeräten
Swipe-Aktionen
Einige Elemente unterstützen Wischen:
- Bilderkarussells
- Produktgalerien
- Testimonial-Slider
Testen und Debuggen
Real Device Testing
Nichts ersetzt echtes Testen:
- Öffnen Sie Ihre Website auf Ihrem Telefon
- Testen Sie alle Seiten und Funktionen
- Versuchen Sie, Formulare auszufüllen
- Überprüfen Sie den Checkout-Prozess
Chrome DevTools
Testen Sie in Ihrem Browser:
- Öffnen Sie Chrome DevTools (F12)
- Klicken Sie auf das mobile Icon
- Wählen Sie ein Gerät aus
- Testen Sie die Interaktion
Häufige Probleme
Überprüfen Sie auf:
- Text, der zu klein ist, um gelesen zu werden
- Schaltflächen, die zu nah beieinander liegen
- Bilder, die außerhalb des Bildschirms fallen
- Formulare, die schwer auszufüllen sind
Mobile-First-Checkliste
Für jede Seite überprüfen:
- Lädt die Seite innerhalb von 3 Sekunden?
- Sind alle Elemente sichtbar und lesbar?
- Funktioniert die Navigation gut?
- Sind Formulare leicht auszufüllen?
- Funktionieren alle Links und Schaltflächen?
- Gibt es kein unerwünschtes horizontales Scrollen?
Verwandte Artikel
- Google Analytics mit Sitebuilder verbinden
- Social-Media-Buttons hinzufügen
- Zahlungen in Sitebuilder akzeptieren
Brauchen Sie Hilfe?
Wir sind für Sie da! Haben Sie Fragen oder stoßen Sie auf Probleme? Unser Support-Team hilft Ihnen gerne persönlich weiter. Senden Sie uns eine Nachricht über das Ticketsystem - wir antworten in der Regel innerhalb weniger Stunden und denken gerne mit Ihnen mit.
0 van 0 vonden dit nuttig
