In October Dan got me started on building a Christmas epic, the responsive advent calendar.

For Christmas a few years ago we built a Christmas card website. It wasn't responsive which made me a little sad but you know, it was festive and jolly. You can look at that here if you want. It was full of facts and a little competition and it was a fun little thing.

After a years hiatus, we decided to build something much more technical to toy with our new skills, be they the latest in responsive web design, analytics or just our new user testing process.

We built this in a new CMS we've been using called Craft which has allowed me to do some neat things with it's template engine that uses Twig. First off, I've added date fields to the CMS for each video, independent of the publish date, and used this in my template to check against the current day. I can use this to actually render the links for pages out based on whether the day has happened or add specific classes for past days, today or in the future. I also added a dropdown to the CMS entry for the videos so we can apply a class for choosing the colour of the tile/page. All very neat stuff.

We also use dates to lock off the competition once it's ran its course so that we don't have to wake up on Christmas morning and worry about turning it off to stop entries. Despite the fact I'll be up from about 6am on Christmas day, I have no desire to be updating websites ;)

The tile layout just uses Isotope which isn't anything new but it allows us to flow the elements nicely to make it responsive. Isotope 2 made everything a lot more hassle free, defining gutters and widths in CSS and just working responsively in masonry mode.

I use a bit of PHP and MySQL to do competition entries. On entry a row is created that stores the entrants email and the day (don't need to worry about time) and if they try again, we check against this to determine whether they're allowed to enter again. If not then they're directed to a page which I took great delight in creating the URL for (you-are-bad) and told to try again tomorrow. They are bad for trying to game the system. They can of course use different emails but from a marketing perspective, we're using this to get emails. The more the merrier.

The site is laden with analytics events masterminded by Stuart. Simple events range from clicks on the social sharing buttons to whether or not the users decided to make it snow on the pages or not. We also used this awesome script by LunaMetrics to track a multitude of events on the YouTube videos to see if people were even bothering to watch them (sadface if you haven't), whether they pause or play them or stop them. It's pretty great. So please watch the videos!

The snow is a bit of fun, also a nice jQuery plugin, and I spruced it up a bit (is a pun intended there? I guess I made one without thinking, because you know, Christmas trees) with some lovely HTML5 local storage. Once you start that snow it's never going to stop unless you a) clear your cache ( why would you be doing that ;] ) or b) decide to stop it for some reason, in which case, what's wrong with you, Scrooge?

The site doesn't run on IE8. I know, I know, but it's Christmas time for developers too and my present is making this work on browsers I want. So sorry if you're trying to get on there on IE8. We have however provided you with a page helping you to upgrade and it does still have a video, albeit of someone getting coal. FESTIVENESS!

We did a few rounds of facilitated user testing on the site initially and we did discover some issues with the site. You know that voting system, you probably saw? No? That's because it's gone. No one really got that we had two things going on, voting for which videos were liked and entering a competition, so the best result for us was removing the voting as it was the least necessary function. The competition end date was also the 17th December however a grand total of 0 people read this and decided it was on the 24th. At Code 7 we adapt to challenges so we just... changed the date. Easy. There were a couple of design issues but those were quickly resolved.

Anyway, I hope you enjoyed my rambling wander through the Christmas site and I hope you enjoy the festive season. Merry Christmas!