Optimaliseer je website voor elk apparaat

Je wil even snel iets opzoeken en pakt je smartphone erbij. Via Google of een andere zoekmachine tik je jouw vraag in en je opent het eerste zoekresultaat dat antwoord lijkt te geven op je vraag. Dan zie je dat de pagina niet goed laadt en de content niet zichtbaar is. Dus ga je terug en pak je het volgende zoekresultaat. Herkenbaar? Dit hebben we ongetwijfeld allemaal wel eens meegemaakt.

Bedenk nu eens dat dat eerste zoekresultaat jouw eigen website is.

Die bezoeker ben je dus kwijt omdat je website niet goed zichtbaar is op een mobiel apparaat. Misschien heb je eindeloos veel tijd gestoken in het maken – of laten maken – van een prachtige website voor op het computerscherm, maar heb je er wel rekening mee gehouden dat bezoekers soms op een heel ander apparaat kijken? Zoals een smartphone of zelfs een tablet?

Het zal je verbazen hoeveel bezoekers en dus potentiële klanten je verliest als je website niet responsive is (dat wil zeggen: niet goed aanpast aan het type apparaat waarmee een gebruiker kijkt). Je website optimaliseren voor desktop is minstens zo belangrijk als je website optimaliseren voor mobiel. Veel mensen zeggen zelfs dat een website optimaliseren voor mobiel belangrijker is omdat inmiddels een meerderheid van de mensen de meeste zoekopdrachten via dat apparaat doen.

Je website optimaliseren voor mobiel en desktop is bovendien inherent aan je website optimaliseren voor Google. Want ook Google weet dat het belangrijk is dat je website bereikbaar is en functioneert vanaf verschillende devices. Maar hoe pak je dat aan? En waar moet je op letten als je een responsive design op je website wil?

Ga voor mobile first

Je website ziet er prachtig uit vanaf een desktop? Dat is fijn, maar hoe ziet je pagina eruit op een smartphone? De kans is groot dat de complete layout dan verloren gaat, laadtijd erg lang is, afbeeldingen niet goed zichtbaar zijn en informatie niet te lezen. Een prachtige website op een laptop is niet automatisch ook prachtig op een smartphone.

Het is belangrijk dat je website ook zogenaamd mobile friendly is, oftewel geschikt voor vertoning op een smartphone (en misschien ook wel tablet). Dat is niet alleen belangrijk omdat je potentiële klant dan niet wegklikt. Het is ook belangrijk omdat Google een zogenaamd mobiele first beleid hanteert. Een website die goed functioneert op mobiel is bij hen de eerste prioriteit en dat zou het voor jou dus ook moeten zijn.

Zorg voor een responsive design

Een mobile first website maken valt of staat met responsive design. Responsive design wil zeggen dat je website zo is gebouwd dat deze op ieder formaat scherm optimaal is ingedeeld. De inhoud ofwel content is hetzelfde, maar de layout wordt zo aangepast dat het past bij de schermgrootte en het gebruik. We noemen dit ook wel een fluid design of een vloeiende layout.

Er zijn een aantal programma’s die je ondersteunen bij het bouwen van een website. Denk aan Elementor of Divi. Deze programma’s kunnen je – tot op zekere hoogte – helpen je design responsive te maken. Wil je het zelf doen? Dan komt er vaak code bij kijken.

Om je website te optimaliseren voor mobiel heb je in je code een aantal elementen nodig:

• Een viewport
• Responsieve afbeeldingen
• Een fluid design of vloeiende layout
• Media query’s

De viewport is het gedeelte van de interface van een webbrowser waarin de inhoud van een website wordt weergegeven. Een media query is een stukje code in je website dat specifieke informatie – zoals de schermgrootte van het apparaat van je bezoeker – kan uitlezen en doorgeven aan de rest van je website. Geen wonder dat deze twee dus – naast het aanpasbare design en de afbeeldingen – van groot belang zijn.

Afbeeldingen optimaliseren

Ziet je website er op mobiel net niet helemaal lekker uit? Dan is de kans groot dat dit te maken heeft met de afbeeldingen op je pagina. Afbeeldingen optimaliseren is dan ook een groot onderdeel van je website responsive maken. Optimaliseer je een website voor Google dan mag je ook zeker de afbeeldingen niet overslaan. Dat goed Google namelijk ook niet in hun ranking van je pagina.

Het is vooral belangrijk dat je bezoeker niet van links naar rechts hoeft te scrollen om stukken tekst of afbeeldingen goed in beeld te krijgen. Dat heeft vaak te maken met hoe de afbeeldingen functioneren op de pagina; ze staan nog op een formaat ingesteld dat niet past bij het scherm van de bezoeker. Afbeeldingen optimaliseren zorgen ervoor dat ze automatisch krimpen naar het formaat van het scherm.

Ook dit is een functie die sommige webbouwers automatisch toepassen. Wil je het handmatig veranderen? Doorloop dan deze stappen:

1. Open de stylesheet van de website, waar de code staat (dit noemen we het CSS).
2. Voeg de volgende code toe:
   img {
   max-width: 100%;
   }

Als de afbeeldingen breder zijn dan de viewport in je website toelaat, worden ze automatisch aangepast.

Voorkom pop-ups

Ken je dat: je opent een website op mobiel of desktop, maar krijgt meteen een schermvullende pop-up in beeld. Irritant, toch?

Dat vind je potentiële klant dus ook.

Pop-ups maken het lastiger voor je bezoeker om de informatie te vinden die ze nodig hebben. Daar raken ze ongeduldig van en dan klikken ze al snel weg. Dat zorgt weer voor een hoog bouncepercentage en dat wil je niet hebben.

Er zijn natuurlijk pop-ups die belangrijk zijn of waar je niet onderuit komt, zoals de vraag om cookies te accepteren. Andere pop-ups kun je beter achterwege laten, vooral in je mobiele design. Zelfs als het gaat om een mooie aanbieding of uitverkoop valt op dat bezoekers niet erg happig zijn om door te klikken als ze een pop-up tegenkomen. Op een mobiel apparaat is het ook vaak nog lastiger om de plek te vinden waar je die pop-up wegklikt, wat zorgt voor nog meer frustratie bij je bezoeker.

Je bezoeker komt niet voor een pop-up, maar voor informatie. Vergeet dat niet. Wil je toch graag een pop-up gebruiken? Zorg dan dat deze niet de complete inhoud blokkeert want dat roept de meeste frustratie op.

Zorg voor de beste laadtijden

Wist je dat menig bezoeker al binnen seconden wegklikt als de pagina niet snel genoeg zichtbaar is? Wanneer jouw pagina niet snel laadt raak je dus veel potentiële klanten kwijt. Op mobiel is dit al helemaal belangrijk, omdat men dan al gauw denkt dat je website simpelweg niet functioneert op een ander apparaat dan een desktop. Je website optimaliseren voor mobiel betekent dus ook goed opletten op laadtijden.

Zo kun je ervoor zorgen dat je website op mobiel en desktop snel laadt:

• Optimaliseer afbeeldingen – zorg dat afbeeldingen zich aanpassen naar het scherm van de gebruiker.
• Gebruik caching – zoek de .htaccess van je domein en stel in dat caching op tijd wordt toegepast.
• Optimaliseer de code – met de juiste code zorg je ervoor dat je website zo min mogelijk vraagt van het apparaat van de gebruiker en dus sneller zichtbaar is.
• Combineer elementen – heb je bijvoorbeeld twee afbeeldingen naast elkaar staan, combineer ze dan tot één om de laadtijd te bevorderen.

Conclusie: mobile first is leidend

Nu je weet wat je kunt doen om je website optimaal te laten functioneren op elk apparaat, kun je de methodes gaan toepassen. Vergeet vooral niet dat iedereen tegenwoordig een ander formaat scherm heeft en dat er ook nog veel mensen tablets gebruiken. Heb je geen idee hoe je zoiets aan moet pakken? Een webdesigner en webbouwer kunnen je helpen je website voor ieder apparaat te optimaliseren.