Het vak van de webbouwer en online marketeer wordt steeds leuker en uitdagender!

“Het vak van de webbouwer en online marketeer wordt in ieder geval steeds leuker en uitdagender!” dat schreef @qtag_qrcode in een reactie op het artikel    Responsive design, development en content in één flexibele aanpak. Inderdaad refereert hij daarbij terecht aan: 60% van internetverkeer is mobiel (zie het CBS persbericht van 23 oktober). Voor webbouwers is dit inderdaad een uitdaging. Of het ook leuker en uitdagender wordt, browsers, schermresoluties ondersteunen doen we al sinds we websites bouwen.

De benadering van content first is wel nieuw en interessant. En ik zou zeggen uiteraard kunnen we daarbij niet meer zonder de ‘responsive gedachte’. De meeste webbouwers denken bij responsive toch steeds aan de CSS3 media queries. Wat mij betreft zou het (weer) meer de breedte in mogen.

Uitgaande van CSS3 media queries geeft @nielsvanmidden ook als reactie op het bovengenoemde artikel een mooi overzicht van breekpunten. Een breekpunt is een minimale of maximale schermbreedte waarop je de weergave van je site aanpast. Je kunt dat heel strict toepassen, waarbij je je aandacht vooral richt op het device; bijvoorbeeld … pixels breed is een tablet in landscape mode. Een meer flexibelere aanpak wordt voorgesteld in Responsive Design: Why You’re Doing It Wrong. In dat artikel wordt voorgesteld je breekpunten te bepalen op wat je ziet in de browser(s) naarmate je het window verkleint of vergroot. Daarbij wordt dan ook meteen weer aandacht gevraagd voor de ondersteuning voor verschillende browsers. Microsoft ondersteunt media queries bijvoorbeeld pas vanaf IE9.

Hoe je uiteindelijk je breekpunten ook samenstelt in beide benaderingen kun je werken van klein naar groot of andersom. Per breekpunt kan ook de content aangepast worden. Verschillende breekpunten zullen vragen om het weglaten, toevoegen of herpositioneren van content. De contentkeuze wordt moeilijker bij een responsive benadering vanuit schermbreedte i.p.v. het soort device. Want zoals in 11 Reasons Why Responsive Design Isn’t That Cool! (punt 10) wordt aangegeven is het soort apparaat vaak bepalend in de behoefte van de gebruiker. De andere 10 genoemde redenen mogen ook niet onderschat worden. Schalen van plaatjes, elementen verbergen op basis van media queries optimaliseren de laadtijd van de website niet. De laadtijd, juist ook voor de mobiele gebruiker zo belangrijk, wordt overbodig lang doordat onnodige en onnodig grote bestanden geladen worden.

Voor een goede gebruikerservaring lijkt de inzet van media queries op termijn dan ook niet toereikend. Alternatief om toch weer aan de serverkant aan de slag te gaan. Mensen die met WordPress werken zouden bijvoorbeeld eens naar de wp_is_mobile()  functie kunnen kijken. Daarmee is het mogelijk om aan de serverkant vast content te schalen, tonen of juist niet tonen. Ook dit past prima in een content en / of mobile first benadering. Het combineren van client- en serveroplossingen vormt mogelijk een goed compromis tussen een losstaande mobiele website en een volledig op media queries gebaseerde responsive website.

Ook Jamedo Websites bouwt nu, mede op mijn advies, responsive designs op basis van media queries. Dat was reden genoeg om deze benadering nog eens kritsich te bekijken. En hoe ziet jouw website er eigenlijk uit op een mobiele telefoon of tablet? Via Responsinator.com kun je hiervan snel een goede indruk krijgen.