How we built our website revamp (Part One)

We’ve recently revamped our website. Bits of it are still familiar, but there’s a whole lot of change going on under the hood. In this article, I’ll briefly explain how we rebuilt the site, outlining along the way some of the libraries we used as well as an introduction to our own bespoke tools and libraries that power the vast majority of our solutions and quite often don’t get a mention.

The article will be split into two parts, this part explaining the initial moving between platforms and the build of the “desktop” version of the site, the second part describing how we built the iPhone version of the site detailing challenges and learnings from that experience.

What was our brief?

Our initial brief was pretty simple:

• To provide a fresh new look onto the existing website in-line with the Code brand as is today.
• To make the home page a central hub for our “social activity”, i.e. a place to collate and bring together the various strands of our social digital activity.

When we evaluated the brief, it was pretty clear that we needed to give the site more than just a visual, CSS re-skin and that greater work behind the scenes was required to get this brief up and running successfully.

Platform migration

The platform before the refresh had been doing a great job for years. But it was starting to creak. The site was not as easy as it should have been to update and the technology we now base our solutions on have moved on leaps and bounds. It was time to leave the .NET 1.1 site behind and get it up to speed with .NET 3.5. Given this and the fact that it would be easier for our current team to maintain, the decision was made to migrate content and pages etc. into our shiny CMS platform rather than hacking at the existing code base.

Our CMS has had a good year and to date is now the backbone behind at least 21 sites we developed over 2009 and has proved extremely solid and robust. It’s something we developed ourselves. It’s based on Microsoft ASP.NET 3.5. and was also developed to showcase our expertise in using the JavaScript library ExtJS for developing intuitive backend / desktop like user interfaces. The CMS itself is part of a wider framework we have developed which includes such capabilities as:

• Content caching and resource management
• Dynamic image manipulation routines allowing us to scale, crop, created text based images, apply filters and create composite layer images.
• Highly configurable URL rewriting engine to implement friendly URLs.
• JavaScript and CSS batching (grouping files together into one file) and compression (removing white-space, superfluous characters etc as well as gzip-ing the response)  to improve page overall page weight and loading.
• Our own inversion of control container allowing us to “hot-swap” implementations of our application interfaces
• Our JavaScript library and standards that compliment and enhance our core JavaScript library stack of jQuery and ExtJS

Migration to the new platform was pretty straight forward. It was simply a case of mapping content from the old website’s database to the Code CMS database structure. Content, media and meta data including friendly URLs etc where migrated across. Everything fell into place relatively fast and immediately we had a more useable and user friendly platform up and running to form the basis of the new site.

New builds

Once the core data was migrated to the new CMS and framework, we began the work of rebuilding the presentation templates. The decision was made to start these from scratch, partly due to the new design but also in part down to the fact that, how we develop our user interface code has changed considerably since the initial site was launched.

Most of the templates are pretty straight forward XHTML / CSS. The main challenge was the new homepage. We made the decision to build the interactive homepage promotion area using JavaScript rather than what was in the previous version Flash. The promotion area was a bespoke build based on the jQuery library and our own Code.js library. Plenty of great features where thrown in there including smooth cross fading transitions, image preloading plus interactive elements such as the four control buttons as well as “lever” that you can pull down to move the sequence on to the next promotion. We’re pretty pleased with the result. It’s content is fed in from our CMS and it degrades well when you have JavaScript disabled.

We also used a few other third party JavaScript libraries to help with our UI build:

• jQuery - The cornerstone framework for pretty much all our JavaScript development.
• Cufon – for dynamic font replacement for header titles etc.
• Fancybox - for the smooth “lightbox” effect
• LowPro - Dan Webb’s brilliant framework for managing our classes and attaching behaviours to elements.

Feed me!

As mentioned in the brief, the homepage needed to be the central hub for displaying our social digital activity. This meant aggregating content from various sources such as our Twitter feed our Flickr account and our own WordPress based blog. When we initially approached this, we went looking into the depths of each platform’s expansive API. It became pretty apparent that we could by pass a lot of complexities by simply consuming and caching the RSS feeds. This was made a lot easier by using the fantastic ASP.NET RSS Toolkit. This library effortlessly consumes a RSS feeds and maps them into generated .NET C# classes for use in our applications. Given this, it was simply a case of apply some caching on feeds being read as well as writing some simple string parsers to format the content correctly in the site e.g. by linking to Twitter users / hashtags etc.

Hopefully, this has given you a brief insight into the technology we used to build the revamped Code website. In the next article I’ll explain how we created an iPhone version of the site, as well as describing quirks / stumbling blocks we encountered on the way.

~Ste