Building Preloaded.com: The Front-end

Warning This article was written over six months ago, and may contain outdated information.

This sub­ject of this post is the redesign of my employ­er’s web­site, Preloaded.com, and is cross-post­ed from the Pre­loaded blog with permission.

At the begin­ning of the redesign project we agreed some design tenets: the new site should be a best-prac­tice show­case and an oppor­tu­ni­ty to learn and use some of the lat­est web tech­nolo­gies; and it should employ exist­ing ser­vices where practical.

To achieve the for­mer we tar­get­ed users with the most mod­ern web browsers, using the grace­ful (or pro­gres­sive) enhance­ment method to ensure that even with old­er tech­nol­o­gy, no-one would be left unable to read all of the site content.

The most obvi­ous exam­ple of this is in the design of the but­tons; users with a decent brows­er (e.g. Fire­fox or Safari) would see these with round­ed cor­ners — because these browsers are capa­ble of pro­duc­ing them native­ly with the CSS3 bor­der-radius dec­la­ra­tion — while users of oth­er browsers (e.g. Inter­net Explor­er) would see them square:

Brows­er com­par­i­son. Top: Safari 4; Bot­tom: Inter­net Explor­er 8

While all users see the same con­tent, those with a mod­ern brows­er are reward­ed with a slight­ly improved expe­ri­ence. We used oth­er vari­a­tions of this method else­where through­out the site.

Technology

Web Fonts

In order to achieve brand con­sis­ten­cy we had a font in mind which we were going to imple­ment using the CufĂłn Javascript tech­nique. Dur­ing the process of adding this the font foundry clar­i­fied their licens­ing, exclud­ing this font from online use in this way, so we had to scrap it and look for a dif­fer­ent angle.

While we were try­ing out var­i­ous alter­na­tives using Flash and Javascript (we now know more about font licens­ing and imple­men­ta­tion than we ever want­ed to), a new solu­tion pre­sent­ed itself. Using Font Squir­rel’s web font gen­er­a­tor and Paul Irish’s bul­let­proof syn­tax we were able to use the browsers’ own built-in font sup­port (with @font-face) and achieve our desired result for 95% of our users; the oth­er 5% will see a stan­dard sys­tem font, as per the grace­ful en­hance­ment method.

Glow

Glow is a BBC-devel­oped Javascript library, with a jQuery-like syn­tax but a focus on inter­face wid­gets, which makes it easy to cre­ate ani­ma­tions and UI ele­ments for web­sites. Hav­ing already used it briefly on a project ear­li­er in the year, we decid­ed it would be a good fit for what we want­ed — and some­thing new to learn.

The image carousel on the home­page was made with Glow, as was the slide-down con­tact details on each page, and the light­box over­lay effect for screen­shots on the case study pages.

The only draw­back we found with Glow was a bug in their carousel ren­der­ing in IE8; this meant that we had to force com­pat­i­bil­i­ty view for IE8 to dis­play as IE7, but it’s some­thing we’re hop­ing to change after the next Glow release.

HTML5

Under the bon­net we used some cut­ting-edge code to mark up our con­tent. HTML5 is a very new spec­i­fi­ca­tion and still some­what in a state of flux, but we used it in two dif­fer­ent ways:

First was to pro­vide seman­tic struc­ture to the pages with the new struc­tur­al ele­ments (the def­i­n­i­tions of which are still being dis­cussed, so may not be com­plete­ly cor­rect — HTML5 Doc­tor was an invalu­able resource for this).

Sec­ond, and of more impact to the user, was using ses­sion­Stor­age to take advan­tage of the oppor­tu­ni­ties for stor­ing data in the user’s brows­er. We used this in con­junc­tion with Glow to cre­ate the carousel and slide-down effects; if you have a mod­ern brows­er these are cre­at­ed only once and held in the browser’s stor­age, where­as old­er browsers cre­ate them anew each time you vis­it the page — this leads to the site being some­what snap­pi­er in mod­ern browsers.

Conclusion

Work­ing with brand new and cut­ting edge fea­tures meant spend­ing time chas­ing down false leads and up blind alleys, but was a great way of learn­ing and gave us invalu­able expe­ri­ence 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 com­ing months, but if you spot any prob­lems — or just want to talk more in-depth about the meth­ods and tech­niques we’ve used — don’t hes­i­tate to leave a comment.

3 comments on
“Building Preloaded.com: The Front-end”

  1. Looks very nice Peter. Good design but clean and sim­ple and I love the way you’ve used HTML5 and CSS3 to enhance the site, some­thing that I’m look­ing to use on future projects (although it’s a lit­tle dif­fi­cult as it does have to be the right project).

  2. Thanks Dave. Yeah, work­ing on our own in-house web­site was a good oppor­tu­ni­ty to be more exper­i­men­tal, and also gives us some­thing we can show to clients when we’re explain­ing grace­ful enhance­ment and cross-brows­er differences.

  3. Yeah that’s the most dif­fi­cult thing that I find when try­ing to explain that web­sites don’t have to look iden­ti­cal in old­er browsers. Quite often I do find that it’s eas­i­er just to make them iden­ti­cal but when the right project does come along (or one of my own) then I’ll def­i­nite­ly be look­ing to use more HTML5 and CSS3 :)