Meer dan 60 procent van al het webverkeer komt tegenwoordig van mobiele apparaten. Een website die niet mobielvriendelijk is, laat de meeste bezoekers in de steek en is dus geen randgeval. Mobiel goed krijgen is geen bonusfunctie. Het is de basis waaraan een bedrijfswebsite hoort te voldoen.
Een website mobielvriendelijk maken betekent mobiele bezoekers dezelfde kwaliteit ervaring geven als bezoekers op desktop. Geen uitgeklede versie die technisch wel laadt, maar een site waar de tekst leesbaar is, de navigatie werkt, afbeeldingen goed worden getoond en formulieren echt vanaf een telefoon kunnen worden verstuurd zonder gedoe.
In dit artikel loop je door de praktische aanpassingen die een website echt mobielvriendelijk maken, van navigatie en tekst tot afbeeldingen, formulieren en snelheid.
Wat betekent mobielvriendelijk in de praktijk?
Een mobielvriendelijke website is een website waarvan elke functie op een telefoon goed werkt zonder omwegen. Tekst is leesbaar bij de standaardzoom. Navigatie opent en sluit netjes. Knoppen zijn groot genoeg om aan te tikken zonder het verkeerde element te raken. Afbeeldingen laden en worden goed getoond. Formulieren kun je zonder frustratie invullen en versturen.
Het onderscheid tussen technisch mobiel compatibel en echt mobielvriendelijk doet ertoe. Een site is technisch compatibel als hij niet stukgaat op een telefoon. Hij is echt vriendelijk als hij gebruiken op een telefoon even natuurlijk voelt als op een desktop. Het verschil zit in de details. Witruimte, lettergrootte, grootte van tikdoelen en laadtijd bepalen samen of de ervaring goed voelt of net aan werkt.
De basis van een mobielvriendelijke website is responsive design, dat de lay-out automatisch aanpast aan verschillende schermformaten. Het artikel over wat responsive design is legt uit hoe dit technisch werkt.
Hoe test je of je website mobielvriendelijk is?
De betrouwbaarste test is je eigen site doorlopen op een echte telefoon. Niet het mobiele voorbeeld van een browser. Niet een desktopvenster dat is verkleind tot een smalle kolom. Een echte telefoon, met je duimen, zoals een bezoeker hem zou gebruiken.
Loop elke pagina langs. Open de navigatie en controleer of elke link bereikbaar is. Lees de tekst om te bevestigen dat hij leesbaar is zonder in te zoomen. Tik op elke knop om te bevestigen dat hij goed reageert. Vul formulieren in en verstuur ze. Controleer of afbeeldingen laden en goed worden getoond. Controleer of niets horizontaal scrollen vraagt.
Zoekmachines bieden ook gratis mobiele testtools. Voer je URL in en de tool wijst specifieke problemen aan, zoals tekst die te klein is om te lezen, aanklikbare elementen die te dicht op elkaar staan of inhoud die breder is dan het scherm. Voor bredere tips over wat je controleert voordat een site live gaat, behandelt wat je moet weten voordat je je website lanceert testen op mobiel als onderdeel van het volledige proces voor de lancering.
Hoe laat je navigatie werken op mobiel?
Navigatie is waar de mobiele ervaring het vaakst misgaat. Een horizontaal menu dat de volledige breedte van een desktopmonitor beslaat, kan nergens heen op een telefoonscherm. De standaardoplossing is een inklapbaar menu dat je opent met een knop, meestal in de hoek bovenaan.
De menuknop moet direct herkenbaar zijn. Het pictogram met drie lijnen is een algemeen begrepen afspraak voor ingeklapte navigatiemenu's. Als het menu opent, moet het genoeg van het scherm beslaan om makkelijk te lezen en aan te tikken. Items hebben genoeg verticale ruimte nodig, zodat een vinger er een kan aantikken zonder het item erboven of eronder te raken.
Houd het mobiele menu kort. Heeft je desktopnavigatie veel items, bedenk dan welke mobiele bezoekers het meest nodig hebben en of secundaire items kunnen worden gegroepeerd of van het bovenste niveau verwijderd. Een schoner mobiel menu is makkelijker te gebruiken. Het artikel over wat websitenavigatie is behandelt navigatiestructuur en bruikbaarheid op alle apparaten.
Hoe moeten tekst en lettertypen eruitzien op mobiel?
Tekst die op een desktop makkelijk te lezen is, kan op een telefoon onaangenaam klein worden als de lettergrootte te laag is ingesteld. Een minimale lettergrootte van 16 pixels voor lopende tekst is de algemeen gebruikte standaard voor leesbaarheid op mobiel. Daaronder moet je inzoomen, en dat doen de meeste bezoekers niet.
Ook de regellengte doet ertoe. Op desktop beslaat een regel tekst misschien 600 tot 700 pixels. Op mobiel breekt dezelfde tekst af in veel kortere regels. Als de regelafstand te krap is of alinea's te lang zijn, wordt lezen onprettig op een klein scherm. Korte alinea's, ruime regelafstand en duidelijke onderbrekingen tussen secties verbeteren allemaal de leesbaarheid.
Koppen moeten proportioneel kleiner worden. Een H1 van 48 pixels op desktop kan op mobiel passend zijn op 28 tot 32 pixels. Als koppen op een telefoon de desktopgrootte houden, domineren ze het scherm en duwen ze de echte inhoud onder de vouw.
Hoe ga je om met afbeeldingen op mobiel?
Afbeeldingen zijn een van de grootste risico's voor prestaties op mobiel. Een afbeelding in volledige resolutie, ontworpen voor een desktopmonitor van 1440 pixels, is veel groter dan nodig als hij wordt getoond op een telefoonscherm van 375 pixels. Die afbeelding aan mobiele bezoekers leveren verspilt bandbreedte en vertraagt de pagina aanzienlijk.
De oplossing is afbeeldingen van het juiste formaat aan verschillende apparaten te leveren. De meeste moderne websitebouwers regelen dit automatisch door meerdere formaten te maken en op basis van het scherm het juiste te leveren. Beheer je afbeeldingen handmatig, pas ze dan aan naar het grootste formaat waarop ze worden getoond, niet naar het grootste formaat dat je camera kan maken.
Let op hoe afbeeldingen op mobiel worden bijgesneden. Een brede liggende afbeelding die op desktop in balans is, kan onhandig worden afgesneden op een hoog mobiel scherm. Hoofdafbeeldingen en bannersecties zijn de plekken waar desktop- en mobiele uitsneden het meest merkbaar uiteenlopen. Het artikel over wat websitesnelheid is legt uit wat het optimaliseren van afbeeldingen betekent voor de prestaties van de hele pagina.
Wat laat formulieren goed werken op mobiel?
Formulieren zijn op mobiel een punt met veel frictie. Velden invullen met een klein schermtoetsenbord vraagt meer dan typen op een volledig toetsenbord. Hoe minder velden je opneemt, hoe beter. Elk extra veld is een kans op frustratie en een reden om af te haken.
De grootte van invoervelden doet ertoe. Velden moeten groot genoeg zijn om nauwkeurig aan te tikken en breed genoeg dat de tekst erin leesbaar is. Labels staan boven elk veld, niet alleen als plaatshoudertekst erin, want plaatshoudertekst verdwijnt zodra iemand begint te typen.
Stel invoertypen goed in. Een e-mailveld moet het e-mailtoetsenbord tonen. Een telefoonnummerveld moet het numerieke toetsenbord tonen. Een datumveld moet een datumkiezer openen. Dit zijn kleine technische instellingen die de ervaring merkbaar soepeler maken.
Test elk formulier op je telefoon door het helemaal in te vullen en te versturen. Controleer of het versturen lukt en of een bevestiging goed verschijnt. Een contactformulier dat op desktop goed wordt verstuurd maar op mobiel mislukt, verliest ongemerkt leads zonder dat je het weet.
Hoe beïnvloedt mobielvriendelijkheid je zoekposities?
Zoekmachines indexeren eerst de mobiele versie van je website. Dat betekent dat de mobiele ervaring niet alleen belangrijk is voor mobiele bezoekers. Het is de versie die bepaalt hoe je site op alle apparaten wordt begrepen en gerangschikt.
Een site die slecht presteert op mobiel, door trage laadtijden, kapotte lay-outs of onleesbare tekst, scoort lager dan vergelijkbare sites die mobiel goed aanpakken. Bezoekers die op een mobiele site landen en direct vertrekken omdat hij niet werkt, geven een duidelijk signaal dat de pagina hun behoefte niet vervulde. Hoge bouncepercentages van mobiele bezoekers beïnvloeden de posities in de loop van de tijd.
Paginasnelheid op mobiel is een specifieke factor. Een pagina die op een snelle breedbandverbinding in twee seconden laadt, kan op een gewone mobiele verbinding zes seconden of meer duren. Geoptimaliseerde afbeeldingen, weinig blokkerende scripts en een schone sjabloonstructuur dragen allemaal bij aan snellere mobiele laadtijden. Voor het volledige beeld van hoe zoekmachineoptimalisatie werkt, behandelt wat SEO is het hele onderwerp, inclusief technische factoren.
Zo regelt WEMASY mobiel
De Websitebouwer van WEMASY gebruikt responsive sjablonen die zich automatisch aanpassen aan desktop, tablet en mobiel. De visuele editor bevat een mobiel voorbeeld, zodat je tijdens het bouwen kunt controleren hoe elke sectie eruitziet op een klein scherm. Het optimaliseren van afbeeldingen en mobiele prestaties regelt het platform in plaats van dat je ze handmatig moet instellen.
Bekijk wat erbij zit op de WEMASY Websitebouwer of bekijk de abonnementen op de prijspagina.
Veelgestelde vragen
Hoe weet ik of mijn website mobielvriendelijk is?
Loop je site langs op een echte telefoon. Test elke pagina, elk navigatie-item, elk formulier en elke knop. Zoekmachines bieden ook gratis mobiele testtools waarin je je URL invoert en die specifieke problemen aanwijzen. De combinatie van een handmatige controle en een controle met een tool brengt de problemen aan het licht die het meest tellen. Mobiele voorbeelden in de browser zijn handig tijdens het bouwen, maar geven de ervaring op een echt apparaat niet volledig weer. Met de Websitebouwer van WEMASY zet je dit direct op je website.
Kan ik een bestaande website mobielvriendelijk maken zonder hem opnieuw te bouwen?
Dat hangt af van hoe de site is gebouwd. Bij sites op moderne websitebouwers kun je de mobiele ervaring vaak verbeteren door de instellingen van het sjabloon aan te passen, afbeeldingen aan te passen of over te stappen op een beter sjabloon. Sites op maatwerkcode of oudere platforms vragen mogelijk meer werk. In sommige gevallen is opnieuw bouwen op een actueel platform sneller en geeft het een beter resultaat dan een oudere site in vorm proberen te krijgen.
Scoort een mobielvriendelijke website hoger in zoekresultaten?
Zoekmachines gebruiken de mobiele versie van je site als primaire versie voor indexeren en rangschikken. Een site die goed werkt op mobiel en snel laadt op een telefoon, presteert over het algemeen beter dan een site die vooral voor desktop is gebouwd. Naast het voordeel voor de ranking houdt een mobielvriendelijke site bezoekers langer vast, verlaagt hij het bouncepercentage en converteert hij beter. Ook deze gedragssignalen beïnvloeden de zoekprestaties op de lange termijn.
Wat is de minimale lettergrootte voor een mobiele website?
Een lettergrootte van 16 pixels voor lopende tekst is het algemeen aanbevolen minimum voor leesbaarheid op mobiel. Daaronder wordt tekst moeilijk te lezen zonder in te zoomen. Koppen moeten proportioneel meeschalen, zodat ze het scherm niet overweldigen. Een regelafstand van minstens 1,5 keer de lettergrootte verbetert de leesbaarheid op kleine schermen, vooral bij langere alinea's.
Hoe groot moeten knoppen zijn op een mobiele website?
Een minimale tikgrootte van 44 bij 44 pixels wordt algemeen aanbevolen voor mobiele knoppen. Dat geeft een vinger een duidelijk doel en vermindert per ongeluk aantikken van naastgelegen elementen. Knoppen moeten ook genoeg ruimte tussen zich hebben, zodat een tik op de ene niet als tik op iets in de buurt wordt geregistreerd. Call-to-action-knoppen moeten groot en visueel duidelijk zijn en met de duim te bereiken zonder de telefoon te verplaatsen.