Twee mogelijkheden: je website responsive maken, of een speciale mobiele versie bouwen.
Het is duidelijk: we maken inmiddels heel veel gebruik van smartphones en tablets om te surfen op internet. Je moet er dus voor zorgen dat je website ook op die apparaten er goed blijft uitzien. Maar hoe doe je dat in de praktijk?
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 vormgeven met CSS.)
Een voorbeeld maakt dit vast wat duidelijker. Stel dat ik heb ingesteld dat het tekstgedeelte van mijn website (het article-element) 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 het tekstgedeelte van 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 dat gedeelte 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 het article-element 80% van het beeldscherm inneemt als mijn site wordt bekeken met een beeldschermresolutie 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 het article 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:
article { width: 80%; } @media screen and (min-width: 1441px) { article { width: 65%; } } @media screen and (max-width: 800px) { article { width: 95%; } }
Met deze stijlregels geef ik aan dat het article-element normaal gesproken een breedte krijgt van 80% van het beeldscherm. Behalve als het beeldscherm breder is dan 1440 pixels (min-width: 1441px) of smaller dan 800 pixels (max-width: 800px). Dan krijgt dit zelfde het article-element 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 bovenkant 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.
Als je er tegenopziet 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.
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 verandert verder niets, deze blijft bij elke schermbreedte 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.
In dit geval maak je dus twee verschillende websites. De pagina’s die bestemd zijn voor mobiele browsers zet je in een aparte map binnen je site neer. Vervolgens zet je een stukje script op je server dat kan zien met welk apparaat een bezoeker je website oproept. Is dat een smartphone, dan stuurt het script deze bezoeker door naar de mobiele versie van je site. Maar bekijkt hij je site op een desktop of laptop, dan krijgt hij de gewone versie te zien.
Dat klinkt allemaal vrij ingewikkeld, maar dat hoeft het niet te zijn. Er zijn bedrijven (zoals MakeMobile en MobileBenelux) waar je de mobiele versie van je site kunt neerzetten, en die je ook de code geven die bepaalt of bezoekers moeten worden doorgestuurd of niet.
Wil je het helemaal zelf doen, dan zet je je mobiele pagina’s van je website binnen een map op je eigen server neer, en zorg je met een van de scripts van Detect Mobile Browsers ervoor dat je bezoekers naar de juiste pagina’s geleid worden. Maar daarvoor moet je natuurlijk wel enige kennis van html en php hebben.
« Ga terug
