Je website mobile-friendly maken is niet optioneel maar een must. Google straft websites zelfs af die niet responsive zijn. Mobiele toestellen nemen het internet over en België blijft hierin niet achter. Belgen shoppen massaal online en doen dit ook graag via hun smartphone.
- Gebruik een responsive framework
Het ontwerpen van responsive websites is eenvoudiger dan ooit dankzij HTML-frameworks. Populaire mobile-first frameworks zoals Bootstrap en Foundation optimaliseren de designs voor mobiele schermen. Wat nog handig is aan HTML-frameworks, is dat ze met een contentstructuur in roostervorm werken. Deze bestaat uit kolommen en rijen waardoor je gemakkelijk elk onderdeel van je design kan aanpassen aan verschillende schermgroottes. Bovendien kan je ook kiezen of je bepaalde onderdelen verbergt voor kleine schermen.
- UX is prioriteit
Het hoofddoel van een website is om een geweldige gebruikerservaring te bieden aan bezoekers. Ze moeten zonder frustraties of obstakels je content kunnen ontdekken. Zo moet je onder andere de tekst leesbaar maken voor zowel grote als kleine schermen. De gebruikerservaring is namelijk niet optimaal als bezoekers moeten inzoomen om je content te kunnen lezen. Gebruik points in plaats van pixels voor de lettergroottes en gebruik @media CSS queries om je design mobiel te optimaliseren.
- Snelheid telt
Als het op SEO en user experience aankomt is de laadsnelheid van pagina’s ongelofelijk belangrijk. Sterker nog, vanaf juli 2018 neemt Google de laadsnelheid van pagina’s ook mee in de ranking voor websites bij mobile searches. Dankzij deze technieken kan je de snelheid van je website optimaliseren:
- Installeer een caching plugin
- Installeer een content delivery network
- Optimaliseer de afbeeldingen
- Switch naar HTTPS
- Vereenvoudig navigatie en interactie
Voor bepaalde delen van je website moet je in je design extra rekening houden met mobile first. Als je desktopwebsite bijvoorbeeld een groot navigatiemenu heeft, als je dit mobiel zo moet tonen zou het de helft van je scherm innemen. Maar om dit op te lossen kan je de navigatielinks gemakkelijk achter een hamburgermenu-knop steken. Hou ook in je achterhoofd dat mobiele gebruikers spontaan tappen op links of swipen doorheen de pagina’s. Zorg er dus voor dat je website dit soort mobiele interacties kan bieden. Gebruik interactieve buttons in plaats van tekstlinks en plaats fotogalerijen die met swipe-gebaren werken.
- Test en verbeter
De belangrijkste stap is testen of je website vlot werkt op verschillende toestellen en in verschillende browsers. Zorg ervoor dat je site er even goed uitziet op het oudste Android-toestel als op de nieuwste iPhone. Je kan gemakkelijk je design testen op responsiviteit en eventueel je landingspagina’s aan A/B-testing onderwerpen.
Elke designer pakt projecten op een andere manier aan en er is niet één juiste manier voor een mobile-first website. Maar er zijn wel bepaalde standaarden waaraan een website moet voldoen om in de smaak te vallen bij eindgebruikers. Ontwikkel je site dus voor deze gebruikers maar blijf je design ook verbeteren om mee te zijn met nieuwe ontwikkelingen.
Zit je met vragen? Contacteer ons!