Dinsdag 3 mei stond ik al vroeg op het station. Ik was op weg naar Utrecht voor een cursus van Fronteers. De cursus ging over het ontwikkelen van een mobiele website en werd gegeven door Vasilis van Gemert. Hij is een front-end developer die al een lange tijd met adaptieve ontwikkeling bezig is. De cursus begon met een stukje geschiedenis over mobiele website. Vroeger bouwden we een aparte mobiele website met een aparte domeinnaam. Vaak een uitgeklede versie van de normale website. Maar met de nieuwe techniek kun je je huidige website ook mobiel bouwen. Je wilt namelijk niet alleen dat je website er op een mobiele telefoon goed uit ziet, maar ook op een tablet. Bijvoorbeeld een iPad. Wanneer je de Ipad draait moet de website helemaal zichtbaar zijn en dus mee schalen.
In deze cursus zijn er verschillende technieken aan bod gekomen. De drie belangrijkste waren viewports, media queries en image-replacement met javascript. Met een viewport kun je onder andere vertellen hoe breed de website is en of de website moet inzoomen. Met media queries kun je, afhankelijk van de specificaties van een apparaat, een bepaalde stylesheet laden. Je kunt de stijl van de website dus veranderen als je resolutie kleiner wordt.
Tijdens de cursus werd er een voorbeeld gegeven. Er werd verteld hoe dit gebouwd is en er werd over gediscussieerd. In het voorbeeld hieronder zie je een website van ING. Deze website is gebouwd voor een mobiele telefoon, tablet en normaal computer beeldscherm.
Helemaal links zie je de website op een wat ouder mobiel apparaat. In het midden zie je de afbeelding van een tablet / iPad. Je ziet dat de website wat smaller is geworden. De blokken zijn iets kleiner geworden en de foto wordt ook kleiner. De website is nu goed te bekijken op een tablet / iPad zonder scrolbalk. Het hoofdmenu gebruikt de volledige breedte en alle blokken zijn onder elkaar gezet. Helemaal rechts zie je de website op een normaal beeldscherm van een laptop of desktop computer ziet. De website zal zich dus aanpassen aan de grote van je beeldscherm.
Je kunt het zelf ook proberen. Surf maar eens naar mijngeld.nl of geenstijl.nl. Wanneer je de browser kleiner maakt, zul je zien dat de website veranderd. Dit werkt trouwens alleen in nieuwste browsers zoals IE9, Chrome of Firefox 4. Of bekijk een van de websites eens op je telefoon of tablet.
Al met al zorgen de nieuwste ontwikkelingen met HTML5 en CSS3 ervoor dat we heel mooi met de verschillende schermformaten om kunnen gaan. Voor onze klanten is het van belang dat ze goed hun doelgroepen in de gaten houden en ook met behulp van bijv. Google Analytics meten hoe de site bezocht wordt. Hierop kunnen wij de gebruikte technieken op de site dan weer aanpassen.
Ik sta te popelen om het geleerde in de praktijk te gaan brengen in de komende projecten. Een waardevolle dag!
