Het laatste half jaar klokt het mobiel bezoek via smartphones en tablets af boven de 10 % op onze eigen website. Onze eigen Google Analytics tonen bovendien een gestaag stijgende trend van mobiele bezoeken. Hoog tijd dus om onze eigen website responsive te maken. Dit wil zeggen dat de website zich aanpast aan het toestel waarop hij bekeken wordt.
De grootste uitdagingen voor ons waren de kleinere afmetingen en de beperktere bandbreedte ten opzichte van de traditionele pc. Daardoor werd vooral de inhoud van belang en in mindere mate het gebruik van grote foto’s en andere grafische elementen.
Het is perfect mogelijk om afhankelijk van de afmetingen van het beeldscherm alle CSS stijlen zelf te schrijven (media queries) maar er bestaan tal van CSS frameworks die het werk kunnen vergemakkelijken. Voor de Natch-website werd geopteerd voor Twitter Bootstrap maar je kan ook kiezen voor bijvoorbeeld Foundation. Bootstrap is erg populair omdat het een uitgebreide set aan responsive-functionaliteiten bevat zoals het creëren van responsive images, een fluid grid systeem, dynamische fonts, een mobiel-vriendelijk menu systeem enzovoort.
Testing
Het is aangewezen om de gemaakte website op zoveel mogelijk toestellen van verschillende formaten te testen. Onze website werd getest op een aantal Android-smartphones en browsers, verschillende iPhones en Windows Phones, een iPad en 2 verschillende Windows Surface tablets. Omdat het onmogelijk is te testen op alle beschikbare types mobiele toestellen kan een eerste test met bijvoorbeeld Screenfly van Quirktools gedeeltelijk uitkomst bieden. Test er zeker je huidige site eens mee! Jammer genoeg is dit geen 100 % garantie omdat het renderen nog steeds gebeurt in jouw voorkeurbrowser (bijvoorbeeld Chrome, Internet Explorer, Firefox, …) terwijl pakweg de Android Dolphin browser of Safari voor iPhone toch nog iets anders werken. Het geeft echter reeds een goede indicatie.
User Agent Sniffing or not?
Omdat we vandaag de dag veel verschillende mobiele toestellen hebben die ook vaak verschillen in werking is het verleidelijk om binnen de website aan ‘user agent sniffing’ te doen. Dit is het opvragen van het type van toestel en afhankelijk daarvan andere functionaliteiten of stijlen aan te bieden. We kozen er echter voor om dit niet te doen omdat de aangeboden user agent doorheen de tijd te sterk evolueert. Er komen steeds meer toestellen op de markt waardoor je beter ontwikkelt voor de grootst gemene deler. Een CSS framework als Twitter Bootstrap bevat de meest courante media queries.
Extra’s
We zouden bijna vergeten dat je met een smartphone ook kan bellen! Daarom is het altijd leuk om de smartphone-surfer een extra functionaliteit aan te bieden, namelijk met één klik het telefoonnummer bellen dat op de website wordt vermeldt. Plaats hiervoor rond het telefoonnummer de volgende code: <a href=”tel:003233406677″>+3233406677</a>. Op een vergelijkbare manier kunnen bijvoorbeeld ook adresgegevens op een contactpagina klikbaar gemaakt worden voor gebruik in de gps-software van de smartphone.
Blog
Onze eigen blog (http://blog.natcheurope.com) maakt gebruikt van de BlogEngine.NET software, in combinatie met jQuery Mobile. Deze biedt heel wat out-of-the-box functionaliteiten en met enkele minieme ingrepen op het gebied van look-and-feel kan je ook de mobiele versie gemakkelijk en snel personaliseren.
Door het implementeren van een responsive design dat zich aanpast aan het toestel worden artikels, blogposts en pagina’s slechts één keer aangemaakt. We maken dus geen alternatieve pagina’s aan voor mobiele gebruikers, het framework optimaliseert de inhoud voor het toestel.
