In de technische wereld van de webontwikkeling is de trend al een tijdje geleden ingezet, maar nu zien we ook steeds vaker dat de vraag rechtstreeks door ontwerpers en onze klanten gesteld wordt: een responsive site. Waar een website voorheen ontwikkeld werd voor een minimale schermresolutie van 1024 pixels breed (meestal uitgaande van een grid van 960 pixels breed, zodat er voldoende ruimte overblijft voor de randen en scrollbalken van de browser), is het tegenwoordig steeds vaker gewenst om sites ook voor kleinere schermen geschikt te maken. De belangrijkste reden hiervoor is dat het besef groeit dat websites ook op smart phones en tablets goed getoond moeten worden. Een groot deel van de surfers zit immers niet meer per definitie achter zijn of haar computer. Men verwacht zelfs dat het aantal sites dat via mobiele apparaten bezocht wordt op niet al te lange termijn de desktop-bezoeken zal passeren.
Een responsive website is device en resolutie onafhankelijk. In de praktijk betekent dit dat de website zich automatisch aanpast aan het formaat van de browser waarmee de site bekeken wordt, zonder af te doen aan de gebruikerservaring. In tegenstelling tot een ‘puur’ mobiele site, is een responsive site breder inzetbaar (omdat de opzet flexibeler is).
Een technische uitdaging
Mobiele apparaten zoals telefoons en tablets stellen de ontwikkelaar voor een aantal uitdagingen. Behalve de kleinere schermen, ontbreekt vaak een fysiek toetsenbord en vrijwel altijd een muis(pointer). Wat betreft de bediening van een website, verdwijnen daardoor een aantal mogelijkheden. Zo heeft het bijvoorbeeld weinig zin om functionaliteit in te bouwen die reageert op de positie van de muispointer (denk daarbij aan menu’s die openklappen als je er met de muis overheen beweegt) of op de TAB-toets (vaak gebruikt voor het wisselen tussen velden in een invulformulier).
Mobiele browsers missen daarnaast vaak de desktop plug-ins zoals bijvoorbeeld Adobe Flash (Adobe heeft al aangekondigd om Flash niet verder door te ontwikkelen voor mobiele apparaten). Dit beperkt natuurlijk ook de mogelijkheden, hoewel het op zichzelf geen nadeel hoeft te zijn, aangezien er inmiddels standaard technologie beschikbaar is om de gaten in te vullen (met HTML5 en CSS3 in de ‘lead’).
Tenslotte worden mobiele apparaten vaak op het (mobiele) 3G netwerk gebruikt. Dit zorgt voor een tragere verbinding en mogelijke extra kosten voor dataverkeer (aan de kant van de eindgebruiker). Als ontwikkelaar moet je dus rekening houden met de hoeveelheid data die de site in het kleinere formaat doorstuurt.
Ontwerp: mobile first of desktop first?
Als we kijken naar de extra complexiteit die het ontwerpen en ontwikkelen van een responsive website met zich meebrengt, hebben we inmiddels geleerd dat het extra werk aardig kan oplopen. Alleen met een goede planning vooraf en een degelijke design-strategie, zijn de kosten voor de klant in de hand te houden. Het is namelijk relatief ingewikkeld om een site die gebouwd is op een grid van 960 pixels breed (responsive) om te zetten naar een kleiner formaat, tenzij er vooraf rekening gehouden wordt met deze voorwaarde.
Vaak adviseert men als design-aanpak ‘mobile first’. Dit houdt in dat de site eerst in het kleinere formaat wordt ontworpen (bijvoorbeeld op 320 pixels breed voor de iPhone) en vervolgens wordt omgebouwd naar het grotere formaat. Ik ben er niet van overtuigd dat dit perse noodzakelijk is. Mits een aantal randvoorwaarden worden opgesteld voor het ontwerp, is het prima mogelijk om eerst de ‘grote’ versie te ontwikkelen en daarna terug te schalen. Wij hebben dit met een aantal sites probleemloos op deze wijze gerealiseerd. Wel moet er goed gekeken worden naar de mogelijkheden die een site moet bieden in beide formaten. Voor de mobiele versie geldt dat lang niet alle functionaliteit beschikbaar hoeft te zijn, zolang de kernfunctionaliteit van de site en de look-and-feel (belangrijk vanuit marketingoogpunt) niet verloren gaat.
Maar, doe het dan ook direct goed…
Overigens is het simpelweg uitschakelen of herschalen van elementen dmv. media queries in de CSS files (stylesheets) niet de volledige oplossing. Dit gebeurt nog te vaak, waarschijnlijk door gebrek aan kennis (of de juiste faciliteiten) bij de ontwikkelaar. Zowel elementen die uitgeschakeld zijn als elementen die een nieuwe afmeting meekrijgen (in de stylesheet), worden namelijk toch volledig geladen door de browser (maar slechts visueel anders weergegeven). Dat is zoiets als je aanhanger volladen en vervolgens net doen alsof hij niet achter je auto hangt zolang de inhoud afgedekt is met een zeiltje. De ballast is wel degelijk aanwezig in de site. Hierdoor belast de mobiele site de browser op dezelfde wijze als de desktopversie, hetgeen zorgt voor veel dataverkeer en een trage site (het eerder genoemde probleem). Dit is op te lossen door de juiste technologie in te zetten aan de serverkant, bijvoorbeeld scripts die afbeeldingen automatisch terugschalen zodat ze afgeleverd worden in een kleiner formaat.
Conclusie
Samengevat kunnen we concluderen dat eigenlijk niemand meer om een responsive (of mobiele) site heen kan. Een bestaande site ombouwen naar een responsive versie kan nogal wat werk met zich meebrengen, het zou dan aantrekkelijker kunnen zijn om een aparte mobiele versie te maken (gebaseerd op een tweede, mobiele, template).
Bij het ontwikkelen van een nieuwe site is het per definitie aan te raden om vanaf het begin rekening te houden met een kleinere variant. De extra kosten tijdens de ontwerpfase wegen dan vrijwel zeker op tegen het toekomstige voordeel: optimale bediening van je potentiële en bestaande klanten.
Wilt u meer weten over hoe u uw bezoekers met uw website de perfecte gebruikservaring kunt geven, of ze nu een PC, tablet of smartphone gebruiken? Neem dan contact met ons op!
