Je website responsive maken, mét of zonder technische kennis

Als ondernemer is het belangrijk om een website te maken. Maar als je site niet responsive is, bestaat de kans dat mobiele bezoekers afhaken en je conversie misloopt. Dat wil je niet. Daarom lees je in dit artikel hoe je jouw website responsive maakt, mét of zonder technische kennis.

Wat is een responsive website?

Een responsive website is een site die zich automatisch aanpast aan het schermformaat van een apparaat. Het maakt dus niet meer uit of een bezoeker je website bekijkt op desktop, tablet of mobiel van diverse formaten, want je website schaalt altijd mee. Teksten, afbeeldingen, video’s en meer zijn goed zichtbaar zonder dat bezoekers moeten inzoomen.

Wat is een mobiele site?

Een mobiele site is een website die speciaal is ontworpen voor tablets en mobiele telefoons. Het is een lichtgewicht website met een eenvoudige gebruikersomgeving, zodat hij snel laadt.

Responsive vs. mobiele website

Een responsive website is niet hetzelfde als een mobiele website. Bij een responsive website schaalt je ‘normale’ website mee aan het formaat van het gebruikte apparaat. Een mobiele website is een apart ontwerp dan je ‘normale’ website en gebouwd voor smartphones en tablets.

Waarom een responsive website?

Een website mobielvriendelijk maken, is anno nu onmisbaar. Steeds meer mensen gebruiken namelijk hun mobiel of tablet om een aankoop te doen of online iets te zoeken. Hoeveel mensen zie jij wachten op de trein met een laptop open? Waarschijnlijk niet veel. In plaats daarvan wachten deze mensen met een mobiele telefoon in hun hand.

Een website responsive maken, biedt je de volgende voordelen:

• Betere gebruikerservaring
  Je website past zich automatisch aan, zodat hij toegankelijk, gebruiksvriendelijk en bruikbaar blijft. Het maakt niet uit welk apparaat en formaat je bezoekers gebruiken.

• Meer conversie
  Doordat je website gebruiksvriendelijk is, ervaren je bezoekers je site als prettig en gaan sneller tot een aankoop over.

• Hoger in Google scoren
  Google geeft responsive websites een hogere plek in de zoekresultaten, omdat je site gebruiksvriendelijk is. De zoekmachine wil namelijk de meest relevante en gebruiksvriendelijke informatie tonen. Bovendien bekijkt Google eerst je mobiele website, ook wel mobile-first genoemd.

De nadelen van een responsive website

Een website responsive maken, heeft echter ook een aantal nadelen. Bijvoorbeeld:

• Ontwikkeltijd
  Een website mobielvriendelijk maken, kan een technische uitdaging zijn. Het kost bijvoorbeeld meer tijd om de juiste code te schrijven. Als je geen technische kennis hebt, is dit vrijwel geen optie.

• Trage website
  Een responsive website bevat vaak meer code om ervoor te zorgen dat je site zich automatisch aanpast. Dit kan zorgen voor een tragere website.

• Lastig te onderhouden
  Bij het onderhouden van je website moet je ervoor zorgen dat je wijzigingen voor alle pagina’s doorvoert. Doe je dit niet, dan kan je site niet meer responsive zijn.

• Verlies van functionaliteit
  Als je een bestaande site responsive maakt, kan het voorkomen dat sommige functies die op desktop goed werkte op mobiele apparaten niet meer werken. Dit zorgt voor een slechte gebruikerservaring.

Je website responsive maken: kosten

De kosten van een mobielvriendelijke website maken, zijn afhankelijk van de grootte en complexiteit van je site. Over het algemeen begint de prijs van een responsive site bij iets meer dan € 100. Hoe groter en complexer je site is, hoe meer je betaald. De kosten kunnen oplopen tot in de duizenden euro’s, bijvoorbeeld als je een responsive website laat maken door een webdeveloper op een VPS.

Is mijn website geschikt voor mobiel?

Wil je weten of je huidige website geschikt is voor mobiel? Dan kun je de mobielvriendelijke test van Google gebruiken. Zo werkt het:

1. Voer de volledige url van je website in de balk.

2. Klik op ‘url testen’.

3. De tool test of je website mobielvriendelijk is. Dit kan even duren.

4. Vervolgens zie je de testresultaten.

Let op: De tool test alleen de url die je hebt ingevoerd, dus niet alle pagina’s van je website. Daarnaast raadt Google aan om de tool alleen te gebruiken om problemen met gebruiksgemak op te sporen voor mobiele apparaten. Sterker nog, het bedrijf geeft aan dat je de tool niet moet gebruiken om te zien of je pagina geschikt is voor mobiele apparaten in de zoekresultaten. Meer informatie hierover en wat de foutmeldingen betekenen, vind je op deze pagina van Google.

Ik ga een responsive website makenJa (83%, 5 Stemmen)Wat is responsive? (17%, 1 Stemmen)Nee (0%, 0 Stemmen)Aantal stemmen: 6

Aan het laden …

Je site responsive maken, de eenvoudige manier

Ik begrijp dat een website aanpassen voor mobiele telefoon als een technische aangelegenheid klinkt. Heb je geen technische kennis of wil je jouw tijd aan andere zaken besteden? Dan kun je het best een website maken met een contentmanagementsysteem (cms).

Met een cms maak en beheer je eenvoudig een website. Dit betekent ook dat je toegang krijgt tot diverse responsive websitetemplates. Je hoeft er dus zelf niets voor te doen.

Cms’en bij Hostnet

Bij Hostnet kun je direct een responsive website maken met Website Builder en WordPress. Heb je geen technische kennis en wil je in een paar stappen je site online zetten? Kies dan voor Website Builder. Je beschikt over kant-en-klare responsive websitetemplates.

Ben je op zoek naar meer geavanceerde functies? Dan is WordPress de juiste keuze. Wanneer je een WordPress-thema gaat uitzoeken, raden we je aan om de beschrijving goed te lezen. Zo weet je zeker dat je een responsive websitetemplate kiest.

Je website responsive maken, de technische manier

Heb je technische kennis of wil je proberen om met programmeercode te werken? Dan kun je de onderstaande 4 aanbevelingen gebruiken om een website te optimaliseren voor mobiel.

1. Gebruik een responsive framework

Allereerst is het belangrijk om een responsive framework te gebruiken. Met een framework kun je eenvoudig een site responsive maken. Veelgebruikte frameworks zijn Bootstrap en Foundation.

Om een framework te gebruiken, dien je de bestanden van Bootstrap of Foundation te downloaden en deze toe te voegen aan de juiste mappen van je website. Dit kun je doen via een FTP-programma als FileZilla. Vervolgens structureer je het ontwerp van je site via de ingebouwde classes (een verzameling van data en functies). Hiermee maak je onder andere een responsive menu en knoppen. Tot slot pas je het framework aan je eigen stijl door aangepaste css-code of variabelen toe te voegen.

2. Maak afbeeldingen en teksten responsive

Om te voorkomen dat afbeeldingen en teksten te groot zijn op mobiele apparaten, dien je deze mee te laten schalen.

Afbeeldingen responsive maken

Met de onderstaande css-code maak je bijvoorbeeld afbeeldingen responsive.

img { max-width: 100%; height: auto; display: block; }

Leestip: op deze pagina van Google Developers vind je meer informatie over hoe je afbeeldingen responsive maakt.

Teksten responsive maken

Om teksten te schalen, kun je het best kiezen voor relatieve afmetingen, zoals ‘em’, ‘rem’ of ‘%’. Hieronder vind je een voorbeeld van een code waarmee je teksten responsive maakt:

h1 { font-size: 2.6rem; } p { font-size: 1.6rem; }

3. Kies voor media queries

Wil je ervoor zorgen dat teksten, afbeeldingen en meer er goed uitzien op verschillende schermformaten? Dan kun je het best media queries gebruiken. Media queries zijn css-regels waarmee je de opmaak van een pagina wijzigt op basis van schermgrootte.

De viewport instellen

Om media queries te gebruiken, dien je eerst de viewport in te stellen. De viewport is het deel van je webbrowser waarin een website wordt weergeven. Is een website groter dan de viewport? Dan moet je naar links of rechts scrollen om een deel van de pagina te bekijken. Dat wil je voorkomen. Plaats daarom de onderstaande code in de html-code van alle pagina’s:

<meta name="viewport" content="width=device-width, initial-scale=1" />

Leestip: op deze pagina van Mozilla lees je wat alle elementen in de code betekenen.

Media queries instellen

Nadat je viewport hebt ingesteld, kun je in de css-code van je site de media queries bepalen. Dit doe je via de regel ‘@media’. In het onderstaande voorbeeld worden er verschillende achtergrondkleuren gebruikt voor diverse schermformaten. Je kunt media queries ook voor bijvoorbeeld afbeeldingen en teksten gebruiken.

/* Definieer standaard achtergrondkleur */ body { background-color: #f2f2f2; } /* Media query voor schermformaat van maximaal 768px breed */ @media only screen and (max-width: 768px) { body { background-color: #d3d3d3; } } /* Media query voor schermformaat van maximaal 480px breed */ @media only screen and (max-width: 480px) { body { background-color: #bfbfbf; } }

4. Vermijd vaste breedtes

Tot slot is het belangrijk om geen vaste breedtes te gebruiken. Hierdoor schaalt je website niet goed mee op verschillende schermformaten. Deze vaste breedtes worden vastgesteld via pixels (px). In plaats daarvan kun je beter percentages of ‘root em’ (rem) gebruiken. Rem past zich aan het schermformaat aan. Een voorbeeld hiervan is:

/* Stel de lettergrootte in op 1.2 rem */ body { font-size: 1.2rem; }

Een responsive website laten maken

Zoals je hierboven hebt gelezen, is een website mobielvriendelijk maken from scratch lastig. Je kunt in dit geval kiezen voor een kant-en-klaar webdesign. Maar wat als je een website wilt maken die voldoet aan jouw wensen? Kies er in dit geval voor om een responsive website te laten maken door een webdeveloper of -bureau. Een goede developer houdt rekening met verschillende schermformaten, zodat je website er altijd goed uitziet op elk apparaat.

Wil je meer weten over een website laten maken? Lees dan een van de onderstaande artikelen:

LeestipsEen WordPress-website laten maken? Deze 32 vragen helpen je op weg!Een WordPress-website laten maken bespaart je tijd en gedoe. Maar waar moet je op letten? Met deze 32 vragen gaat het je lukken.Lees artikelEen WordPress-webshop laten maken, hoe werkt dat?Wil jij een WordPress-webshop laten maken? Maar heb je geen idee waaraan je moet denken? Ontdek handige informatie in dit artikel.Lees artikelEen professionele website laten maken? Gebruik deze 35 vragen.Jij bent van plan om een professionele website te laten maken. Maar waar moet je op letten? Je vindt alle informatie in dit artikel.Lees artikel

Conclusie

Een responsive website is voor ondernemers onmisbaar in de huidige digitale wereld. Bezoekers verwachten eenmaal dat websites optimaal werken op elk apparaat. Doet de site dit niet? Dan haken ze af en loop je conversie mis. Met een cms als Website Builder en WordPress is het eenvoudig om een responsive website te maken. Heb je technische kennis? Dan kun je zelf aan de slag met html- en css-code. Veel succes met het responsive maken van je website!

Heb jij nog goede tips om een responsive website te maken? Laat dan een reactie achter!