Mijn-eigen-website.nl

Websitebouw voor doe-het-zelvers (zonder WordPress)

Hoe maak ik mijn website geschikt voor mobiele surfers?

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?

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 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 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 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 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 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.