As a follow on from “The Dao Continues” in May 2005, I’m going to return to the topic of design, form and function on the web as it is often a topic for lengthy discussion between clients, designers and developers. It was sparked by a question one of our design partners asked me today - “so how come there are so many attractive sites out there that seem to be html based” in response to a discussion about removing hard-coded line breaks from the text because it was causing the layout to look bad at different font sizes.

There is always a heated discussion on this every time it comes up on the forums I participate in and there are always people who sit firmly in one camp or the other, and then the rest of us that float in between. There’s no right or wrong and, at the end of the day, it comes down to the client requirement. However, there are some “best practice” guidelines which should be considered before they are discarded at the design stage (the list below links to the Business Link Best Practice guidelines).

Beautiful websites can be achieved, but these usually trade off other aspects of the site. Find a “beautiful” website and try changing the font size and see what happens. Some will break, some won’t change (they used fixed font sizes, graphics or Flash), and some will scale fluidly although might not look quite so beautiful. I see a lot of very good looking websites that are purely CSS based (which we try to use exclusively), but they are usually fluid in at least 1 direction (usually page length) to accommodate accessibility and usability requirements.

Sites that resort to using graphics or Flash to display content to ensure they are beautiful compromise usability; people with screen readers cannot see or hear the text. It also reduces search engine results as there is no content that they can index either. The end result is a pretty, fixed site but not necessarily a very usable one.

Incidentally, did you know it’s actually UK law that websites should be accessible (i.e. not deliberately exclude anybody)? Nobody really enforces/polices this, but it has wide-reaching effects from the graphic design itself right through to the coding (choices of colour, font sizes and much, much, more). If you can’t sleep, I’d recommend reading about accessibility :) On a serious note, we actually partner with Test Partners (who run accessibility.co.uk) to perform full accessibility testing to ensure we meet the client’s requirements when necessary.

In my view, there is a spectrum of design approaches from fixed layouts at one end to fluid layouts at the other and a good website is one that blends aspects of both to deliver the best experience as possible to the user of the site (ie not the minority that is the designer and/or the client).

Fixed                                                 Fluid
+ - - - - - - - - - - < - - - - - - > - - - - - - - - - - +
Form                                               Function
Marketing                                       Application

Some sites are beautiful at the “default” browser settings. However, it’s not the “default” settings we need to worry about, but those that are outside the bell curve - if we have to consider cross-platform issues to be inclusive for PC (IE/FireFox) and Mac (IE/Safari), why not include other visitors who use these browsers with non-default settings?

I try to occupy a middle-ground on the spectrum, providing a balance between form and function so that sites look good, but work well too. I do not go as far as some accessibility “extremists” who produce completely fluid sites with very few (if any) graphics (I think these sites are dull), and I don’t like the totally fixed sites which make it look like a printed brochure because the designer wanted it that way (I think these sites are missing out on the huge potential of the web).

At the end of the day it comes down to User Experience - understand who is the end user and what do/will they expect from your site and that will help you find the right place on the spectrum.

There are a couple of great books about the web experience which I would recommend for designers and developers (”Don’t Make me Think” - Steve Krug, and “The Art and Science of Web Design” - Jeff Veen). I’d also recommend looking at alistapart.com which has some great articles. I look at these as part of the toolkit for designing and building effective websites today, along with using new technologies such as AJAX as and when appropriate.