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:
- Voer de volledige url van je website in de balk.
- Klik op ‘url testen’.
- De tool test of je website mobielvriendelijk is. Dit kan even duren.
- 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.
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.
Website Builder
Je eigen professionele website in slechts 3 stappen. Vandaag nog online.
- 7 dagen p/w support
- Gebruiksvriendelijke drag-and-drop-sitebuilder
- Geschikt voor elk apparaat
- Coderen is niet nodig
- Aanpasbaar naar smaak en wens
- Ruime keuze aan kant-en-klare templates
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.
WordPress-website maken
Breng je idee tot leven. WordPress is de ideale start voor je blog, website of webshop.
- 7 dagen p/w hostingsupport
- Zakelijke e-mail
- Gratis https-verbinding
- Ruime keuze in thema’s en plugins
- Automatisch geïnstalleerd
- Direct aan de slag
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:
Leestips
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!
Webhosting
Ontwikkel razendsnel websites op betrouwbare en snelle webhosting. Inclusief uitgebreide features.
- 7 dagen p/w hostingsupport
- Installeer in 1 klik WordPress
- Gratis Wildcard SSL
- Zakelijke e-mail
- Stabiel en razendsnel platform
- Direct opgeleverd
