Weet je nog dat je het wereldwijde web opging door in te bellen op een groot, log ding dat piepte en kraakte als een oude radio? Nou, die tijden zijn al heel lang voorbij, hoeven we je hopelijk niet te vertellen. We leven nu in de wereld van de smartphone. Grote kans dat jij dit artikel leest op een klein schermpje.
Waarom mobiele optimalisatie essentieel is
Als je website een absolute ramp is op smarthphones en tablets, dan verlies je niet alleen bezoekers, maar ook je geloofwaardigheid. Misschien denk je nu: Ach, die paar mobiele gebruikers, die kunnen toch gewoon mijn desktopversie bekijken? Nou, nee. Dat kunnen ze niet. Sterker nog, als je website op hun telefoon een chaos is van verschuivende tekstblokken en foto’s die maar half laden, klikken ze net zo snel weg als jij ‘bounce rate’ kunt zeggen. Mobiele optimalisatie is geen luxe meer, het is een noodzaak.
Enkele harde feiten:
- 60,67 % van al het internetverkeer komt van mobiele apparaten. Yep, de meeste mensen scrollen door je website terwijl ze in de rij staan voor koffie of tussen twee afleveringen van hun favoriete Netflix-serie.
- Google bestraft websites die niet mobielvriendelijk zijn. En aangezien we allemaal willen dat Google ons aardig vindt (hallo, SEO!), is dit iets waar je écht aandacht aan moet besteden.
Als je website op mobiel niet lekker loopt, is dat alsof je een prachtige winkel hebt, maar mensen een obstakelkoers moet overwinnen om binnen te komen. Ze willen niet wachten tot je website zich aanpast; ze willen snelheid, gebruiksgemak en vooral: een soepele mobiele ervaring.
Responsief design versus een aparte mobiele versie
Dus wat doe je? Je hebt twee keuzes. Je kunt een aparte mobiele versie van je website maken. Of je gaat voor een responsief design. Wat is het verschil? En belangrijker nog: wat is de beste keuze?
De mobiele versie: de tweeling
In de vroege dagen van de smartphone was het normaal om een aparte mobiele versie van je website te hebben. Zeg maar een soort van tweeling. Het idee was simpel: je hebt een website voor desktops en een aparte voor mobiele apparaten. Klinkt goed, toch? Niet echt. Het is een beetje alsof je twee winkels runt: eentje voor mensen met fietsen en eentje voor mensen met auto’s. Het is een hoop werk, en als je iets aanpast op de ene versie, moet je dat ook op de andere doen.
Responsief design: de kameleon
Dan is er responsief design: je website past zich automatisch aan, ongeacht het apparaat dat je bezoeker gebruikt. Of ze nu op een smartphone zitten, een tablet of een laptop: je website ziet er altijd top uit. Geen gedoe met twee versies en geen halve webpagina’s die afgekapt worden omdat ze niet op één scherm passen. En bonuspunten: Google is er dol op. Responsief design is flexibel, toekomstbestendig en het bespaart je een hoop hoofdpijn.
Dus tenzij je graag dubbel werk doet, is responsief design de slimste keuze. En laten we eerlijk zijn, niemand heeft tijd voor dubbel werk.
Tools voor het testen van responsiviteit
Nu je (hopelijk) overtuigd bent van het belang van een mobielvriendelijke website, is het tijd om te testen of jouw site daadwerkelijk soepel draait op al die verschillende apparaten. En nee, dat betekent niet dat je een vriend met een iPhone moet bellen, een buurman met een Android en je tante met een tablet om te checken of alles werkt. Gelukkig zijn er handige tools om je hierbij te helpen.
Google’s Mobile-Friendly Test
Dit is de eerste stop. Als je website door de keuring van het almachtige Google komt, ben je al een heel eind. Typ gewoon je URL in en Google laat je weten of je website mobielvriendelijk is. Simpel, maar effectief.
Responsinator
Wil je echt zien hoe je site eruitziet op verschillende apparaten, zonder dat je een stapel telefoons op je bureau hebt liggen? Responsinator geeft je een preview van je website op verschillende schermgroottes. Het is alsof je in een spiegel kijkt, maar dan voor je site.
BrowserStack
Voor de perfectionisten onder ons (en dat ben jij vast ook als je je website serieus neemt), biedt BrowserStack je de mogelijkheid om je website in realtime te testen op een hele reeks apparaten en browsers. Geen excuses meer om iets over het hoofd te zien.
Viewport Resizer
Een handige tool voor die momenten dat je op je desktop werkt, maar even snel wilt zien hoe je site eruitziet op verschillende schermgroottes. Met één klik pas je de grootte van je browservenster aan en voilà: je ziet meteen hoe je site zich gedraagt op kleinere schermen.
Best practices voor responsief design
Nu je weet waarom responsief design belangrijk is en hoe je het kunt testen, is het tijd om te kijken naar de best practices. Je wilt immers niet dat je website eruitziet als een puzzel waar de stukjes niet op hun plek vallen.
Mobile-first
We hebben het vaak over ‘mobile-first design’ en nee, dat is geen hippe marketingterm om je te intimideren. Het betekent simpelweg dat je vanaf het begin van je ontwerp nadenkt over hoe je website eruitziet op mobiel. Begin met de mobiele versie en werk van daaruit naar desktop toe. Het klinkt misschien als omgekeerde logica, maar in een wereld waarin de meerderheid van je bezoekers op hun telefoon zit, is dit de meest logische manier om te werken.
Maak het simpel
Op een klein scherm is minder meer. Probeer niet alles wat je op je desktopversie hebt in een mobiele versie te proppen. Bezoekers willen snel en eenvoudig vinden wat ze nodig hebben. Zorg voor overzichtelijke navigatie, grote knoppen (voor mensen met dikke vingers) en een heldere layout.
Gebruik aanpasbare beelden
Weinig is vervelender dan een foto die een halve pagina in beslag neemt of juist pixelachtig wordt uitgerekt op een groot scherm. Zorg ervoor dat je beelden zich aanpassen aan de schermgrootte. Het laatste wat je wilt, is dat je prachtige productfoto’s eruitzien alsof ze door een vergrootglas bekeken worden.
Snelle laadtijden
Mensen hebben het geduld van een tweejarige als het gaat om het wachten op het laden van een website. Als je site te langzaam laadt, zijn ze weg voordat je ‘kom terug’ kunt zeggen. Optimaliseer je afbeeldingen, vermijd zware scripts en zorg ervoor dat je hosting op orde is. Elke seconde telt.
Kortom …
Laten we het simpel houden: een mobielvriendelijke website is geen luxe meer, het is pure noodzaak. Met meer mensen dan ooit die op hun telefoon surfen, wil je niet dat je website eruitziet alsof hij uit het stenen tijdperk komt. Investeer in responsief design, test het regelmatig en zorg dat je bezoekers een soepele ervaring hebben, ongeacht het apparaat dat ze gebruiken.
Dus, gooi die verouderde ‘desktop-only’ mindset overboord en zorg dat je site ook en vooral mobiel indruk maakt. Want zoals we allemaal weten: als je niet mee verandert met de tijd, blijf je achter. En dat wil je niet.
