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

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.

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.

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.

Here’s a quick round-up of a few links that have grabbed my interest over the past weeks; I’d like to write more about them, but time forbids.

Yahoo’s New Application Platform Is Heavy On Social Features

The work that Yahoo (sorry, I refuse to use the exclamation mark) has been doing on open web standards and platforms recently has been fantastic, and the recently-announced Yahoo Open Strategy looks like a logical next step. I don’t agree with this article’s conclusion that this is Yahoo playing catch-up with Facebook, but otherwise it’s a good introduction.

Windows Toolkit Gives Oomph to Microformats

For a company that so often gives the impression (perhaps not always fairly) that it has no time for open standards, Microsoft’s support for Microformats has been impressive. As well as the hAtom-powered Slices feature in IE8, the recently released Oomph toolkit provides in-browser Microformats detection (similar to Firefox’s Operator) and a set of standard CSS styles. Nice work.

Firefox Themes: The Contention Between Visual Hierarchy and Toolbar Customization

A really interesting look at the theory behind the design of the Firefox 3 toolbar and icon set, as well as a general overview of visual hierarchy and interactive design.

I’m not saying that to boast of my geek credentials, but to introduce something I never imagined I’d find: a connection between the two.

Garrett’s famous diagram introduced the concept of the five Elements which make User Experience on the web:

He later distilled those five elements to: Strategy; Scope; Structure; Skeleton; Surface.

McCloud’s book is an analysis of the visual language of comics, and he lists six elements which he says make up any work in any medium: Idea/Purpose; Form; Idiom; Structure; Craft; Surface.

I think you can see where I’m going with this; although McCloud uses six steps to Garrett’s five, the mapping is still quite straightforward:

1. User Needs / Site Objectives = Idea / Purpose
2. Content Requirements = Form & Idiom
3. Information Architecture = Structure
4. Information Design = Craft
5. Visual Design = Surface

Although I can’t be the first to draw the parallel, I think it’s quite nice. It adds extra validation to both concepts, and helps me to convince my friends and colleagues that reading comics isn’t a sign of arrested development.

I recommend both books very highly, of course.

The revamped UI for WordPress was released in March of this year. It was created by the esteemed Happy Cog Studios, in a process which doesn’t seem to have been much reported on (at least, I can’t find anything) other than in their own portfolio.

For the forthcoming release of 2.7, the in-house team at Automattic (the owners of WordPress) are preparing a slight refresh of the admin theme, which will focus on layout issues raised in user feedback. In the last few weeks they’ve begun releasing details of the plans; you can download copies of the wireframe proposals, for example.

One aspect of their process I find a little strange is asking users for opinions on layout decisions — without providing demos. I mean, user feedback is good; but it’s hard to make an informed decision on usability unless you actually get to try it out. You might think that something is aesthetically pleasing or logically positioned based on visuals alone, but then change your mind completely when it comes to actually interacting with it. This user involvement is doubtless not harmful, but I’m not sure how useful it is either.

That aside, it’s nice to see another big open source project taking user experience seriously, and making the process transparent.

I’ve been slowly introducing IA into my role over the past three years, and so this is a logical step for me to take. I’ll be sad to leave my current agency, but delighted to be moving to somewhere I’ll be able to focus on what I think are the next hot topics on the web: findability & usability.

In a piece of happy serendipity, there’s a big user-centred design project underway at the moment with the redesign of the Drupal community site and, with it being open software, the whole process is being conducted transparently — which means a great opportunity to study and learn. Leisa Reichelt is leading the discovery and planning stages, and blogging every step; you can read the draft Experience Strategy, how Drupal users were defined, and how to get involved. Definitely worth keeping an eye on.

I won’t be leaving web development behind completely; it’s my passion, I wouldn’t be able to. Especially now that we’re entering into very exciting times with the forthcoming release of IE8; not because of any new features, but because we’ll finally have a completely stable, cross-browser platform of CSS2.1 to develop on. The IE team are doing a sterling job of releasing information about the new browser; for example, discussing developer tools and browser-specific CSS prefixes. Let’s hope they don’t fall into the post-launch silence that happened after the release of IE7.

So, interesting times to come. First, however: a holiday. Back later.

The stall is set out on the front page of the documentation, with two key statements:

We think of Chromium as a tabbed window manager or shell for the web rather than a browser application. We avoid putting things into our UI in the same way you would hope that Apple and Microsoft would avoid putting things into the standard window frames of applications on their operating systems.

Chromium should feel lightweight (cognitively and physically) and fast.

Tabs

Moving the tabs above the address bar, and using a lighter shade of blue to match the bar, does well to give the impression that each tab is a separate entity; this is actually one of my favourite features of the user interface. However it’s not without its problems, as the post 10 reasons Firefox won’t be worried about Chrome points out; when multiple tabs are opened, there’s no way to see what they relate to. I can’t see this happening too often, but it’s an issue nonetheless.

Downloads

My second favourite feature of the UI is the downloads bar; unlike the default of Firefox, for example, it’s unobtrusive and well integrated, opening in a shelf along the bottom of the browser instead of a new window over the current tab. A large arrow appears briefly to show you where the downloads bar appears, and a faux-dropdown presents you with actions when you click on it.

Status Bubble

The least effective area of the UI, for me. After taking the decision to remove the status bar, the Chrome team had to come up with a way to display link destinations; their Status Bubble is a good solution in principle, but in practice is too small and too discreet, and the light grey text on a pale blue background is hard to read on a bright screen.

Over-all look and feel

I think they’ve done a good job with the visual design. The stated aim was to make the browser area unobtrusive, and while that’s not been 100% successful, it has been partially achieved; Firefox’s grey chrome looks imposing next to Chrome’s pale equivalent. I like the way the options have been hidden away, removing the menu bar which has been around since the early days of Netscape.

It must be remembered that this is still a pre-release version of the browser, and I’ve no doubt that more changes will be implemented in future versions; even so, it’s obvious that a lot of time and care has been spent on getting the interface right. While a lot of these features are available in current browsers already, the UI team have done a good job in taking the best and combining them with some solid design principles.

Interesting factoids: The original design used the golden ratio, and was inspired by The Designers Republic’s work on WipEout.

Now, if we could get him to design the Drupal user interface (as Veerle Pieters is doing with Expression Engine), that would really be something.

Below are the pick of the results, along with a few that don’t quite work, and some old standbys. I wanted to include images to illustrate this, but in most cases the license didn’t allow.

First, the less successful attempts. I’ve used isometric views before, but this one feels a little too cramped and doesn’t allow any focus on the third-level pages. Likewise, this one (from the same set) only really shows the relative sizes of sections, not how they connect to each other.

The designer of this radial sitemap has had a very strong attempt at creating a new format, but it’s not immediately obvious what all of the symbols represent, and you have to really work to find the order in here. With some tweaking, however, I think this could be made to work.

Of the examples that work, the first two are fairly traditional but work because of careful design; this first one has lovely balance and uses colour well, while this second one uses typography to show hierarchy and a simple band of grey to demonstrate grouping (Update: unfortunately, this image has been removed).

My favourite, for really being different while still making a lot of sense, is this one of a personal home page / portfolio, which incorporates not just pages but feeds, widgets and tags. There’s a lot of information, but it’s very clear; this brings order to the social web. It also reminds me of the tube map.

But for a more physical version of a sitemap, it’s hard to beat this one.

Update: Here’s another interesting one which shows plainly which action each link will perform; sort of a hybrid sitemap and wireframe. Although there are perhaps too many arrows, which confuses the diagram slightly.

This was the case with a client site I’m building using CMS Made Simple at the moment, and the results page suffered from a lack of clarity. Thinking of a way to simplify the page, I remembered the old adage “a picture is worth a thousand words” and hit upon the idea of using Google’s Chart API to replace the figures:

<img src="http://chart.apis.google.com/chart?cht=bhs&chd=t:{$entry->weight}&chs=32x16" alt="Bar chart showing {$entry->weight}%" title="{$entry->weight}%" />

That made the resulting output very easy to understand at a glance:

There’s nothing spectacular or groundbreaking about this technique, I just used it on a site I’m building and thought it would be nice to share. Plus, it gave me the chance to do a little promotion for CMSMS, which I use a lot.