Mobiele weergave optimaliseren in Sitebuilder
Mobiele weergave optimaliseren in Sitebuilder
Meer dan 60% van je bezoekers bekijkt je website op een smartphone of tablet. Een website die niet goed werkt op mobiel verliest bezoekers en klanten. Sitebuilder maakt het eenvoudig om je website perfect te laten werken op elk schermformaat.
Waarom mobiele optimalisatie belangrijk is
De impact van mobiele gebruikers:
- Google gebruikt mobile-first indexing voor rankings
- Bezoekers verlaten langzame mobiele sites binnen 3 seconden
- Slechte mobiele ervaring schaadt je merkimago
- Mobiele conversies groeien sneller dan desktop
- Veel bezoekers komen alleen via mobiel
Responsive design basics
Wat is responsive design
Responsive design past je website automatisch aan het scherm aan. Elementen herschikken, tekst schaalt en afbeeldingen passen zich aan.
Hoe Sitebuilder dit regelt
Sitebuilder is volledig responsive out of the box:
- Kolommen stapelen automatisch op kleine schermen
- Tekstgrootte past zich aan
- Navigatie wordt een hamburgermenu
- Afbeeldingen schalen proportioneel
Mobiele preview
De mobiele weergave bekijken
- Open de pagina-editor
- Klik op het mobiel icoon in de toolbar
- Je ziet nu de mobiele weergave
- Klik op het tablet icoon voor die weergave
Verschillende schermformaten testen
Test op meerdere formaten:
- Desktop (1920px en breder)
- Laptop (1024-1366px)
- Tablet (768-1024px)
- Grote telefoon (414-768px)
- Kleine telefoon (320-414px)
Elementen aanpassen per apparaat
Zichtbaarheid per apparaat
Verberg of toon elementen specifiek voor mobiel:
- Selecteer een element
- Ga naar Instellingen
- Vind Zichtbaarheid
- Kies:
- Toon op desktop
- Toon op tablet
- Toon op mobiel
- Schakel in of uit per apparaat
Wanneer elementen verbergen
Goede redenen om te verbergen op mobiel:
- Grote afbeeldingen die afleiden
- Zijbalken die niet passen
- Secundaire content
- Complexe tabellen
Mobiel-specifieke content
Voeg alternatieve content toe voor mobiel:
- Maak een vereenvoudigde versie
- Toon alleen op mobiel
- Verberg de complexe versie op mobiel
Navigatie optimaliseren
Hamburgermenu
Op mobiel wordt je menu automatisch een hamburgermenu:
- Ga naar Header instellingen
- Configureer het Mobiele menu
- Kies:
- Menu icoon (hamburger, kruis, etc.)
- Animatie
- Achtergrondkleur
Sticky header
Houd de navigatie zichtbaar bij scrollen:
- Selecteer de header
- Schakel Sticky in
- De header blijft bovenaan bij scrollen
- Test of dit goed werkt op mobiel
Touch-vriendelijke links
Zorg dat links makkelijk aan te tikken zijn:
- Minimaal 44x44 pixels
- Voldoende ruimte tussen links
- Duidelijke visuele feedback bij touch
Typografie aanpassen
Tekstgrootte per apparaat
- Selecteer een tekstblok
- Schakel naar mobiele weergave
- Pas de tekstgrootte aan voor mobiel
- Koppen vaak 20-30% kleiner
Lijnhoogte en spacing
Op kleine schermen:
- Verhoog de lijnhoogte voor leesbaarheid
- Verminder marges tussen paragrafen
- Houd voldoende witruimte
Lettertype-optimalisatie
- Gebruik maximaal 2 lettertypen
- Kies leesbare fonts voor kleine schermen
- Vermijd te dunne lettertypes
Afbeeldingen optimaliseren
Responsive afbeeldingen
Sitebuilder laadt automatisch de juiste afbeeldingsgrootte:
- Kleinere versies voor mobiel
- Spaart bandbreedte en laadtijd
- Behoud van kwaliteit
Afbeeldingsformaat
- Gebruik WebP waar mogelijk
- JPEG voor fotos
- PNG voor graphics met transparantie
- SVG voor logo en iconen
Lazy loading
Laad afbeeldingen pas wanneer ze in beeld komen:
- Ga naar Site instellingen
- Schakel Lazy loading in
- Afbeeldingen laden tijdens scrollen
Formulieren voor mobiel
Touch-vriendelijke invoervelden
- Maak invoervelden groot genoeg
- Voeg voldoende ruimte toe tussen velden
- Gebruik het juiste invoertype:
- email voor e-mailadressen
- tel voor telefoonnummers
- number voor getallen
Toetsenbord optimalisatie
Het juiste toetsenbord verschijnt automatisch:
- E-mail veld: @ toets direct beschikbaar
- Telefoon: numeriek toetsenbord
- URL: .com knop beschikbaar
Verstuurknop
- Maak de knop breed genoeg
- Plaats onderin het formulier
- Gebruik een duidelijke call-to-action
Snelheid optimaliseren
Mobiele laadtijd
Mobiele gebruikers verwachten snelheid:
- Ga naar Instellingen en selecteer Prestaties
- Schakel Caching in
- Activeer Code minificatie
- Schakel Lazy loading in
Kritische content eerst
- Zorg dat boven-de-vouw content snel laadt
- Stel prioriteit in voor belangrijke afbeeldingen
- Vermijd blokkerende scripts
AMP overwegen
Voor content-gerichte sites:
- AMP versies laden razendsnel
- Goed voor nieuwsartikelen en blogs
- Vereist specifieke implementatie
Touch gebaren
Scroll gedrag
- Zorg voor soepel scrollen
- Vermijd horizontaal scrollen
- Test lange paginas op mobiel
Swipe acties
Sommige elementen ondersteunen swipen:
- Afbeeldingscarousels
- Productgalerijen
- Testimonial sliders
Testen en debuggen
Real device testing
Niets vervangt echt testen:
- Open je site op je telefoon
- Test alle paginas en functies
- Probeer formulieren in te vullen
- Controleer de checkout flow
Chrome DevTools
Test in je browser:
- Open Chrome DevTools (F12)
- Klik op het mobiele icoon
- Selecteer een apparaat
- Test de interactie
Veelvoorkomende problemen
Controleer op:
- Tekst die te klein is om te lezen
- Knoppen die te dicht bij elkaar staan
- Afbeeldingen die buiten het scherm vallen
- Formulieren die moeilijk in te vullen zijn
Mobile-first checklist
Voor elke pagina controleren:
- Laadt de pagina binnen 3 seconden?
- Zijn alle elementen zichtbaar en leesbaar?
- Werkt de navigatie goed?
- Zijn formulieren makkelijk in te vullen?
- Werken alle links en knoppen?
- Is er geen ongewenst horizontaal scrollen?
Gerelateerde artikelen
- Google Analytics koppelen aan Sitebuilder
- Social media knoppen toevoegen
- Betalingen accepteren in Sitebuilder
Hulp nodig?
We staan voor je klaar! Loop je ergens tegenaan of heb je vragen? Ons supportteam helpt je graag persoonlijk verder. Stuur ons een berichtje via het ticketsysteem - we reageren meestal binnen een paar uur en denken graag met je mee.
0 van 0 vonden dit nuttig
