Een nieuwe site

Sinds kort staat m'n nieuwe site live: sommige onderdelen zoals leesvoer en het blog zijn niet heel veel veranderd, de grootste verandering is de homepage en voor een heel groot gedeelte in de techniek.

De homepage

Het grootste verschil tussen de oude en de nieuwe homepage is beleving. Op m'n oude homepage stond teveel tekst, en ik denk dat dat in mijn geval niet de beste homepage was. Voor het ontwerp heb ik veel gehad aan 15 Design tips to learn from Apple. Met grote afbeeldingen en veel contrast wil ik dat bezoekers meteen kunnen zien wat ik doe, ipv dat ze er over moeten lezen. A picture is worth a thousand words, niet?

De techniek

HTML & CSS

Op dit gebied is er niet zoveel veranderd. Ik bouw m'n sites standaard in HTML5 en CSS3, en dat was m'n vorige site ook. Alleen heb ik deze keer meer gebruik gemaakt van CSS3, namelijk media queries.

Repsonsive

M'n nieuwe site is responsive; dat betekent dat de site zich aanpast aan de breedte van het scherm, dmv media queries. Dus niet checken met welk besturingssysteem je te maken hebt, maar gewoon kijken naar hoe breed het scherm is. Voor de opzet van m'n site heb ik de 320 and up template gebruikt. Hier zit eigenlijk alles in wat je nodig hebt om je site responsive te maken. Je begint met het bouwen van je mobiele site en werkt naar een steeds groter scherm toe. Het belangrijkste onderdeel van deze template vind ik respond.js. Dit zorgt ervoor dat media queries ook werken in IE6-8. Als je dit niet gebruikt ziet IE je media queries niet en zal de mobiele site laten zien, zelfs op een groot scherm.

Adaptive images

Om de site nog beter toegankelijk te maken voor mobiele telefoons en tablets is het belangrijk dat alle afbeeldingen ook kleiner zijn. Je wilt niet dat iemand een afbeelding van 1,5 mb moet downloaden op z'n 3G verbinding. Er zijn meerdere oplossingen hiervoor, maar de oplossing die ik gebruik is Adaptive images.

Deze oplossing is simpel in je site te bouwen: via javascript wordt de schermbreedte opgevraagd, en die wordt in een cookie gestopt. Met een aantal simpele aanpassingen in je htaccess zorg je er voor dat de afbeeldingen die geschaald moeten worden naar een php script worden gestuurd. En dat script zorgt ervoor dat de afbeelding naar een passend formaat wordt geschaald, en slaat die daarna op in een cache directorie. De gecachde afbeeldingen worden trouwens eerst bekeken om te kijken of er überhaupt iets aangepast moet worden, of dat dat al eerder gedaan is.

Het mooie van dit script is dat het, als er geen cookie met je schermbreedte is, hij automatisch de mobiele versie van de afbeelding teruggeeft. Prima dus voor je SEO, want hoe kleiner je afbeeldingen, hoe sneller je site, hoe beter je scoort in de zoekresultaten.