Mijn-eigen-website.nl

Hoe maak ik mijn website geschikt voor mobiele surfers?

Twee mogelijkheden: je website responsive maken, of een speciale mobiele versie bouwen.

ontwerpen voor desktop, laptop, tablet en smartphone

Het is duidelijk: we maken inmiddels heel veel gebruik van smartphones en tablets om te surfen op internet. Maar betekent dat nu ook dat het tijd is om je site om te bouwen tot een mobiele website, of misschien zelfs een aparte mobiele versie van je site te bouwen?

Eerlijk gezegd denk ik dat je er tegenwoordig inderdaad niet meer onderuit komt om ervoor te zorgen dat je website ook op mobiele toestellen als smartphones en tablets er goed blijft uitzien. Of je een speciale versie van je site moet bouwen voor mobiele surfers is vraag twee, maar je moet er in ieder geval wel voor zorgen dat je site er altijd goed uitziet, hoe en waar hij ook bekeken wordt.

Responsive design

Er zijn meerdere manieren om je website geschikt te maken voor mobiel. De mooiste manier vind ik de manier waarop de layout van een site zich automatisch aanpast aan de afmetingen van het scherm waarop hij bekeken wordt. Dit heet responsive design.

De methode komt er kort gezegd op neer dat je in je stylesheet voor elk onderdeel dat een ander uiterlijk moet krijgen als het scherm smaller of breder wordt, een extra stijlregel opneemt. In die extra stijlregel zet je dan neer wanneer die regel toegepast moet worden, en wat die veranderingen precies moeten inhouden. (Als je niet precies weet wat een stylesheet is en hoe het wordt gebruikt voor de layout van een website, lees dan eerst even mijn uitleg over over vormgeven met css.)

Voorbeeld

Een voorbeeld maakt dit vast wat duidelijker. Stel dat ik heb ingesteld dat mijn website 80% van de breedte van het beeldscherm in beslag mag nemen (width: 80%;). Als iemand mijn website dan bekijkt met een beeldschermresolutie van 1366 x 768 pixels, dan wordt mijn website dus vertoond op een breedte van 1093 pixels (80% van 1366). Maar als hij hem bekijkt met een beeldschermresolutie van 1920 x 1080 pixels, dan is mijn website ineens 1536 pixels breed. Dat vind ik veel te breed (de regels worden dan veel te lang en de tekst is daardoor moeilijk leesbaar).

Wat ik eigenlijk wil, is dat mijn website 80% van het beeldscherm inneemt als hij wordt bekeken met een beeldscherm­resolutie van 1440 pixels breed of lager, en 65% als de beeldschermresolutie hoger is. Is het scherm erg smal (bijvoorbeeld minder dan 800 pixels), dan mag mijn website wel 95% van het scherm in beslag nemen in plaats van de standaard 80%. Om dit voor elkaar te krijgen, zet ik in mijn stylesheet het volgende neer:

#websitevak { width: 80%; }
@media screen and (min-width: 1441px) { 
    #websitevak { width: 65%; } 
}
@media screen and (max-width: 800px) {
    #websitevak { width: 95%; } 
}

Met deze stijlregels geef ik aan dat de div met het id 'websitevak' (dat is het onderdeel waarbinnen ik mijn website als geheel heb neergezet) normaal gesproken een breedte krijgt van 80% van het beeldscherm. Behalve als dit beeldscherm breder is dan 1440 pixels (min-width: 1441px) of smaller dan 800 pixels (max-width: 800px). Dan krijgt dit zelfde websitevak een breedte van respectievelijk 65% of 95%.

Op deze manier kun je dus stuk voor stuk alle html-elementen van je webpagina nalopen en de eigenschappen die moeten veranderen als het scherm breder of smaller wordt, in je stylesheet een andere waarde geven.

Zo verdwijnt het menu aan de linkerkant van mijn website als het scherm te smal wordt, en komt er in plaats daarvan een link bovenaan de pagina te staan. Pas als je daarop klikt, krijg je het menu te zien. Maar je zou er bijvoorbeeld ook voor kunnen kiezen de belangrijkste menuknoppen te laten vertonen in horizontale balken die de volledige breedte van het scherm vullen als dit scherm smaller wordt (een oplossing die bij de website templates van de Minicursus is toegepast).

Als je ertegenopziet om je website op deze manier om te bouwen, informeer dan even of ik het misschien voor je kan doen. Neem daarvoor contact met me op via het contactformulier.

Een afwijkende mobiele versie van je site

Bij responsive design past het uiterlijk van je website zich dus aan aan de breedte van het beeldscherm. Aan de inhoud van je webpagina's is verder niets veranderd, deze blijft precies hetzelfde. Maar soms is het beter om echt een aparte mobiele versie van je website te maken.

Het kan namelijk zijn dat bezoekers die je website met een smartphone opvragen, op zoek zijn naar heel andere informatie dan de desktop- of laptop-gebruikers die je site bezoeken. Een goed voorbeeld is de website van de NS. Bezoekers die deze site oproepen op hun smartphone, zullen vaker op zoek zijn naar de huidige vertrek- en aankomsttijden dan desktop-bezoekers. De mobiele versie van de NS-website ziet er dan ook heel anders uit dan de desktop-versie van het bedrijf.

Copyright © 2004-2017 Arkon v.o.f. – Leiden / KvK: 28069730 / BTW: NL805348827B01
contactsitemapprivacybeleid