Responsive website

Een responsive website maken, zonder snelheid te verliezen.

door Lisa Springer

Assistent Manager van WP supporters

Het is al een lange tijd bekend. Het grootste deel van de mensen, surft op het internet via hun mobiele apparaat. Sterker nog, uit onderzoek is gebleken dat 90% van de mensen een mobiele telefoon aanschaft om te kunnen internetten. 

Aan jouw dus de taak om hier haarfijn op in te spelen met een responsive website.

Als het goed is heb je deze term al eens vaker gehoord en zul je er ook al het 1 en ander over hebben gelezen.

Tegenwoordig is een responsive website namelijk bijna vanzelfsprekend. Toch vallen er nog wel een aantal dingen over te leren. Namelijk hoe je deze het beste kunt maken en hoe je hem kunt testen.

Daarbij komt er altijd een stukje snelheid optimalisatie om de hoek krijgen, wat je niet wilt verliezen bij het maken van een responsive website.

In dit artikel gaan we daarom in op de volgende onderwerpen.

Wat is een responsive website?

Waarschijnlijk weet je al het antwoord op deze vraag. Maar leg ik het graag voor de volledigheid nog eens uit.

Een responsive website, is een website die is aangepast voor zowel desktop als mobiel of tablet. De site past zich dus automatisch aan het formaat aan. Door dit te doen, zorg je ervoor dat ieder publiek, via welke apparaat dan ook, de website kan bezoeken.

Zeer handig aangezien tegenwoordig veel mensen via hun telefoon of tablet op het internet surfen.

3. Solved the Problem

Zelf WordPress onderhouden?

Leer al onze ins en outs van WordPress onderhoud en upgrade jouw website naar een 2.0 versie met onze GRATIS WordPress training.

Een Must-Do voor eenieder die met WordPress werkt. 

Is jouw website responsive?

Voordat we verder ingaan op een responsive website, doe je er verstandig aan om eerst eens te kijken of je website responsive is.

Dit kun je onderzoeken met de volgende test tool van Google: https://search.google.com/test/mobile-friendly

Hier zie je een voorbeeld van onze website:

En? Is jouw website al responsive?

Zo niet, lees dan verder!

Waarom is het belangrijk om je website responsive te maken?

Het responsive maken van je website is een must vanwege de vele mobiele/tablet internet gebruikers. Daarbij zijn er nog een aantal andere redenen waarom dit belangrijk is.

Want doordat je website responsive is, zorg je er voor dat de gebruikservaring van je bezoekers verbetert. Responsive websites zijn namelijk beter leesbaar en bruikbaar op kleinere schermen zoals smartphones en ipads.

Een verbeterde gebruikservaring van je bezoekers, zal resulteren in een hoger bezoekers aantal en een lager bounce percentage. En dat levert je weer een betere ranking op in de zoekmachines.

Een zoekmachine als Google let namelijk specifiek op de responsiveness van je website. Het is dus slim om je hier op te focussen.

Hoe kun je eenvoudig een responsive website maken?

Nu je weet hoe belangrijk een responsive website is, wil je er vast ook 1 maken. Of je bestaande site naar deze maatstaven brengen. Hieronder leg ik uit hoe dit voor elkaar kunt krijgen.

1. Maak gebruik van een Pagebuilder

Pagebuilders zijn ideale tools die je kunt gebruiken om een responsive website te maken. Ze zijn namelijk ontwikkeld om zonder ingewikkelde code een perfect design neer te zetten. En de meeste pagebuilders kunnen dit ook voor het mobiele design.

Een voorbeeld die ik je kan geven is uit mijn favoriete Pagebuilder Elementor. Deze bevat namelijk een apart deel wat specifiek voor de responsiveness is ontwikkeld. Je hoeft hier bijvoorbeeld alleen maar een schuifje uit te klikken om te zorgen dat een afbeelding die te groot is voor je mobiele website, niet te vertonen.

Daarnaast zorgt een pagebuilder voor nog meer functies die de responsiveness van je website vergroten:

  • Je kunt de afstand tussen de klik elementen gemakkelijk aanpassen
  • Alle inhoud van de desktop site wordt ook op de mobiele site getoond
  • De inhoud wordt gecomprimeerd zodat het niet te druk wordt op het scherm

2. Kies een responsive thema

Om het eenvoudig te houden voor jezelf, is het gebruik maken van een responsive thema een must. Het ombouwen van een ander niet responsive thema is namelijk zeer ingewikkeld en kost veel geld.

Dus wanneer je je website mobiel vriendelijk wilt maken, moet je een thema kiezen dat responsive is.

Toch is niet elk thema dat zegt dat het responsive is, ook direct 100% mobiel vriendelijk. Dus de vraag is: hoe kom je erachter dat een WordPress thema mobiel vriendelijk is?

Gelukkig heb ik hier een handigheidje voor gevonden.

Ieder WordPress thema bevat namelijk ook een demo site waarvan je de URL eenvoudig kunt kopiëren en plakken in de Google mobiel vriendelijkheid test.

Nadat je het responsive thema hebt aangeschaft, kun je beginnen met het bouwen van de website.

3. Controleer de responsiveness

Natuurlijk helpen een pagebuilder en responsive thema je bij het ontwikkelen van een responsive website. Toch is het altijd belangrijk om na te gaan of je jouw doel ook daadwerkelijk hebt behaald.

Om deze reden raden we je aan om altijd te kijken of de website daadwerkelijk mobiel/tablet vriendelijk is. Dit kun je op de volgende manieren doen.

  • Stel je Pagebuilder in op de tablet of mobiele view. (zie voorbeeld hierboven)
  • Ga naar je ontwikkelde website in Google Chrome. Klik op de rechtermuisknop en vervolgens op ‘Inspecteren’. Je ziet dan in de linker bovenhoek van het rechter blok een mobiel/tablet icoontje. Wanneer je deze aan klikt worden de schermen geopend op dit formaat. Aan de bovenkant in het scherm kan je hierna het apparaat selecteren.


  • Ook kun je gebruik maken van een responsive test tool. Wanneer je de URL invoert, kun je kiezen voor de formaten die je wilt controleren en worden deze weergeven.

Hoe kun je je online snelheid verbeteren met responsive website?

Het maken van een responsive website is één, maar om te zorgen dat deze ook nog snel is, is weer een heel ander verhaal. Dit komt omdat er vaak vergeten wordt wat het kan betekenen wanneer je een website op groot scherm naar een kleiner formaat brengt.

De snelheid van de mobiele website kan worden beïnvloed door de responsiveness. Hieronder leggen we je uit hoe je ervoor zorgt dat je website responsive is EN snel.

Houd je website licht

Je website licht houden is soms moeilijker dan je denkt. Je wilt namelijk altijd het meest in het oog springende thema en gebruik maken van indrukwekkende afbeeldingen om de boodschap duidelijk te maken.

Toch is: ‘Less is More’ een regel die zeker de laatste jaren wel van toepassing is. Het behouden van snelheid is namelijk een belangrijker gegeven dan het delen van zware content.

Het gebruiken van minder afbeeldingen of het optimaliseren van afbeeldingen is hiervoor een goede tip. Zo zorg je dat jouw website licht en snel blijft.

Minimaliseer je code

Iedere website bevat code en sommige meer dan de ander. Bij het minimaliseren van de code, verwijder je in feite alles wat overbodig en onnodig is. Hierdoor gebruikt je website alleen de code die echt nodig is.

Je kunt dit handmatig doen maar als je geen code ervaring hebt kan dit nogal een moeilijke weg zijn naar het einddoel dat je hebt.

Gelukkig zijn er verschillende gratis tools die je kunt gebruiken om je code in een mum van tijd te verkleinen.

Een voorbeeld hiervan is Minifycode die verschillende verkleiningstools biedt waarbij je HTML, CSS en JavaScirpt mee kunt minimaliseren.

Zorg voor responsive plugins

Wanneer je je website responsive wilt maken, is het handig dat alle onderdelen hier aan mee werken. Responsive plugins zijn dus erg belangrijk om je website optimaal responsive te laten draaien.

Daarbij is het zo, dat wanneer plugins niet goed werken op een responsive website, deze ook langzamer zal maken. Iets wat veel mensen vaak over het hoofd zien.

Helaas is er geen geautomatiseerde test die kan aantonen of een plugin responsive is of niet. Daarom raden we aan om altijd even te kijken hoe het eruit ziet op je mobiel of tablet wanneer je de plugin hebt geïnstalleerd en vergeet dan ook niet om de snelheid te testen.

Plaats geen popups

Naast het feit dat pop-ups behoorlijk irritant kunnen zijn, is het sinds 10 januari 2017 ook een dooddoener voor zoekmachines als Google.

Google straft namelijk mobiele websites die pop-ups tonen omdat dit de toegankelijkheid voor de gebruiker beperkt.

Een goede reden om deze dus achter wegen te laten. Mocht je er toch percé gebruik van willen maken, zet ze dan niet op de homepage maar ergens anders.

Maak gebruik van Lazy loading

Lazy Loading is een term waar je vast wel eens van gehoord hebt. Naast het feit dat het handig is om te gebruiken voor je desktop website, kan het ook op je mobiele website zeker niet missen.

Het namelijk zo dat gebruikers die je website openen altijd als eerste de inhoud aan de bovenkant zien.

Dus waarom zou je de hele pagina in 1x laden?

Dit heet dus ‘Lazy Loading’ en kan wonderen doen wanneer je je website snelheid op orde wilt houden ondanks de content die je deelt.

Door Lazy Loading te gebruiken, laadt je website in eerste instantie alleen de dingen die echt nodig zijn. De rest komt later.

Geef ons een beetje support, en deel met belangstellenden.

Facebook
Google+
Twitter
LinkedIn
WhatsApp

Lees ook:

Laat een reactie achter

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

3. Solved the Problem

Zelf WordPress Leren onderhouden

GRATIS Training….!

Leer hoe jij het maximale uit je website kan halen. 

× Whatsapp met een expert