Als je een kleintje hebt

In Japan surft men vooral via zijn smartphone en ook hier in België gaat steeds meer internetverkeer over smartphones en tablets. Bij de meeste van onze klanten schommelt het percentage bezoekers met een mobiel toestel momenteel rond de 5% en specialisten voorspellen dat dit cijfer nog sterker zal gaan groeien in de komende maanden.

Slimme websites herschikken zich automatisch naar het toestel waarmee men surft en dus vooral naar de beschikbare schermgrootte en -resolutie. In België zorgden wij met jobat.be voor de primeur met dat “responsive design”. Uit die unieke ervaring met een slimme website die zichzelf aanpast, haalden we de volgende acht tips:

1. Mobile first
Je bouwt gemakkelijker een grote website vanuit een mobiele versie, dan omgekeerd. Daarom raden we aan om in de ontwerpfase klein te beginnen en extra’s toe te voegen aan het basisontwerp dat geoptimaliseerd is voor bijvoorbeeld 480 pixels breed. Wij deden het bij Jobat omgekeerd en ondervonden toch wel dat het makkelijker is om zaken toe te voegen dan ze te moeten verplaatsen of verbergen

2. Denk aan het vingertje
We maken knoppen groot genoeg om gemakkelijk aan te tikken met de vingertoppen en bij veel van de huidige websites denkt men daar te weinig aan. Het is behoorlijk irriterend wanneer men zichzelf naar de verkeerde pagina stuurt omdat men niet goed aan de kleine knop kan en per vergissing op de verkeerde tikte. Probeer daarom zo veel mogelijk de aanklikbare zones minimum 40pixels groot en breed te maken

3. Vermageren is gezond
Een login-paneel dat bijvoorbeeld in een site komt geschoven, is heel leuk, maar helaas. Op een kleiner scherm en zeker op een toestel met een lichte processor, werkt dat niet best. Dus alle zware toeters en bellen moeten we eruit gooien of zijn minst automatisch laten uitschakelen wanneer de site een kleiner scherm detecteert.

4. Durf te variëren
Eenzelfde pagina kan op een laptop tevoorschijn komen in vier kolommen, op een tablet over drie kolommen, op een smartphone in de breedte op twee kolommen en op een smartphone in de hoogte op één kolom: http://www.jobat.be/nl/actualiteit/. Het vereist een goede analyse vooraf en redelijk wat coderen, maar het zorgt voor een website die er overal even aantrekkelijk en gebruiksvriendelijk uitziet.

5. Flash zal wellicht niet lukken
Flash doet het niet op iPad en iPhone (dat wist je al), maar ook toestellen die wel Flash ondersteunen zijn er niet altijd dol op omwille van hun kleinere processor. Adobe heeft trouwens zelf onlangs besloten om de verdere ontwikkeling van Flash voor mobiele toestellen stop te zetten. We raden aan om ofwel Flash te vermijden, ofwel alleen toe te laten wanneer het systeem een Windows pc of Mac detecteert.

6. Overleg met het reclamebureau
Momenteel gebruiken we responsive design om banners te verbergen op kleine schermen en dat is jammer. De meerderheid van de reclamebureaus levert namelijk banners op een vaste breedte en die vallen gewoon van het scherm als de resolutie ervan te klein is. Bovendien zit er vaak Flash-code in banners en dat maakt het nog moeilijker. Daarom overleggen we met reclamebureaus om banners in HTML5 aan te leveren. Die kunnen we overal tonen op aangepaste grootte.

7. Durf schrappen in de teksten
Samen met de mensen die de teksten schrijven, zorgen we ervoor dat de kern van de zaak meteen zichtbaar is op het eerste scherm dat een smartphonegebruiker ziet. Zoiets is wel vaak moeilijker dan je denkt, zeker als de hoofdzaak duidelijk moet zijn op een oppervlakte van een paar vierkante centimeter. Maar het kan, het vraagt alleen wat extra aandacht.

8. Geef jezelf toch maar handboeien cadeau
Responsive design werkt goed als er een hele reeks templates in de CSS voorgeprogrammeerd werden. Wanneer men nieuwe pagina’s aan de website toevoegt, valt men echter te vaak voor de verleiding om die zonder template toe te voegen. Op zich geen probleem, als er maar aandacht wordt besteed aan de schaalbaarheid van de content in deze pagina’s. De echte responsive design-webmaster herken je daarom aan zijn of haar levenslang volgehouden ijzeren discipline en totale afkeer van tabellen en andere niet mee-schalende technieken

About Kenny

Project Manager at Uniway, passionate about usability, mobile and other interfaces