Responsive design deel 2 – de Hoe van responsive design

Hoe ontwikkel je een resposive website?

In dit tweede artikel over het lanceren van een mobiele versie van voys.nl wordt er ingegaan op de technische ontwikkeling van een responsive ontwerp. In deel één las je het “waarom” en in deel drie lees je alles over de resultaten van het responsive ontwerp. In dit deel eerst de “hoe”: Welke keuzes hebben we gemaakt en welke techniek hebben we ingezet?

Bij responsive design past de website zich aan aan de gebruiker. De inhoud van een pagina wordt dus anders gepresenteerd als een gebruiker daarom vraagt. Hierdoor zal dezelfde website er anders uitzien in de browser van de mobiele telefoon dan op die van de computer. Responsive design houdt ook in dat, wanneer het browser venster kleiner wordt gemaakt, op de computer bijvoorbeeld, de site zich hierop aanpast. Dezelfde website, met dezelfde content uit één CMS. Een website die zich aanpast een tablet, mobiele toestellen TV’s en wat nog komen gaat.

De zoektocht naar een ‘responsive framework’ of ‘boilerplate’

Als men praat over responsive design praat men ook vaak over HTML5, de laatste versie van de ‘taal’ waarin websites worden geschreven. Op het moment dat je bezig gaat met het ontwikkelen van een responsive design is het niet handig om te proberen het wiel opnieuw uit te vinden. Hiervoor zijn reeds frameworks ontwikkeld. We gingen daarom op zoek naar een responsive framework of een goede responsive HTML5 boilerplate.

Bij de meeste responsive frameworks passen de blokken met tekst, video’s en plaatjes (de content) zich netjes aan aan verschillende browsergroottes. Een goed voorbeeld van een dergelijke framework is Twitter Bootstrap. We wilden echter een stap verder gaan. Wij waren van mening dat op een grote monitor de grootte van het lettertype ook groter mag zijn. Ook de ruimte tussen de blokken met content mag in dat geval groter gemaakt worden. Wij hebben dit ‘responsive 2.0’ genoemd. Deze functionaliteit vonden we onder andere in de Taiga boilerplate, ontwikkeld door Studio Wolf uit Groningen.

Responsive ontwerpen is een specialisatie

Na wat geëxperimenteer waren we er al vrij snel achter dat het maken van responsive design van een website een specialisatie is. Design en techniek zijn erg belangrijk en sterke ervaring met de omgang met zowel design als techniek is een absolute pre. Daarom is er aangeklopt bij Studio Wolf. Samen met deze club zijn we gestart met de migratie naar responsive. Hierbij zorgde zij voor ontwerp, HTML en CSS, waar wij de implementatie binnen het CMS voor rekening namen.

Responsive alleen is helaas niet voldoende

Het hebben van enkel een responsive design van de website bleek voor ons niet voldoende te zijn, iets waar we bij de start wel op hadden gehoopt. Toch besloten we ook gebruik te maken van de functionaliteit van het “herkennen” van het type apparaat wat de site bezoekt (server side client detection). Het herkennen van het type mobiele toestel maakt het mogelijk om bepaalde elementen van je site niet te tonen, waardoor de site ‘kleiner’ wordt en hierdoor sneller laadt, ook over trage mobiele verbindingen. Onder andere onnodige javascript bestanden worden niet geladen bij het bekijken van een mobiele versie van de website. Ook worden grote header afbeeldingen vervangen door kleinere versies van deze bestanden.

Let hierbij wel op! Als je CMS aan caching doet, moet je rekening houden met de mobiele en niet mobiele bezoeker!

Omdat we de lijst met mobiele apparaten niet steeds handmatig up-to-date willen houden, maken we daarvan gebruik van een systeem die dit automatisch bijhoudt. Deze functionaliteit heet ‘Browser Capabilities Project’ of BCP. Deze is echter niet perfect. Sommige browsers van mobiele apparaten worden door BCP niet “gezien” als mobiele browsers.

Volgende week, in deel drie van deze serie over responsive design, presenteren we de resultaten van het responsive design.