How We Built the Top10.com Front End

29th September 2011

The new Top10 redesign didn’t involve just a re-skinning of the existing site, but a complete rewrite of the presentational code. We used the opportunity to put into practice some modern and cutting-edge techniques we’d been keen to try, and in this post we’d like to talk about that a little more. We’ll try not to be too technical, but you’ll get more out of this if you’re a code geek.

The first and most prominent of the features we used are web fonts, which we’ve implemented across the site in two major ways. The first is for the main title on each page; this is a font called URW Clarendon, bought from MyFonts, and it’s a key element of the Top10 brand. But a less obvious way we’ve used web fonts is in the site-wide iconography.

We made a custom font set and converted it for use on the web, and have applied it using generated content properties. Loading only one font file instead of a number of images is a real time and resource saver, and it means the images scale nicely on high-resolution monitors and when zooming on mobile devices.

It’s not only for the icons that we’ve used generated content, though; we use it quite extensively across the site, notably using counter properties for the numbers in the main Top10 list view. This gives us more (although not total) control over the characters than is provided by the default list counter, and is also vital for keeping the numbers consistent when the list is remixed and items moved around.

That movement in the list, when items are moved up or down, are made possible by the use of CSS transforms and transitions; the transforms scale the list items up and down appropriately, and the transitions give the smooth movement between positions.

Using CSS for these transitions lets us utilise the power of the user’s computer’s graphics card, making the animations fast and smooth. But in order to make vital animations work even in unsupported browsers we extended jQuery (our framework of choice) in order to provide a JavaScript fallback for the CSS transitions.We used CSS keyframe animations in a few places on the site, notably to animate the shining effect which you can see when you hover over the logo, and the buttons which are shown when you’re about to remove an item (if you’re technically minded - and you probably are, if you’ve read this far! - here’s a more in-depth explanation of the button and logo effects).

The buttons use CSS gradients for the gloss effect. Users of Internet Explorer 9 will also see this effect even though their browser doesn’t support gradients, as we provided a fallback method using SVG. Anyone using IE8 or below will see flat colours instead.

Speaking of Internet Explorer, we’ve used the graceful degradation methodology while building the site, so there are a few cosmetic differences which are more noticeable in that browser. In total, however, we used only 20 lines of code to cater specifically for IE users (it should be noted that while the site works in IE6 and IE7, it’s with greatly reduced functionality).

Even after all of our changes and the increased use of CSS over images, the final minified stylesheet is 10k smaller than that used for the previous design, and we eliminated all CSS hacks in the process of redesigning. This cleaner, ligher code lays the foundations for making a device-responsive design, which is our challenge for the near future.

There are still a few wrinkles to iron out in this new design, but when those are out of the way we’ll start planning new features and new and interesting ways to create them.