Building Preloaded: The front-end

At the beginning of the redesign project we agreed some design tenets: the new site should be a best-practice showcase and an opportunity to learn and use some of the latest web technologies; and it should employ existing services where practical.

To achieve the former we targeted users with the most modern web browsers, using the graceful (or progressive) enhancement method to ensure that even with older technology, no-one would be left unable to read all of the site content.

The most obvious example of this is in the design of the buttons; users with a decent browser (e.g. Firefox or Safari) would see these with rounded corners — because these browsers are capable of producing them natively with the CSS3 border-radius declaration — while users of other browsers (e.g. Internet Explorer) would see them square:

Browser comparison. Top: Safari 4; Bottom: Internet Explorer 8

While all users see the same content, those with a modern browser are rewarded with a slightly improved experience. We used other variations of this method elsewhere throughout the site.

Technology

Glow

Glow is a BBC-developed Javascript library, with a jQuery-like syntax but a focus on interface widgets, which makes it easy to create animations and UI elements for websites. Having already used it briefly on a project earlier in the year, we decided it would be a good fit for what we wanted - and something new to learn.

The image carousel on the homepage was made with Glow, as was the slide-down contact details on each page, and the lightbox overlay effect for screenshots on the case study pages.

The only drawback we found with Glow was a bug in their carousel rendering in IE8; this meant that we had to force compatibility view for IE8 to display as IE7, but it's something we're hoping to change after the next Glow release.

HTML5

Under the bonnet we used some cutting-edge code to mark up our content. HTML5 is a very new specification and still somewhat in a state of flux, but we used it in two different ways:

First was to provide semantic structure to the pages with the new structural elements (the definitions of which are still being discussed, so may not be completely correct - HTML5 Doctor was an invaluable resource for this).

Second, and of more impact to the user, was using sessionStorage to take advantage of the opportunities for storing data in the user's browser. We used this in conjunction with Glow to create the carousel and slide-down effects; if you have a modern browser these are created only once and held in the browser’s storage, whereas older browsers create them anew each time you visit the page - this leads to the site being somewhat snappier in modern browsers.

Web Fonts

In order to achieve brand consistency we had a font in mind which we were going to implement using the Cufón Javascript technique. During the process of adding this the font foundry clarified their licensing, excluding this font from online use in this way, so we had to scrap it and look for a different angle.

While we were trying out various alternatives using Flash and Javascript (we now know more about font licensing and implementation than we ever wanted to), a new solution presented itself. Using Font Squirrel's web font generator and Paul Irish's bulletproof syntax we were able to use the browsers’ own built-in font support (with @font-face) and achieve our desired result for 95% of our users; the other 5% will see a standard system font, as per the graceful en­hance­ment method.

Update: We actually ended up removing the Web Fonts from the website for two reasons; first a licensing issue, then our substitute didn't display well on certain operating systems. We'll be revisiting this in future.

Conclusion

Working with brand new and cutting edge features meant spending time chasing down false leads and up blind alleys, but was a great way of learning and gave us invaluable experience to take into the sites we make for our clients in future.

There are still one or two changes which we’ll be rolling into the site in the coming months, but if you spot any problems — or just want to talk more in-depth about the methods and techniques we’ve used — don't hesitate to leave a comment.


Comments

  1. nice work- i dig it.

    natako 14 January 2010, 4:37p.m.

  2. Yes, really good build... lets the work to speak for itself. Thanks for the heads up on Glow :-)

    Stephen Wilson 14 January 2010, 4:59p.m.

  3. Great work Peter, site looks and works great and article is very well written - easy to understand and appreciate for the not-so-technical! All the best

    Matt Cottis 14 January 2010, 5:58p.m.

  4. Really nice makeover. Be interesting to know how you do did the back end / cms too :)

    Max Newson 14 January 2010, 7:15p.m.

  5. Thanks everyone!

    @Matt - Glad to know I got the tone right; I made it very plain at first, but was encouraged to use more technical detail.

    @Max - We're planning a post about the back-end build, and probably one about the design and planning too.

    Peter 15 January 2010, 10:44a.m.

  6. Nice work as usual folks. You've struck a good balance between a clean and well laid out site.

    James 21 January 2010, 1:27p.m.

  7. Interesting article, I was wondering if you considered using OOCSS.
    It certainly seems to be good in principle - but maybe adds a bit too much clutter for you?

    http://wiki.github.com/stub...

    Ben

    emson 5 February 2010, 11:57a.m.

  8. Very, very nice work!

    We're working on a new website and we'd like to use Helvetica Neue with @font-face as well. Did you get any special license to use it on your website or can we just convert our own font to the eot format?

    Thank you and once again, good job! :)

    Sébastien Morin 10 February 2010, 5:22p.m.

  9. No, actually they are violating Linotype's EULA hardcore.

    Specifically §1.5 which states:
    "Embedding of the Font Software into electronic documents or Internet pages is only permitted under the absolute assurance that the recipient cannot use the Font Software to edit or create a new document (read-only). It must be ensured that the Font Software cannot be fully or partially extracted from said documents."

    [Edited to remove dead links]

    James Cready 15 March 2010, 6:09p.m.

  10. Thank you for bringing this oversight to our attention; we've removed the fonts while we look into it.

    Peter 15 March 2010, 9:56p.m.