Responsive design: maak je Webey-site mobielvriendelijk

Meer dan 60% van al het internetverkeer komt tegenwoordig van mobiele apparaten. Als je website niet goed werkt op een smartphone of tablet, verlies je niet alleen bezoekers maar ook posities in Google. In dit artikel leer je hoe Webey responsive design afhandelt en hoe je zelf kunt zorgen dat je site er op elk schermformaat perfect uitziet.

Wat is responsive design?

Responsive design betekent dat je website zich automatisch aanpast aan het schermformaat van de bezoeker. Of iemand nu kijkt op een groot desktopscherm, een tablet of een smartphone: de inhoud wordt altijd overzichtelijk en leesbaar weergegeven. In plaats van een aparte mobiele website te bouwen, gebruik je één ontwerp dat flexibel meeschaalt.

Hoe Webey responsive design afhandelt

Webey is vanaf de basis gebouwd met responsive design in gedachten. Alle 24+ bloktypen zijn zo ontworpen dat ze automatisch meeschalen naar kleinere schermen. Je hoeft daar zelf niets voor in te stellen — het werkt out of the box. Hier zijn de belangrijkste mechanismen:

• Automatisch stapelen van kolommen: Gebruik je een columns-blok met twee of drie kolommen? Op brede schermen staan ze naast elkaar, maar op mobiel worden ze automatisch onder elkaar gestapeld. Zo blijft de inhoud leesbaar zonder horizontaal scrollen.
• Afbeeldingsschaling: Alle afbeeldingen in Webey schalen proportioneel mee met de breedte van het scherm. Een hero-afbeelding die op desktop het volledige scherm vult, wordt op mobiel verkleind maar behoudt de juiste verhoudingen.
• Flexibele typografie: Koppen en bodytekst passen zich aan op basis van het schermformaat. Een H1-kop die op desktop 48px is, wordt op mobiel automatisch kleiner zodat de tekst niet buiten het scherm valt.
• Touch-vriendelijke knoppen: Knoppen en links krijgen automatisch voldoende ruimte en een minimale aanraakgrootte van 44x44 pixels, zodat ze op touchscreens goed te bedienen zijn.

De mobiele preview gebruiken in de editor

Webey biedt in de blok-editor een live preview waarmee je direct kunt zien hoe je pagina eruitziet. Om te controleren hoe je site op mobiel wordt weergegeven:

• Open je pagina in de editor.
• Klik op het smartphone-icoon in de werkbalk bovenaan de preview.
• De preview schakelt over naar een mobiele weergave zodat je direct kunt zien hoe blokken zich herschikken.
• Controleer of alle teksten goed leesbaar zijn, of afbeeldingen niet worden afgesneden en of knoppen voldoende ruimte hebben.

Gebruik deze preview altijd voordat je een pagina publiceert. Wat er op desktop goed uitziet, kan op mobiel anders uitpakken.

Lettergroottes op mobiel

Een veelgemaakte fout is te kleine tekst op mobiele apparaten. Webey gebruikt standaard een minimale lettergrootte van 16px voor bodytekst. Dit voorkomt dat bezoekers moeten inzoomen om te kunnen lezen. Als je in een html- of code-blok aangepaste CSS gebruikt, zorg er dan voor dat je geen lettergrootte kleiner dan 14px instelt voor lopende tekst.

Afbeeldingsdimensies voor mobiel

Grote afbeeldingen zorgen voor langzame laadtijden op mobiele netwerken. Houd rekening met deze richtlijnen:

• Hero-afbeeldingen: maximaal 1920x1080 pixels, geoptimaliseerd tot onder de 200 KB.
• Content-afbeeldingen: maximaal 1200x800 pixels, geoptimaliseerd tot onder de 150 KB.
• Galerij-thumbnails: maximaal 600x400 pixels, onder de 80 KB.

Upload afbeeldingen in WebP- of JPEG-formaat voor de beste balans tussen kwaliteit en bestandsgrootte. Vermijd PNG voor foto's — dat formaat levert onnodig grote bestanden op.

Navigatie op mobiel: het hamburgermenu

Op desktopschermen toont Webey je navigatiemenu als een horizontale balk. Op mobiele apparaten wordt dit automatisch omgezet naar een hamburgermenu (het bekende icoon met drie horizontale lijnen). Bezoekers tikken op het icoon om het menu te openen. Zorg ervoor dat je menulabels kort en duidelijk zijn, zodat het menu ook op een smal scherm overzichtelijk blijft. Beperk het hoofdmenu tot maximaal 6 tot 8 items en gebruik eventueel submenu's voor extra pagina's.

Veelgemaakte fouten bij mobiel ontwerp

Vermijd deze veelvoorkomende problemen:

• Te brede tabellen: Een table-blok met veel kolommen kan op mobiel horizontaal scrollen vereisen. Gebruik maximaal 3 kolommen of overweeg een card-grid-blok als alternatief.
• Tekst over afbeeldingen: Overlappende tekst op afbeeldingen is op desktop mooi, maar kan op mobiel onleesbaar worden. Test dit altijd in de mobiele preview.
• Te kleine aanraakdoelen: Links en knoppen die te dicht bij elkaar staan zijn moeilijk aan te tikken. Houd minimaal 8px ruimte tussen klikbare elementen.
• Pop-ups en overlays: Grote modals die het hele scherm vullen zijn op mobiel frustrerend. Gebruik ze spaarzaam.
• Horizontaal scrollen: Als een element breder is dan het scherm ontstaat er een horizontale scrollbalk. Dit is een teken dat je ontwerp niet goed responsief is.

Google Mobile-First Indexing

Google gebruikt sinds 2021 mobile-first indexing. Dit betekent dat Google de mobiele versie van je website als primaire bron gebruikt voor het indexeren en ranken van je pagina's. Als je mobiele versie slecht is — trage laadtijden, ontbrekende content of slechte usability — dan heeft dat direct invloed op je positie in de zoekresultaten, ook op desktop.

Met Webey hoef je hier niet over in te zitten: alle pagina's worden automatisch geoptimaliseerd voor mobiel. Zorg er wel voor dat je geen content verbergt die alleen op desktop zichtbaar is, want die wordt door Google mogelijk niet geïndexeerd.

Viewport-instellingen

Webey voegt automatisch de juiste viewport meta tag toe aan elke pagina: <meta name="viewport" content="width=device-width, initial-scale=1">. Dit zorgt ervoor dat mobiele browsers de pagina op de juiste schaal weergeven. Je hoeft dit niet handmatig in te stellen — het is standaard inbegrepen in elke Webey-site.

Checklist voor een mobielvriendelijke site

• Controleer elke pagina in de mobiele preview voordat je publiceert.
• Houd lettergroottes boven de 14px voor bodytekst.
• Optimaliseer afbeeldingen voor snelle laadtijden.
• Beperk het aantal kolommen in tabellen tot maximaal 3.
• Zorg voor voldoende ruimte tussen klikbare elementen.
• Test je site op meerdere apparaten of gebruik de Chrome DevTools device simulator.
• Controleer je site met de Google Mobile-Friendly Test (search.google.com/test/mobile-friendly).