Je website klaar voor mobiel

Tegenwoordig wordt je website steeds vaker bekeken op een smartphone of tablet. Vorig jaar nam de verkoop van laptops af terwijl mobiele apparaten als warme broodjes over de toonbank gingen. Dit vraagt om een andere aanpak van je website. Een aantal jaren gelden kon je nog uitgaan van het kleinste beeldscherm als basis voor je website-template. Dit schoof langzaam op omdat schermen steeds groter werden. Op dit moment heb je mensen die op een 27″ scherm werken terwijl je website ook leesbaar moet zijn op een iPhone. Dit is een heel groot verschil.

Dit verschil tussen grote beeldschermen en smartphones is een uitdaging voor webdesigners. Als het kleinste formaat beeldscherm nog steeds bepalend zou zijn dan hield je op je breedbeeldscherm een smal strookje website over waar je eindeloos in moet scrollen, terwijl de breedte van je mooie scherm onbenut blijft. Aan de andere kant van het spectrum heb je de mobiele schermen die een stuk kleiner zijn en een andere manier van navigeren vragen. Op je tablet en telefoon is het fijner om te scrollen, terwijl je op je laptop of desktop een touchpad of muis gebruikt.

Mobiel wordt het uitgangspunt

Dit stelt dus andere eisen aan de manier waarop je website-template in elkaar zit. Het begint al bij het ontwerpen van een website. Steeds meer webdesigners beginnen met het ontwerpen van een website die op mobiel uitstekend werkt. Pas daarna wordt het ontwerp aangepast op bredere schermen. Dit is een logische volgorde. Mobiel gebruik heeft de meeste beperkingen, dus als je hiermee begint kan er later altijd iets toegevoegd worden voor laptop en desktop.

Er zijn natuurlijk ook websites die aparte mobiele versies hebben, maar dit vraagt meer onderhoud en heeft voor kleinere sites onvoldoende toegevoegde waarde. Let maar eens op de URL. Als er een ‘m’ voor de domeinnaam komt wanneer je de website vanaf een mobiel apparaat bekijkt, dan is er een aparte website of een aparte template voor mobiele gebruikers. Denk aan kranten en webshops. De website van de Volkskrant en Bol.com zijn hier voorbeelden van.

Andere opmaak voor mobiel

Als je goed oplet, zie je dat websites steeds meer in de breedte gemaakt worden, zodat kolommen makkelijk onder elkaar schuiven wanneer het scherm minder breed is. Op deze manier past de opmaak zich aan de breedte van het scherm aan. Op een groot scherm zie je zo veel mogelijk onderdelen naast elkaar, zodat je niet veel hoeft te scrollen. Op een telefoon komen de tekstblokken en foto’s mooi onder elkaar te staan zodat je deze scrollend kunt bekijken zonder de pagina heen-en-weer te bewegen.

Voor een gebruiker is dit prettig, maar voor een webdesigner is het een behoorlijke uitdaging om een website te maken die zich aan allerlei verschillende formaten aanpast. Het betekent extra programmeercode.

Responsive frameworks

Om hier bij te helpen, kunnen designers en ontwikkelaars gebruik maken van zogenaamde frameworks. Dit zijn verzamelingen van basistemplates en stylesheets die afgestemd zijn op de maten van verschillende schermen. De frontend-ontwikkelaar past het webdesign waar hij aan werkt toe op deze basiselementen. Dit scheelt een hoop werk omdat hij niet telkens opnieuw het wiel hoeft uit te vinden. Er zijn verschillende frameworks voor webpagina’s. De meest gebruikte is van Twitter en heet Bootstrap.

2014: het jaar van mobiel internet

Wij denken dat het komende jaar het gebruik van mobiel internet snel gaat toenemen. Je kunt in je bezoekersstatistieken bekijken hoeveel bezoekers jouw website op een telefoon of tablet bekijken. Zorg er dus voor dat je website ook mobiel geweldig uitziet. Als je hier vragen over hebt, neem gerust contact met ons op. Wij kunnen je helpen jouw website mobile-ready te maken.