We decided we were kinda unhappy with the whole "cookietrail" thing… because, well, they're not really cookietrails, nor are they breadcrumbs. They are more like signposts… a map of "you are here", rather than "how did I get here" - which is what a cookietrail is really for.

With this in mind, the traditional design of pointing the arrows to the right (towards your current page) makes no sense at all. Really, the arrows should be pointing to the parent page, meaning "I live in here, and my parent page lives in here, and that page lives in here, etc".

We also decided that the "You are here" label that is occasionally used is almost always in the wrong place (at the start). Surely it should be pointing to your current page, where you actually are.

Wow, cookietrails are flawed.

So then I got thinking about making them more useful by combining them with submenus. The idea being that you could jump straight to a sibling page of an ancestor in one click. For example, you're in "Products < Accessories < Gold Necklace", and you can jump to a sibling of the "Accessories" category, such as "Jumpers", in one click. It's like having a submenu for each page's ancestor on every page - awesome!


This is what I came up with (only tested in Webkit) - feel free to play around with the concept, I'd love to see what other people come up with using the same idea. If you've got something to show, post it in the comments below.

A what now? A card sort. It's jargon, and I hate that, so I thought it might be interesting to see one in practice to help explain what we actually do.

In this video (it lasts just over a minute, don't worry) you see me carry out a survey of the content in an existing site. Then I do a first pass at organising the content into logical, related groups. Then I get the team in for them to destroy my work and tell me how to do it better. (See the word 'blog' get written and rubbed out several times!) Finally, I draw out the whole thing for presentation to the client, using my favourite software ever, OmniGraffle Pro.

And the point would be?

By examining the content and functions of a proposed site we can make sure we group it in ways that make sense. For example, you might put the map near the contact form. There can be several ways to group things though, so it's complicated and fun sometimes - should we put hammers and screwdrivers together, and put screws with nails? Or put hammers with nails and screws with screwdrivers? Or both?

The card sort informs the next stage in the web design process, creating a site map, which in turn informs how the navigation might work. Good process is essential. If we were to dive right in to visual design we might come up with a cool looking menu that doesn't actually reflect a logical structure beneath the surface, which can lead to all sorts of usability problems down the line.

And we don't want that.

I decided to record a 'humourous' song in the style of a lame English rapper I christened Dubious Scoop. It was called 'Vuvuzela Song', quite reasonably. You can hear it at www.dubiousscoop.com if you're curious.

Within 36 hours of coming up with the idea I had done the following:

• Song written
• Recorded and mixed
• Props bought
• Dancer procured
• Video shot and edited
• Uploaded to YouTube
• Domain names bought
• Site built
• Twitter account set up
• FaceBook fan page sorted

Oh, and in the mean time I managed to fit a little work in.

What about Google

That's the background to this gloating blog post. The other day a funny thing happened. I googled 'vuvuzela song' (a week after releasing the song) and waddya know? My hastily thrown together website is on page one of Google. Neat.

Of the 1.3m other results I'd say that was pretty good going, no? Let's say I was a record company (I'm not) and was going to throw money at the problem of promoting my site through Google. I'd probably hire one of the many, many, many Search Engine Optimiser (SEO) companies out there to 'get my site higher up Google'. And I'd probably be quite happy with a page one result, yes? I doubt even the so-called 'black hat' companies would promise better.

What's your secret to SEO success, Jamie?

Do nothing. I repeat: do nothing.

Nothing specifically 'SEO' anyway. DO do the following however:

• Create interesting content
• Stick it on the Internets in a standards-compliant format
• Tell some people about it, you know, Twitter, Facebook… the usual

The end. And you'd do all that stuff anyway wouldn't you? It's not SEO, it's using the web in the way you would do anyway. If the web likes what you do (in other words, if it's of some value to some people) then it will succeed.

To any SEO's reading this I do actually have one piece of advice and that is this: tell your clients to improve their content, don't try and force it up the rankings. Just make it relevant, don't try to make it seem relevant.

Google does not care about your tinkering.

This is a great company to be involved with; their products are second to none and they have experienced amazing growth over the past five years and that's set to continue.

They're looking for an experienced web developer with great PHP, MySQL, HTML and CSS skills to work with their existing in-house web designer as well as Message, who continue to handle the heavy lifting.

Get in touch with me if you're interested, and please pass this along to anyone in the developer community who you think might be interested.

You can view the job details at cwjobs.com

Just a few days ago we appointed Anna Debenham as our new front end developer, and it was only a few months ago that Danny joined us as assistant developer… things are growing a-pace!

It's a fantastic team we have here, and everyone's a real pleasure to work with; coming in to work in the mornings just feels great. I'm a very lucky boss.

It was a beautiful day and not a cloud in sight. We all brought something for the picnic and I decided to make cheesecake. It was only when I was leaving the house with it in the morning that I realised it was going to be tricky getting it to the beach in one piece. I strapped it to the back of the bike I was riding (Jamie's fold up bike, thanks J!) and we met at the cafe on Hove lawns at the Peace statue and set off just before 11:00.

Stevie has to win for the most stylish cyclist, she was riding a beautiful vintage bike with a basket on the front for our picnic goodies and had a little pink top hat on. Saying that, Jamie also looked like a classic cyclist with his vintage cycling top, cap and sun glasses, also sporting a vintage bike.

We had a casual cycle along the sea front (avoiding any hills) through the marina and along the bottom of the cliffs to Rottingdean. The sun was beaming and the breeze was cooling. There were some very close calls with a few unsuspecting message members with descending barriers and other hazards but all near misses and we laughed about them as we continued on our seaside journey.

After a relaxed 45 minutes we arrived at Rottingdean and the weather was glorious. Despite the lumps and bumps along the journey the cheesecake arrived safe and sound and in one delicious piece! We all brought some scrummy food to munch on (we had enough to feed the 5,000) along with some cheeky pink champagne provided by Jamie and Stevie… even if most of it went on the picnic rug and was hoovered up by Jamie :-) Waste not want not! Some of us had a little paddle in the sea and a clamber up some rocks before heading back on our cycle trip Hove bound.

We got back in just under 40 minutes, with sore bums, and pink skin but having had a very enjoyable bikenic. Final thought: Bikenic rules!

Both katieprice.co.uk and jordanfanclub.co.uk were officially launched last Wednesday after months of love and care went into Katie's new website refurbishment.

In terms of the technical process I can't divulge too much information… only because I don't have any:) I was working predominantly on the content, including her blogs, photos, and general information on the site. Due to a number of things changing in Katie's life over the last year in particular, there was a lot of content which needed some tweaking.

The styles of the websites have been changed quite dramatically. For Katieprice.co.uk it has been transformed from a reasonably simple but stylish and feminine layout (which complemented Katie's new pictures at the time) to a very colourful and playful style with a cartoon image of Katie herself. It is a lot more fun and has more things to play with visually. It has a new feature where Katie's fans can leave comments and a brand new chat room for members to talk direct to Katie. In addition to that katie's twitter feeds now appear on her website so it allows more interaction between Katie and her fans.

I really enjoyed editing the content and adding bits here and there; not only did it give me a much better idea of how Message's SweetCMS (content management system) works but I was able to get involved with the content strategy itself. It was nice to see the end result after many days of editing blog posts, adding and removing various pages and resizing and uploading images.

One Katie, two websites…

I met Danny, Katie's brother who also deals with her websites and we chatted about the content, discussing what should stay and what should go. I felt this was an important part of my role within the website process as I was able to sit down with a client and go over a list of amendments I had to make and it was super rewarding to be able to say "Yup, no problem!"

Jordan has been transformed into a 1950's pin up girl for her new image. The background is styled like a photo shoot set; it's sexy, classic and exactly what her new site needed to give it a fresh new feel. It has the same added features as Katieprice.co.uk such as the live chat, twitter feed and comments option for members. The layout and design of Jordan's new website really complements her newly refined image which reflects a classic yet sexy, professional look.

The websites have retained all the best assets whilst being playful, stylish and super user friendly (which is obviously the most important part of a website process).

I feel very confident working with SweetCMS and have a much clearer understanding of the website production process.

What a great project to work on as an introduction to such a system. Thanks Katie! :-)

Note to burglars

Our offices are shared with other companies so please don't view this as an invitation to come looking for computer goodies!

The Bicycle Picnic

OK, it was my idea. I had this notion that we were all cyclists and that a gentle ride along the front would be perfect. It slowly dawned on me that actually, I'm the only cyclist! General panic about the cobwebbed, punctured state of people's bikes ensued.

The picnic side of things was always looking popular though, so bike maintenance and/or borrowing got underway. We're ready to roll. And eat.

Dress code

There isn't one. But, since you ask, Melita and my fiance Stevie seem to be cooking something up. Their primary concern seems to be to cycle as slowly as possible, so I'm picturing 17th century wigs, heels and dresses, but I could be wrong.

Me, I'll be looking like a pedalling advertisement for Rapha, from my tweed cap, via a classic merino jersey, through to cycling plus-fours. My bike du jour will be a battered blue racer from 1974 by the one and only Condor in London. Just imagine a schoolboy during the Battle of Britain; that kind of look.

Bike Week

The idea happened to coincide nicely with Bike Week, a series of events designed to promote cycling in general. There are lots of things going on in Brighton, so I'm glad Message are taking part too.

Sorry there's no-one to man the phones, but I dare say you can catch us on Twitter during the day ;-)

I could have stayed in that musty old letterpress print shop all day, such were the treasures. I came away with a bag full of stuff, but my favourite purchase was a postcard, boldly declaring in worn wooden hand-cut font, the words 'Luddites unite!'

We were starting to plan the new office (launched at our 15th anniversary party in February) and I thought this print would make a great ironic cry for a website company in swish, white, modern new offices. Especially if it was mounted in the most extravagant gold rococo frame I could find!

Back in blighty (Lewes, you don't get much more 'blighty' than that!) I had it framed, and I think it looks fantastic:

Fontastic

Another card I picked up declared 'Cooper Black is for Lovers'. What I like about this one is it's really for typography nerds; most people wouldn't even know it was a typeface. So, given that only nerds would appreciate it I decided to mount it really, really badly. Ner nerny ner ner!

Keep It Stupid, Simple

The latest addition to this small (but growing) collection of ironical wall art is a present from the fine folks here at Message. They bought me this letterpress print for my birthday, and I just happened to have a spare gold frame lying around which fitted perfectly. I would really prefer a more fancy, over-the-top frame one day, but the Luddites Unite one set me back well over ?100 so I'll get by for now. Again, I like the mismatching of the sentiment to the setting, a simple message communicated in a complex manner.

Well, it makes me laugh anyway…

Danny is the only bona fide football fan at Message. Well, a Chelsea fan anyway. So he went through all the international teams with Chelsea players and eventually picked Ivory Coast (or Cote d'Ivoire as I prefer to call it for some reason) on the basis that Drogba may be fit enough to play and beat the world single-handed…

Talking of wildly misplaced optimism, I've plumped for England. Melita has chosen Brazil (or Brasil as I prefer to call it for some reason) and boldly predicts a final showdown against the Three Lions. She's like the John Motson of Message.

Joe did a lot of research before making his choice of Spain (he asked Danny) and Lara is just next door with Portugal. Adam remains undeclared at time of writing…

Hedge fund

We've got a second sweepstake running alongside, wherein we predict how far England will get in the competition. Naturally, I've gone for them reaching the final. I know. But I still remember Bobby Moore so I just can't help myself.

Users want to do things, not work out how to do them. If they are made to struggle with complicated navigation systems, or fail to find information where they expect, they'll lose interest and find a site that makes their life easier.

Getting it right from the user's perspective is the starting point for all web development and design work and should continue to be the most important consideration throughout the course of the project.

Make like a user

Look at what's being built from a user-perspective from initial information gathering and user-task identification through wire-framing, prototyping, visual design, to user-testing and refinement.

Keep it simple, stupid!

Steer clients towards clear, usable and accessible design in every case, it's for their own good! There are any number of fancy gubbins which may distract and dazzle but if a spinning, flashing logo or a randomly arranged menu is going to confuse and, ultimately, frustrate the user it shouldn't be there.

Everybody's happy

By making the user your starting point and keeping that focus throughout the design process you reap tangible benefits. Quality user-centred websites look and feel good, instill confidence, enhance reputations, reduce development costs and ultimately increase traffic for client and developer.

My usual MacBook Pro is connected to a 24" Apple monitor. There's always an iPhone sitting there too. And now, with an iPad, it suddenly seemed just a little bit over the top!

The big monitor is for proper work. The laptop screen usually houses iTunes, my calendar and so on. The iPad was on duty as a multi-channel Twitter feed (Twitterific is my weapon of choice) and the iPhone was keeping me in constant touch with my private life…

So far, so retina-burning!

It's not exactly Kennedy with a bank of televisions, but it is a lot of information coming at me… Maybe it's a bit much. But I do love the iPad and it seems a shame to leave it out of the fun. Perhaps I'll get a second monitor for it ;-)

Well, we're pleased to announce that it's gone live and you can now enter the howies 2010 T-Shirt Election!

Geekery

For this application, we wanted to experiment a little with some modern technologies, so we used some of the information I picked up from Jeremy Keith's workshop HTML5 for Web Designers in April. For instance, we used the new DOCTYPE declaration and shortened meta, link and script tags.

We also used the new email input type for forms, which you only really notice if you're using Safari on an Apple touchscreen device, where tapping in an email type input box gives you an email-specific keyboard rather than a bog-standard one. It's a really nice touch that degrades gracefully and is very easy to implement.

This was the first client project we have released that doesn't fully support IE6, too. We built the app using semantic and valid markup so we simply strip away the CSS and Javascript for IE6 users and present them with a fully-functioning page, but without the nice styling and interactivity. Everyone can use this app in one way or another, even if they are using a browser which is 10 years out of date.

These are some of the practices that we are hoping to be using more and more over the coming months for more projects… so watch this space!

We're really excited to be working with howies and hope everyone loves the T-Shirt Election app as much as we do!

During breakfast at Bills in Lewes with friends and family, Bill himself sent over a bottle of Breaky Bottom champagne. I don't drink, but I know people who do so that won't go to waste! Thanks Bill.

When I finally rolled in to the office I was greeted by a cake, replete with candles, home-baked and iced by our intern Lara. Such a generous surprise! And only four candles… clearly going for the full compliment would have been a serious fire hazard ;-)

The folks at Message also got me a very nice letterpress print bearing the message 'Simple is beautiful'. It will sit very nicely upstairs in the meeting room alongside some letterpress prints I got in Nashville last year, so Joe (who found it) obviously knows my taste.

Danny raised the biggest laugh for me by adding a stoopid party hat to my profile picture. The day that picture was taken I was knackered and in a bad mood, so the party hat couldn't look more incongruous!

All in all everyone treated me extremely kindly and I'm very touched to have such great colleagues; thanks gang.

I have always been interested in digital media and thoroughly enjoyed creating websites on Dreamweaver, along with using programs such as Adobe Premier Pro to edit videos etc. I really want to create and work within the media industry as I believe it to be fascinating and highly underestimated as one of the most powerful industries in the world. I like the idea of project management as I am always the first to put my hand up for organising a good party and consider myself an approachable and friendly person.

It was a daunting thought to be starting an internship at a company who had a small team so advanced in technical ability: I was worried I wouldn't be able to keep up. But what they lack in numbers they make up for in personality, and everyone at Message has made me feel very welcome and slowly introduced me to various clients, websites and general routines so I have not once felt like I was given an unmanageable amount of work to do.

My first day consisted of meeting Jamie, Joe, Melita and Danny who were all very welcoming. We went straight into a meeting where the to do list for the week was discussed. This was a great opportunity for me to get to know what Message is all about, it's clients and who did what. Jamie, the director of Message, is really friendly and has a great sense of humour. Melita, project manager, is lovely and always smiling. Lead developer Joe, has an impressive amount of knowledge under his belt on anything web or design orientated. Danny, a web developer, also lovely, kindly talked me through the coffee making routine along with who has what including Joe, who has his own mighty Boosh mug for when it's tea time, otherwise coffee cups and saucers is how we drink our coffee here! :)

My first mission was to edit Katie Price's new website, it was great to get stuck in straight away and it was a perfect way to get to know how the system at Message works. Since then I have had my fingers in many pots working on tasks for various clients and learning new things along the way. So far so good!

Page 4 of 400

If you have 10 years experience in the industry you're applying to, must you really mention that you also worked in McDonalds for 6 months after leaving school?

CVs tend to drone on a bit, especially for those who have many years of experience. The company hiring is going to be looking at a lot of applicant's CVs so try and keep them as short as possible without sacrificing important information.

If you can keep your CV to one or two pages, you are a winner. It doesn't matter if you have 25 years experience, it's still possible and won't get hinder your chances at getting the job.

ERROR: Incompatible file format

This is an easy one. Always send your CV as a .pdf file. Not a .doc, not a .rtf, not a .docx, not a .pages. A .pdf, and always a .pdf. Why? Because every modern computer is capable of opening a PDF and it will look the same to everyone who opens it. That's the whole point. The clue is in the name: Portable Document Format.

To make a PDF is native on a Mac and fairly easily do-able on a PC too. If you don't know how then you probably shouldn't be applying for a position in this field!

Add some character, man!

Have a look at the company hiring and their website and judge what tone you should adopt in your application. Of course your CV will be mainly formal, but there's no need to cram in as much business speak as possible in a covering letter if the company don't talk that way to consumers.

And while we're talking about covering letters: put them in the body of the email, not as an attachment. Otherwise it looks like you've reused an old covering letter.

Is that it?

Pretty much. In our experience if you follow these simple pieces of advice you will be a breath of fresh air to the poor sod that's looking through all of these CVs!

Anyway, we used post-it notes as usual, but did it on the white board, which I don't normally do… It wasn't great, the surface isn't sticky enough and they kept falling off!

Anyway, when we were happy with a particular version I drew lines around the areas to make it clearer to us. The next day, when we needed the white board again, I removed all the post-its, revealing the skeleton of the content. I guess it's Information Architecture without the Information! I thought it looked cool, and intriguing, so I thought I'd share it; see below.

Line height

Line height is the vertical distance between rows of text. We have used a relative measure of line height, based on the font in question.

A line height value of '1' is the same as the distance from the top of the ascenders (e.g. a lower-case 'd') to the bottom of the descenders (e.g. a lower-case 'g'). So setting the line height to '1' or '100%' would result in no space between the lines; the descenders in the first line would touch the ascenders in the line below. The degree of overlap will vary somewhat from font to font, but as a general rule it holds.

If you make the line height value '2' then you would expect to see a space between descenders and ascenders equal in value to the distance from the top of the ascenders to the bottom of the descenders. Got that? :-)

And leading?

In the traditional print world of hand-set type, the typesetter would add strips of lead in between the rows of types in order to increase the vertical space. Hence the name, leading. So line height, leading; same thing. Forgetaboutit.

Results

There's very little real difference in the figures for preferred line heights from one font to another, which should come as no real surprise. For example, Arial is basically a screen-specific version of Helvetica. The variation between x-height (the height of a character minus the descenders/ascenders) and the descenders/ascenders is pretty similar from font to font. So the amount of clear space we like to see around them is unlikely to vary much.

(An exception to this is Courier. It is designed with a smaller relative x-height than the other fonts, but a similar ratio between x-height and descender/ascender. This results in it having more 'line height' built in, and hence less requirement to add more. Thats why the results show readers preferring it with a lower line height value.)

Between Times and Georgia - the two main serif choices - a similar difference occurs. Georgia, with its slightly heavier appearance and greater relative size (perhaps caused by its larger, open face) requires greater additional line height to remain readable. Those who preferred Times were able to tolerate it with lower line height values, where Georgia-lovers added more line height.

Arial and Helvetica are separated by not much more than a cigarette paper (despite an anomolous bump around the 8pt Arial preferences) because of their obvious visual similarities.

Verdana, a bit of an ugly sister in my book, has very standard line height requirements across the readable zone, but markedly larger height required a smaller sizes.

As Lucida's font size results err towards the smaller sizes they show a now predictable preference for ever-so-slightly greater line heights.

As for Trebuchet, it's pretty much in line with the other sans-serif fonts, but larger sizes show a more marked drop in required line-height compared to some others.

Arial: Line Heights per Font Size

• 8pt: no preferences
• 9pt: 1.7
• 10pt: 1.3
• 11pt: 1.3
• 12pt: 1.2
• 13pt: 1.3
• 14pt: 1.3
• 15pt: 1.3
• 16pt: 1.4
• 17pt: 1.5
• 18pt: 1.5
• 19pt: 1.3
• 20pt: 1.3
• 21pt: 1.0
• 22pt: 1.3

Helvetica: Line Heights per Font Size

• 8pt: no preferences
• 9pt: no preferences
• 10pt: 1.2
• 11pt: 1.4
• 12pt: 1.3
• 13pt: 1.3
• 14pt: 1.3
• 15pt: 1.3
• 16pt: 1.3
• 17pt: 1.3
• 18pt: 1.4
• 19pt: 1.5
• 20pt: 1.2
• 21pt: 1.3
• 22pt: 1.3

Lucida: Line Heights per Font Size

• 8pt: 1.4
• 9pt: 1.8
• 10pt: 1.4
• 11pt: 1.4
• 12pt: 1.3
• 13pt: 1.4
• 14pt: 1.3
• 15pt: 1.4
• 16pt: 1.3
• 17pt: 1.2
• 18pt: 1.2
• 19pt: no preferences
• 20pt: no preferences
• 21pt: 1.3
• 22pt: 1.3

Trebuchet: Line Heights per Font Size

• 8pt: no preferences
• 9pt: no preferences
• 10pt: 1.4
• 11pt: 1.4
• 12pt: 1.3
• 13pt: 1.3
• 14pt: 1.3
• 15pt: 1.2
• 16pt: 1.5
• 17pt: 1.3
• 18pt: 1.2
• 19pt: 1.3
• 20pt: 1.2
• 21pt: 1.3
• 22pt: 1.2

Verdana: Line Heights per Font Size

• 8pt: no preferences
• 9pt: 1.5
• 10pt: 1.4
• 11pt: 1.5
• 12pt: 1.3
• 13pt: 1.3
• 14pt: 1.3
• 15pt: 1.3
• 16pt: 1.3
• 17pt: 1.3
• 18pt: 1.3
• 19pt: 1.5
• 20pt: 1.0
• 21pt: 1.6
• 22pt: 1.3

Times: Line Heights per Font Size

• 8pt: no preferences
• 9pt: no preferences
• 10pt: 1.5
• 11pt: 1.1
• 12pt: 1.0
• 13pt: 1.2
• 14pt: 1.3
• 15pt: 1.3
• 16pt: 1.3
• 17pt: 1.2
• 18pt: 1.2
• 19pt: 1.1
• 20pt: 1.0
• 21pt: 1.4
• 22pt: 1.2

Georgia: Line Heights per Font Size

• 8pt: no preferences
• 9pt: no preferences
• 10pt: 1.6
• 11pt: 1.5
• 12pt: 1.4
• 13pt: 1.4
• 14pt: 1.4
• 15pt: 1.4
• 16pt: 1.4
• 17pt: 1.0
• 18pt: 1.4
• 19pt: 1.3
• 20pt: 1.4
• 21pt: 1.2
• 22pt: 1.6

Courier: Line Heights per Font Size

• 8pt: no preferences
• 9pt: 1.0
• 10pt: 1.2
• 11pt: 1.3
• 12pt: 1.2
• 13pt: 1.2
• 14pt: 1.3
• 15pt: 1.2
• 16pt: 1.3
• 17pt: 1.0
• 18pt: 1.3
• 19pt: no preferences
• 20pt: no preferences
• 21pt: no preferences
• 22pt: no preferences

Combined figures

Looking at the combined figures (see above) it paints a very clear picture. At 'readable' sizes (around 12pt to 15pt) a line height value of 1.3 is a strong favourite across all fonts.

There is a clear peak towards greater line-heights at smaller sizes, but at the other end of the scale the data get a bit scrappy to draw too many conclusions from.

The 'readable zone'

The purpose of this entire project was to give web designers some practical, evidence-based help when setting text for on-screen reading. I think it's been possible, when putting all of the above conclusions together, to create a 'readable zone' to act as a rule of thumb guide; something simple that you can remember easily enough for it to be practical and helpful in everyday situations.

The most readable typefaces, by far, are Arial and Verdana. Helvetica and Lucida make a pretty strong showing too.

As for size, 12pt to 15pt is where it's at, set at a line height of around 1.3.

Column widths should be in the 450px to 675px range, the higher end being more suited to Arial.

So here is folks; I proudly present the 'readable zone':

If you have a website where the text settings fall within this 'readable zone' it's probably safe to say your users, on the whole, find it readable.

If you're designing with accessibility high on the agenda (where it should always be, in my opinion) then you probably don't want to stray too far from the readable zone.

Column width

The information a designer is interested in as regards column widths changes depending on the starting point. Say you have specified 14pt Arial for your website text; you now need to know the most readable column width for that type face/font size combination. (It's 450px by the way.)

So, there's not really any such thing as a single 'most readable' column width unless you also know the type face and font size used.

The following data and accompanying graphs show the preferred column widths for each type face and font size.

Arial:

Preferred Column Width per Font Size

• 8pt: no preferences
• 9pt: 600px
• 10pt: no preferences
• 11pt: no preferences
• 12pt: 650px
• 13pt: 500px
• 14pt: 450px
• 15pt: 500px
• 16pt: 600px
• 17pt: 450px
• 18pt: 400px
• 19pt: 400px
• 20pt: 350px
• 21pt: 750px
• 22pt: 250px

Looks like an anomolous lump at the 21pt mark, which can probably be ignored.

Helvetica:

Preferred Column Width per Font Size

• 8pt: no preferences
• 9pt: no preferences
• 10pt: 500px
• 11pt: 750px
• 12pt: 450px
• 13pt: 500px
• 14pt: 650px
• 15pt: 600px
• 16pt: 750px
• 17pt: 600px
• 18pt: 550px
• 19pt: 750px
• 20pt: 400px
• 21pt: 550px
• 22pt: 600px

Lucida:

Preferred Column Width per Font Size

• 8pt: no preferences
• 9pt: 750px
• 10pt: 750px
• 11pt: 600px
• 12pt: 600px
• 13pt: 550px
• 14pt: 600px
• 15pt: 550px
• 16pt: 550px
• 17pt: 600px
• 18pt: 550px
• 19pt: no preferences
• 20pt: no preferences
• 21pt: no preferences
• 22pt: 400px

Trebuchet:

Preferred Column Width per Font Size

• 8pt: no preferences
• 9pt: no preferences
• 10pt: no preferences
• 11pt: no preferences
• 12pt: 600px
• 13pt: 600px
• 14pt: 650px
• 15pt: 600px
• 16pt: no preferences
• 17pt: 400px
• 18pt: 450px
• 19pt: 600px
• 20pt: 450px
• 21pt: 600px
• 22pt: 550px

Verdana:

Preferred Column Width per Font Size

• 8pt: no preferences
• 9pt: no preferences
• 10pt: 550px
• 11pt: 700px
• 12pt: 600px
• 13pt: 600px
• 14pt: 550px
• 15pt: 550px
• 16pt: 550px
• 17pt: 550px
• 18pt: 750px
• 19pt: 400px
• 20pt: no preferences
• 21pt: 600px
• 22pt: 500px

Times:

Preferred Column Width per Font Size

• 8pt: no preferences
• 9pt: no preferences
• 10pt: no preferences
• 11pt: 750px
• 12pt: 450px
• 13pt: 600px
• 14pt: 450px
• 15pt: 600px
• 16pt: 600px
• 17pt: 500px
• 18pt: 500px
• 19pt: 750px
• 20pt: 550px
• 21pt: 550px
• 22pt: 600px

Georgia:

Preferred Column Width per Font Size

• 8pt: no preferences
• 9pt: no preferences
• 10pt: no preferences
• 11pt: 700px
• 12pt: 450px
• 13pt: 550px
• 14pt: 550px
• 15pt: 550px
• 16pt: 600px
• 17pt: 750px
• 18pt: no preferences
• 19pt: 450px
• 20pt: 450px
• 21pt: 600px
• 22pt: no preferences

Courier:

Preferred Column Width per Font Size

• 8pt: no preferences
• 9pt: no preferences
• 10pt: no preferences
• 11pt: no preferences
• 12pt: 600px
• 13pt: no preferences
• 14pt: no preferences
• 15pt: no preferences
• 16pt: no preferences
• 17pt: 550px
• 18pt: 650px
• 19pt: no preferences
• 20pt: no preferences
• 21pt: no preferences
• 22pt: no preferences

(Basically, Courier is not terrifically popular at any column width!)

Summarising the column widths

Reviewing the figures above, when cross-referenced with the 'readable zone' for font sizes, it is possible to draw some overall conclusions regarding column width. As a rule of thumb therefore, you could see the 'readable zone' for column widths as between 450px to 675px, depending on the font and size used.

It certainly feeds nicely into the conversations and techniques regarding flexible layouts; designers can use those figures (the type face-specific figures) to set maximum and minimum column widths beyond which a column of text won't stretch, rather than arbitrary figures based on other design considerations.

Tomorrow, in our final instalment, we talk about line heights and present the easy-to-remember Readable Zone summary.

Font size

Hot on the heels of type face in terms of the impact on readability is font size. A 'readable' font can quickly be rendered illegible at too small or large a size.

The following preferences are of course only relevant to those respondents who chose the particular font in the first place. Someone who found Arial to be most readable doesn't express an opinion about the preferred size for Helvetica, for example.

Arial was most popular around the 14pt to 15pt mark, split fairly evenly between about 44% of respondents, although 14pt shades it slightly. The next largest group couldn't quite decide between 12pt and 13pt, which made up just under 20% of the votes between them. 16pt and 18pt got around 7% between them, with the rest being made up of a smattering of larger sizes, with the enormous 22pt getting a couple of percent of the votes.

Helvetica showed similar results, but with a bias towards sightly smaller sizes. For this font, 14pt was less popular than 12pt and 13pt, which both gained ground to around 15% at the former's expense, which came in nearer 13%. 15pt was therefore a clearer favourite in Helvetica, although with a little over 20% it was almost identical to the result for Arial. There was not much argument to be had for one size over another anywhere from 12pt to 14pt, and there was a similar long tail to Arial's up to 22pt, with a slight peak at 18pt.

Lucida had a much more predictable 'curve' to the preferences, with a peak around 13pt (with over 20% of the votes) which tailed off either side. 11pt was about as small as people wanted to go with this type face, and the tail to larger sizes petered out at around 18pt (although a few people did like it larger) with a slight peak at 17pt. 13pt was therefore the 'winner' but if you used 12pt or 14pt you wouldn't face too much argument.

Trebuchet on the other hand is a very mixed bag, although it does have one of the clearest size preferences of all the type faces surveyed - 13pt, which garners over 30% of the votes! Either side of that size, 12pt and 14pt get around half the number of votes each, with 14pt the more popular. Then there's a 'hole' around 16pt, whereas larger sizes from 18pt to 20pt get a much stronger showing than the other fonts so far.

Verdana shows an almost bizarrely flat response all the way from 10pt (about 5%) to 18pt (just under 10%), with a couple of dips at 15pt and 17pt (to below 5%). If you're looking for a clear favourite I'm afraid our respondents are split evenly between 12pt, 13pt and 16pt, all of which are about the 12% mark.

Times has a similar response curve to Verdana -?flat and wide across the font sizes from 12pt to 20pt. It shows a clearer winner however, with 15pt standing out as the only one breaking the 10% mark with about 14% of the votes.

Georgia demonstrates much clearer trends, thankfully! A prominent peak of preferences for 14pt (just shy of 30%) starts building at 12pt (with about 12%) and trails away sharply after 15pt, which has just under 20% of the votes. A very low peak emerges around the 20pt mark, but this only accounts for a few percentage points.

Courier, the ugly-but-useful duckling, shows 12pt as the massive winner with almost 50% of the voters deeming it most readable. The type face doesn't show as much liking for larger font sizes, with no real trace of preference for sizes above 18pt, in contrast to some of the other type faces.

In summary, I think it's fair to say that your fonts are in the 'readable zone' if they're around 12pt to 15pt.

Tomorrow things get really interesting when we introduce column widths into the mix!

A few words on methodology

We devised an on-screen test which allowed participants to change the type face, font size, line height and column width of a piece of on-screen text, adjusting all four until they found the text to be 'most readable'.

There was no need to account for screen resolution, or even a particular user's anti-aliasing settings. The environment they took the test in was the one they were used to so we felt those system variables would be correctly accounted for across the spectrum of respondents.

This test didn't actually measure their ability to read the passage of text; it relied on the user to tell us which settings they found most readable. You could call this 'perceived readability' as opposed to 'actual readability' as my friend and colleague Luke Scheybeler points out.

Multiple surveys

We ran the survey a total of three times, with slightly differing methodologies.

After the initial survey we realised we needed to randomise the default font to remove what we saw as a probable bias towards Arial.

Then we wondered about the defaults for font size, column width and leading. We set the defaults alternating between extremely high or low values in order to force the user to make a selection for all values.

The first change reduced the preference for Arial by a significant degree, confirming our suspicions about the flaw in our initial survey. The reduction in Arial was taken up by the other sans serif fonts, with Verdana appearing to benefit the most.

The data used for this report are based on all three surveys, with the results of the later ones applied to the earlier ones in order to correct the early flaws.

The Results!

So, which are the most readable column widths, types faces, font sizes and line heights according to our TextPrefs survey?

Type faces

Type face is probably the single most important factor when it comes to readability, although all of the variables this report addresses come into play.

Arial pips Verdana to the post, but only just. The closeness is such that it probably lies within the margin of error, so it should probably be declared a tie! Anecdotally I have often heard people express a liking for Verdana, so I was interested to see that reflected in a more formal survey. Both hover around the 20% mark, garnering 40% between the two Microsoft stalwarts.

Helvetica is next up, beating Lucida by a similarly tight margin, at around 15%, a few points above Trebuchet.

The most popular of the serif fonts on offer was Georgia, with a showing almost as strong as that for Trebuchet at around 11%. This font has increased in popularity in recent years, being used extensively by the 'standards compliance' crowd, including Message!

Times, the classic serif font, does predictably badly, coming in at around two thirds the popularity of the more modern Georgia.

Courier, which we put in almost as a 'control', gleans a negligible percentage point or two.

Recommendations

If you client or your design brief requires a serif font, Georgia is likely to be most readable by the majority of a given audience. For your sans serif requirements, you can flip a coin between Arial and Verdana, or bring your design judgement to bear!

The other fonts, despite not being the most popular in our survey, do of course have their places. Courier, for example, is often used in technical websites to display examples of programming code. And you might decide to use Helvetica in preference to Arial for larger headings if you prefer the slightly more sophisticated cut of the characters. (Please don't email me to explain why you think Arial is nicer!)

(Remember though that Helvetica is not installed by default on Windows computers, so for practical purposes the vast majority of your visitors are likely to see Arial in any case.)

In tomorrow's installment: Font sizes!

Introduction

Ask a web designer how wide columns of text should be. Now ask another. And another.

You will now have three different answers.

Fair enough; all websites don't have to be the same after all. But so often in my experience, all three are probably too wide, and I got tired of arguing with designers about it. I wanted some facts to go on.

So I looked. And looked. Hey Google, what's up? At the time I couldn't find anything on the specific subject of what constitutes a readable column width on-screen. (This situation is slowly being addressed.)

All I wanted to know was what was generally considered to constitute a 'readable' column width for text on screen. But these things are always relative. A readable column width is dependent on font size, typeface, colour, leading and alignment, just for starters.

But those variables have always existed. Now we've got computers, invented specifically to complicate matters! So we also have to consider screen size, resolution, installed fonts, anti-aliasing and distance to screen.

Thankfully, the web has arrived in order to add a further layer of complexity… Let's not forget to think about re-sizeable web layouts, user stylesheets and font size adjustment.

Oh, and the opticians have got a thing or two to say on the subject (although getting any of it published on the web seems to be beyond them!), including subjects like 'comfortable scan angle of the human eye'. This is important as it feeds directly in to the issue of 'distance to screen' mentioned earlier.

It started with column widths

Column widths are well established in the print world. You know why books are that wide? Because over many hundred of years we've figured out a layout that is 'just right' for reading. Like Baby Bear's bed. Not too wide, not too narrow.

Newspapers have different reading requirements, hence the narrow column. The articles tend to be shorter and are even written in a particular fashion. You'll notice that as the space given to a particular story increases - say, for in-depth political coverage - so the column width tends to increase, allowing a more relaxed reading experience. The editorial pages don't use the same dense, justified columns as the news pages. They're probably more like a typical book layout in fact.

So, why is column width so important? If it's too wide you will have trouble tracking back to the word at the start of the next line, interrupting the flow of your reading. You'll always be double-checking and occasionally you might even read the same line twice!

A column that's too narrow causes different problems; your eyes will flick back and forth and quickly become tired. For longer passages of text this is especially important; getting tired for a ten second sprint might be fine, but for a marathon?

So in the end we had written a slightly more complicated question:

"What are the preferred column widths, font sizes, typefaces and line-heights for reading text online."

All this week we present our answer, starting tomorrow with a look our methodology and readable typefaces.

Each day we will post a section of the report, culminating in the conclusions on Friday which outlines an easy-to-remember reference for web designers. This introduces the concept of a 'Readable Zone', within which designers can feel confident that their site users will find the type easy to read.

Many thousands of people took part in the survey, and we are grateful to all those that did. The survey is now closed, but you can still try out the tools that we built at textprefs.com - they're actually pretty useful on their own for designers to visualise different font settings using actual browser renderings.

Even if the report - in which over five thousand people took part - confirms your own hunches regarding readability, TextPrefs will give you the ammunition you need to work effectively with clients, designers and developers.

See you next week :-)

It's not going to change the world, but we're happy about it and wanted to express our support for our city's new representative. Good Luck Caroline!

(On a technical note, Joe points out that we are actually based in the adjoining Hove ward, not the Green Brighton Pavilion ward, but I'm not going to let that stop me!)

The project is to support a specific online marketing campaign, and it should be out there in the next couple of weeks.

howies are a brilliant company, and if you're into mountain biking, skate or surf you probably know them already. Everything they create is driven by a passion for the sport and a desire to make the world a better place. Organic cotton? Check. Published lists of factory suppliers? Check. Crazy off-topic political rants? Check!

We visited howies last week and absolutely loved them. Can't wait to show you what we and they can do together.

Check out howies for yourself.

He breathes easily, cool air pumped silently from his life-support module. He is shielded from the the harsh solar rays by layers of advanced fabrics. His every heartbeat is transmitted back to his home planet, monitoring his vital signs and assessing his well-being thousands of times every second. His suit is bejewelled with myriad twinkling marvels, recording each moment, transmitting statistics, ensuring his safety and comfort and communicating with the spaceman's home planet.

He takes a step down into the crater as a thousand technicians and a billion viewers back home tune in, awestruck at the human adventure unfolding before their very eyes. The Ground Control radio fizzes into life to ask the spaceman what he's feeling at this time, and he replies…

"Aw man, there's this fucking stone in my shoe; this mission sucks!"

Well, Facebook, I happen not to like Salter Cane; I freakin' love them thank you very much! That's why I made the commitment to their Facebook entity of declaring myself a 'fan'. It's also why I'm not a fan of the million other pages people have suggested I might become a fan of.

I guess the move was made because people might, quite reasonably, feel uneasy about being a 'fan' of anything. It's a bit of a childish notion that perhaps we've grown out of. But as Facebook last year removed their over 18's policy I don't think that makes much sense. People are used to the action of 'liking' on Facebook, so they've decided to use that one action to cover a multitude of bases. Hmm. Let's have a look at that shall we?

The end of love

At times like this people tend to say "Ah, it's just semantics, don't worry about it." Just semantics? I find it hard to think of anything more important than semantics! Semantics is, quite literally, the meaning of the words. So if the meaning isn't important then what the hell is the point of talking at all?

In Facebook-world, the word 'like' is becoming a synonym for love, lust after, feel moved by, join, agree with, want-my-friends-to-know-about, not-hate, find funny, find sexually arousing, grosses me out, fancy…

Kill me now

We've all read 1984, right? It's a book about totalitarianism, sure. Fascism = bad. But the primary tool of that super-controlled state is language. It's a book about semantics, the meaning of words. It describes the way in which human expression is controlled by changing the meaning of words and allowing only limited expression where it might benefit the state, not the individual.

I'm not suggesting Facebook is some evil empire in waiting, but it does upset me greatly when any individual is denied the ability to properly express themselves, for whatever reason. It's why I love the bastard English language so much; we've nicked so many words from around the world that our language has become an insanely rich way of expressing ourselves in subtle and beautiful ways. Or blunt and ugly ways too of course, as the situation requires.

And we're now rushing, for the expediencies of the Facebook designers, and those of their ilk, to remove the very subtleties that define our evolved humanity.

OK computer, calm down!

I know language has to change and adapt. I've read Bill Bryson; I know those awful Americanisms are often actually 'proper' English that we've moved on from on this side of the pond. I know the young folks don't want us old folks to know what the dickens they're on about. I know all this, and it's fine. But I just fear a slow chipping away at something rich and expressive, leaving us gawping at each other, dribbling, grunting "me like… me no like…" like a bunch of technologically advanced cavemen.

Thoughtcrime is death

I'll leave it to George Orwell to round off my rant as I could never put it so well:

"Don't you see that the whole aim of Newspeak is to narrow the range of thought?… Has it ever occurred to you, Winston, that by the year 2050, at the very latest, not a single human being will be alive who could understand such a conversation as we are having now?… The whole climate of thought will be different. In fact, there will be no thought, as we understand it now. Orthodoxy means not thinking - not needing to think. Orthodoxy is unconsciousness."

George Orwell, from 1984

PS: Please visit and like our Facebook page :-)

But you can't comment on this post, that would be too easy :-)

Tell your friends

Please include the hashtag #tshirtcomp and tweet this competition or stick it on your Facebook page.

Talking of which, why not visit our Facebook page

My feeling is that the user experience needs to be designed independently from the back end system. If we concern ourselves too much with what the back-end is actually capable of we stand the risk of hobbling the user experience, or at the very least designing something that is not necessarily best for the user. We'll inevitably be influenced by the demands of the system instead.

In real life that stuff inevitably happens of course; pesky details like budget, technical constraints and so on do have a say in proceedings. But if you want something truly brilliant for the users you have to ignore those other influences and simply say "what does the user want?"

At least for starters. Then, if you aim too high you at least have some choices: get a new back end provider; tweak the back end to fit the desired process; or - if you absolutely must - re-design the user experience. By 're-design' I do of course mean 'dumb down' ;-)

Make good choices

So, when choosing a vendor for the back end e-commerce solution the client needs to think very carefully. I think one of the most important questions to ask is just how flexible is the system? It seems to me that the less the back end cares about the front end (and vice-versa) the better. If both front and back are really well designed - in other words, they are open, flexible, standards-compliant etc. - they should play together nicely.

Or just go bespoke

When designing a complete bespoke e-commerce website from the ground up - as we did with Rapha - it's a slightly different story, and a better one, I think. But not all business are able to go that route, and not all want to, which is fair enough. Those that want off-the-shelf e-commerce just need to make sure the processes required to make e-commerce transactions in the back end don't 'poke out' into the front end, distorting an otherwise great user experience.

But a new thought occurred to me the other day; even a hand-made suit uses fabric off the roll.

Introducing the fabric metaphor…

When you buy a bespoke suit you get to say exactly how it should fit; chest, neck, arm length and width… Every detail tailored to your exact body shape. You get to say choose the features, the number of pockets, type of flaps, number and length of vents, number and type of buttons, width of lapels…

You get to choose virtually every aspect of the finished product. Rather obviously, you get to choose the fabric. The tailor will show you any number of different materials of course, in different colours, weights and patterns from any number of different, er, sheep!

But at the end of the day, your bespoke suit is made of fabric that comes off the roll.

We don't make bespoke suits; we make bespoke websites. Our 'fabric roll' is our code-base. The libraries of objects and functions built up over the years; or even full online applications, like our own SweetCMS or Todobedobedo.

When we build a website for our clients they get to choose the exact scope and specification, the functions, features and designs that make their website unique; bespoke. But much of it will still be built using cloth from our existing roll.

OMG, the weaving metaphor?!

As well as being the tailor in this (ever-stretching) metaphor, we are also the weaver. We actually create the very cloth on the roll in the first place. (Picture hard-working Hebridean islanders, weaving away creating rolls of Harris Tweed…)

Like most people, we use a certain amount of 'fabric' that we don't weave ourselves. For example, jQuery.

And finally, to Intellectual Property (IP)

When you buy a suit, do you expect to 'own' the fabric it's made of? You might reasonably expect to be able to do whatever you like with your suit. You might want to let the trousers down, let the waist out, add another arm, fill the pockets with sweetie wrappers, who knows?

But what about other suits made of cloth from the same roll? Can the tailor even make other suits from that cloth? Most suit buyers would certainly say 'yes'. But when it comes to websites, buyers seem to think 'no'. What we tend to say to our clients is that you can make whatever adjustments you wish, let it out, take it in, add more pockets, more buttons, longer vents, whatever you wish. You can even get another tailor to do it for you if you like.

There's only one thing you can't do with your bespoke suit; you can't take the pattern, the fabric, and replicate it to make other suits. (I am trying extremely hard not to introduce a 'Hong Kong Tailor' metaphor at this point.)

Compared to licensing agreements from virtually any other commercial software company this seems pretty tame. After all, you don't expect Microsoft to let you 'replicate' your copy of Word.

So the 'bespoke' part of your suit is actually the design and the way it's been put together; it's not the underlying fabric.

In much the same way, an architect might own the copyright in the design of a building, but they don't own copyright in the bricks. But that's a whole other blog post…

The first day was quite tough for me. I had a lot to take in, especially with the trains running late, which is not the best start to a new job. However I managed to get to Message on time, and then was warmly welcomed, which made it all a lot easier.

I think one of the hardest things I am going to have to get to grips with is the scale of the projects that Message have on their hands. I have come from building small websites for local businesses and one man bands, to now working with a company who develop large sites for some very well known businesses, which is a very exciting, but slightly daunting step forward.

To be frank the rest of my first day was a bit of a blur. I spent most of the day watching Joe work, and trying to keep up with what he was doing, so I was as prepared as possible for the next day when my computer would be set up.

My second day at Message was slightly more eventful, again more train delays (I was beginning to see a pattern emerging), but by lunch time we had a computer for me to work with, and after spending the rest of the day installing software and downloading bits we were ready to go. I spent the last couple of hours of the day trying to familiarize myself with SweetCMS and Sitefy . A random conversation about Marmite with Lynda and Joe inspired my lunch choice for the following two days.

Finally, a direct train from Ore to Brighton which wasn't delayed, so I actually arrived on time on Wednesday, which put me in a good mood and I also had the chance to get stuck in with some real work! My first little project that I had to deal with as an assistant developer, was to decipher a captcha mechanism for the Katie Price website - which after a few small problems I managed to get up and running and in place in reasonable time (with a little help from Joe). On a slightly stranger note, Melita brought in a massive bunch of bananas.


Thursday - another on time train, I was starting to think I may have been wrong about Southern Rail?! I made my first real contribution of the week on the Rapha website, adding a low stock feature to the stock availability page, followed by a couple of tweaks on the blog pages. However, we were all slightly disappointed by the news that Katie Price would not be joining us in the office, but there is always next week I suppose.

I withdraw my earlier statement - I was definitely correct about Southern Rail. The train was 10 minutes late, and everyone at the station then watched in horror as it arrived… then went without stopping. So a very wet 25 minutes later than scheduled, I got on the train to Brighton.

Other than that, my first Friday at Message has been good so far. I have been working on the Oyster Lingerie website, which is starting to take shape and have spent the rest of the morning typing this whilst watching the video that everyone here made at Christmas … very funny!http://message.uk.com/ Hopefully next week will be just as good!

Unfortunately, we're asked to do this all the time! Imagine the same scenario in the lifecycle of a new vehicle design:

"Right, so we're going to make a new vehicle."

"Cool."

"What colour do you think it should be?"

"Eh? What, er, colour?"

"Yes. I was thinking red."

"Right, sure… It's just I was wondering how many, you know - wheels the thing might have. Is it a bus? A lorry? A scooter, what?"

"Hmm. Good point. Maybe orange?"

The 'D' word

You get the picture. Of course, usually we'd at least know the kinda thing the client is after, but there's an awful lot of detail goes into making a successful design. Oops, I let the 'D' word slip out there…

When people hear 'design' they tend to think 'colour, shape, layout, fonts, logos…' But that is just one element of the design process. When we talk of design we mean it to apply to the entirety of the enterprise at hand.

First, we'd design the functionality; what's required in the main menu, what happens when you log in, how the cart stores your details, when the email confirmation gets sent out, how long your session lasts and so on. All of those things, and more, define the thing we're building. Of course, how it looks to the user is important too, so we do that next. Colours, shapes, layout, font - you know the stuff!

That's swiftly followed by how it behaves. This is the 'feel' part of the phrase 'look and feel'. For example, how does that link react when I hover over it?

Building in problems

There is another big problem with presenting visual designs as part of a pitch. The problem is that the client might love it so much that they are then disinclined to change it once you've gone through the process of gathering requirements and actually planning the thing they wanted in the first place. "Oh no, we can't move that to over there - I liked it where it was." We've had that countless times when we've attempted to build something 'designed' by a visual designer rather than a user experience/user interface designer.

It's all about the user

Design should start with the user. What do they want to achieve? How will they get there? What are their capabilities? The worst kind of web designer (or any professional service provider for that matter) is one that simply 'follows the brief' without asking those questions.

The true value a lucky client gets from their excellent provider is in the answers to those questions.

The trouble is that most clients don't know about the stuff that happens under the hood - and why should they? They are not experts in user interface design; usually they're experts in the thing that they do. Even then they may only even have a vague understanding of the very business needs they are attempting to address.

For example, when we say "we designed Rapha.cc's despatch system", we do not mean "we did the layout". We mean we, with the client, defined the very steps that their staff would carry out, from printing an order right through to the goods being collected by Fedex, and even including it's return for exchange items.

Now that's design.

A few days ago I found myself speaking in front of an audience at BrightonSEO, a regular 'meet up and mini-conference' for Search Engine Optimisers. I'd heard they were looking for speakers and I thought, well, let's see if they can stomach what a skeptic has to say about the subject. I'm not a fan.

Holy Trinity of SEO

I based my talk on an article I wrote a couple of years ago called The Holy Trinity of SEO, which can be summarised as "You don't need to specifically 'SEO' your website; just make it relevant, build it right, and link to it". The Holy Trinity are relevant content, standards compliance and inbound links. Or even more succinctly, 'Content, Code, Connections'.

"Out of interest, which of these three do you think is most important?" The general consensus in the room is that inbound links are the most important of the three. I couldn't believe the answer… really? More important than the content the user will see when they actually get to the site? Surely, without relevant content then what the hell is the point of all this?

I was flabberghasted. But perhaps I was being unfair; after all, the subject of the mini-conference was SEO after all, so people perhaps mis-understood my question. Maybe they thought I meant 'what's most important to SEO?'

Still, it serves to demonstrate a clear divide between 'us' (those that build good websites) and 'them' (those who serve solely to improve search engine positioning). Lynda summed it up nicely:

• We are user-centric
• They are client-centric

Call a spade a spade

The reason I asked about semantic HTML was that it is an extremely simple and basic tool of the web developer's trade. If I have a headline on a page I'll call it a headline. If there's a sub-heading (or second level heading) I'll call it a sub heading. Why would I call it anything else?

In reality this means you mark up your HTML using standard tags to describe the enclosed content. 'h1' for level one headings, 'p' for paragraphs, 'ul' for unordered lists and so on. This allows the user agent (e.g. your browser) to correctly understand the meaning of that content. Safari sees an h1 and thinks 'OK, I know what to expect. I'll display it accordingly'.

More importantly, as regards SEO, Google is also a user agent. When Google sees some content wrapped in an h1 tag it thinks 'OK, this is the most senior piece of content on the page; everything that follows is subservient to this content.' And it marks your page accordingly, so you really don't want to get that stuff wrong.

Unfortunately, most of the people who claim to be 'search engine optimisers' don't seem to know this core technique. Which is odd, because everyone seemed to at least pay lip service to the notion of the Three C's outlined above.

What would Jeremy do?

Jeremy Keith explains it very nicely. Google is busy optimising for humans, it attempts to know how to respond to the requests that humans make. SEO's are meanwhile busy optimising for Google's bots. Why not cut out the middle man and optimise content for humans?

The rising tide of 'content' (and I feel I must enclose it in quote marks) on the web is largely driven by the futile desire to beat Google into believing your site is more relevant to searchers than another site. If people were to simply make great content then the job of actually finding it would suddenly get a whole load easier!

Tools of the trade

Another of the talks (about Drupal CMS) highlighted another issue regarding SEO's level of technical understanding. It appeared that Joomla is often the tool of choice when SEO's commission web 'development', despite the very poor adherence to standards it offers.

Don't people realise that clean, lean code is a key component of good search engine friendliness? Google doesn't want to wade through a bunch of code (even compliant code) to find the one and only thing it's interested in - text content.

Perhaps that's why SEO skeptics such as myself do very well in terms of findability - we might not spend our time sweating over keywords to tweak content for the bots, but we do dot the 'i's and cross the 't's when it comes to the web fundamentals. And Google loves that!

Not all days in the office are like this, we were actually hosting a 15th birthday party for the company! We got in booze, music and a bucketload of awesome people to celebrate 14 years of successful business (and one year of playing Marathon over LAN). The party also marked the launch of our brand new website, logo and branding, exciting times!

We used SurveySoGood to hold a survey during the party. Here are some of the interesting findings:

• 27% of attendees wanted to marry our new logo, another 31% liked it a lot!
• 29% of attendees can't remember having more fun than at our party.
• 36% of attendees were planning to head to the Palace Pier afterwards for more booze and a punch up! (sorry, Sussex Police)

Here are some more highlights from the survey:

• "The impressive launch party says it all, AMAZING Jamie + team….good work! Congrats on the new site and re-brand, here's to the future Message!"
• "Funky offices, I'm jealous.. I'm not allowed a Mac."
• "Thank you for a very nice time - it was too too divine!"
• "You guys are so cool logo is more modern and colourful"
• "May I stay here for ever - writing words in this clean white room?"

..what a great crowd!


Also, if you look over to the right, you'll see the whiteboard in the meeting room which was kindly defaced by our guests with lovely comments! We haven't tried to wipe it clean yet because we're scared somebody may have used a Sharpie by mistake.

If you picked up a Message T-Shirt during the party, we'd just love it if you sent us a picture of you wearing it. If you did grab one and don't mind taking a picture, please either email one over or add it to our new Facebook fan page .

Here's to another 15!

You see that in their marketing and know straight away you can work with these people, or their wares. Unless of course their personality doesn't happen to appeal. Maybe the strapline "It doesn't suck" could put off an extremely square sys-admin or two, but the attrition rate is probably pretty low, and the number of people who will warm to them precisely because of their personality is likely to be higher.

Personality is arguably even more important with a small company (like ours, for example). We've all seen those websites from sole-traders trying to make it sound like they're bloody Microsoft! "We at Edward Smith Web Corp pride ourself - oops, selves on our Commerce Grade hosting packages from just $299 per month…" Yeah, right.

Be honest! "Hi, I'm Eddy. I'm not big, but I am clever. Call me about your hosting and IT support, any time."

I try to make sure we let our own personality show through in our web services. For example, with Todobedobedo - our shared to-do lists application - we implore you to get your friends and colleagues to "share the misery" of that great pile of crap you have to wade through! It's not very blue chip, but in reality we're not aiming to get rolled into the next release of Lotus Notes.

404: personality not found

This strategy can be dangerous when your personality blows of course. I know Microsoft are easy to poke fun at… so let's do that right now! I challenge anyone - including Bill Gates - to suggest they'd rather have tea with Steve Balmer than Steve Jobs. When you have a company run by such a blustering, humourless, un-personable er, person then trying to make your consumers feel comfortable with you is always going to be a hard sell. Yet they insist on trying to make out that Windows 7 was 'invented' by some trendy young woman in a cab.

The thing that brought this subject to mind was Joe's idea for the 404: not found page on our new website. It's nicely functional (it includes a couple of useful links and a contact form) but it's also honest about the situation. Someone screwed up, probably us. Where's the goddam page?! So it shows the company boss (that would be me) looking confused and apologetic, and rightly so!

Another example of personality I really like is that of my friend Jeremy Keith who, when asked his name on his company website replies "Inigo Montoya. You killed my father. Prepare to die." It tells you a lot more about the man than any straightforward answer ever could.

Don't be afraid. The Internet's a big place, so let your personality - and your honesty - shine. There are plenty of people out there who will love you for it.

The initial 'card sort' - the first step towards re-organising our content - was completed less than a week ago! Now I'm looking at an almost complete site. A few tweaks here and there and it will be done, thanks to a team working together extremely well.

We had me working on site structure and then visual design, while Joe was preparing the ground with the CMS. Once the visuals were complete (kinda) Mat came and took over Joe's initial CSS. Meanwhile, several of us were working on content (like writing biogs and such like) and we interviewed a friendly client for some video content…

The site was coming together very quickly after just a couple of days (during which time a zillion other things were going on of course - we do have clients you know!) and yet the end point seemed almost as far away. It's off, at that point in a project lifecycle, when the broad brush strokes have been slapped on and everything moves quickly, things seem to slow down. From there on in it's details, details, and there are a ton of those blighters when compared with the broad brush strokes.

That's why Rembrandt and his ilk had studios of students helping out I suppose. (We're looking for an Intern by the way!)

Along the way we realised there were some things not quite working right, so between Mat, Joe and myself we'd dive into on-the-fly design mode. We all like it? Great, its approved. Joe's come up with this widget? Great, let's rock…

It's an exciting, iterative process, and it can get things done very quickly indeed when the team gels nicely. It does require a certain willingness to embrace the fact that no website is perfect. So now it's 'done' the changes, improvements, developments and reworking can really begin!

Above: Yay, OmniGraffle! From card sort to completion in eight days.

They're hard to use

I'm about as computer-literate as you get. I've been using computers for graphic design since 1988, and running the Message website design company since 1995. So I can use a mouse, okay? But even I still come across the odd drop-down menu that I find tricky to use.

There are several reasons for this. Sometimes the 'target' area is too fiddly and small. Other times you're just not expecting the drop-down behaviour and it comes as a surprise. My least favourite reason is when some items in the menu have drop-downs, but others don't… talk about setting doubt in the user's mind!

Now, swap me out and put a 'silver surfer' or a disabled user in my place, and those problems that I can deal with without too much trouble suddenly turn into major - or even insurmountable - hurdles.

They're not scaleable

Even a relatively simple website could have many sub-levels, quickly rendering a drop-down menu system totally unusable. These are possibly the worst kind. You're on the last item in the first level, and a menu pops out to the side. You move across to it, but your mouse slips a single pixel outside the 'hit' area and the whole things suddenly disappears and you have to start over. Again. And again.

They're not accessible

Okay, okay, calm down! Many people claim to have come up with the perfect accessible drop-down menu solution. While there are certainly levels of badness amongst drop-downs I wouldn't say any of them were actually good from an accessibility point of view.
You can make them standards-compliant, sure. But consider the sheer quantity of information in a drop-down menu; say seven menu headings, each with five to ten items. Heaven forbid they should have sub-sections too… you could easily be looking at 50, 60, 70 or more 'menu' items.

What does a screen-reader make of that? Well, you could put in a 'skip navigation' link so the user doesn't have to hear it read out on every single page. But what if they want to actually use the menu? If the thing they want is at the bottom of menu heading number seven they have no choice but to listen to the whole darn list. Not great.

But Mac and Windows use drop downs?

They do, but they're operating systems. They can be totally standardised in appearance, functionality, behaviour, look and feel. They can also build in accessibility features such as keyboard alternatives. Web-based drop-down menus can behave, look, feel (and yes, sometimes smell) different, which means users have to figure each one out individually.

You'll notice, too, that those menus at the top of your OS window are not generally for navigating but for performing actions, which is quite a different thing.

Mis-information architecture

Such systems are often implemented because of a fundamental mis-understanding of information architecture and how to apply it to web projects. Good planning at this early stage can ensure that all your content is easy to find; it doesn't have to be exposed in a drop-down menu.

These menus can also lead site owners to mistakenly put content in places it doesn't belong, in order to 'expose' it to users. Rather than put items in sub-sections that make sense from an IA standpoint, everything is kept at the same level, simply so it will show up in the drop-down.

Worse still are those examples where the menu is not even representative of the actual site structure. This leads to confusion when the user realises they're actually somewhere different to where they were told they were going.

What would the BBC do?

I think it's reasonable to take a lead from those websites that we know have spent large amounts of time and money looking at usability issues. The BBC, Amazon, eBay, Google, Apple, YouTube, Yahoo!, Blogger… I can't think of a single high-profile site that uses drop-down menus*. Not even the usability nightmare that is MySpace. Why do you think that is? It's not because they don't have the technical know-how, that's for sure. I think the reason is that their usability tests tell them not to. Who are we to know better?

When I asked my friend and leading usable web developer Jeremy Keith for two words to describe drop-down menus he replied… well, I can't publish either of the words he used.

*Actually, I just remembered one high-profile site that does; Adobe.com. But at time of writing it's still an awful, flickery experience for the majority of Mac/Safari users. And, by the way, it has over 70 'menu' items.

Clunk-click!

There used to be an obsession with reducing the number of 'clicks' a user had to make to get from A to B. (The fact that they actually wanted to go to 'C' was often overlooked.) These days we understand that two easy clicks are better than one intellectually and physically challenging click.

A drop-down menu system that includes sub-sections (and even sub-sub-sections) might well be able to expose the entirety of your website structure to your users, allowing them to travel from any point to any other point with a single click. But so what, is two clicks really that hard? The answer, for the majority of users, is 'no'.
Remind me; what were they for again?

What were drop-down menus for in the first place? Back in the late 90's we were all creating drop-down menus every chance we got. Mostly this was simply because we could suddenly do it, with the advent of 'dynamic' HTML. The rationale was that it enabled people to see the contents of the whole website from wherever they were. Okay… but what if you have sub-sections? No problem; just stick in some little pop-out sub-menus! Things got ugly very quickly on all but the smallest sites.

A more considered approach

Rather than literally show everything that resides in a section with drop-down menus, a better approach is simply to make those menu headings clear and explanatory. The user knows enough about what to expect within that section without having to see it all up-front.

For example, what would you expect to find in a section called 'Products'? Maybe some products? That's right! A menu heading called 'Solutions' just wouldn't do in that example as it leaves too much up to the user's interpretation. Users don't need to see every detail of the section they're heading into; they just need to be made aware of the kind of content they're going to find there, with no nasty surprises. They're not children! Well, apart from the children, of course.

Dude, where's my section content?

Well, in our world, clicking a menu heading takes you to an index page for the section. (This page can itself contain content of course, but it also does the job of orientating users to their new location.) We then use a sub-menu to list the content within that section. Including further sub-sections. (That's another plus-point; this method is totally scaleable.)
Other navigation aids

To further orientate the user we find that a breadcrumb trail (also known as a cookie trail) is a great way to show the current location within the site structure. Because these reflect the users actual location, they instill confidence in the site, and also offer a convenient way of stepping back through the sections above.
Site Maps are another great help. If you really want to expose your entire site to the user give them a (standards-compliant, accessible) site map - like this one - not a clunky drop-down menu!

The last word

If you want an accessible website that is usable by the widest possible range of people, is expandable, logical, and reflects the best practice of the world's leading web developers then what you don't want is drop-down menus.

FREE MP3 Download you lucky people!

Our cycle-brand client Rapha have continued to build on the re-designed website we built earlier in the year, adding several major areas of functionality to enable their business to continue to grow. A couple of examples are cross-selling and wish-lists, both very powerful e-commerce tools. Under the hood several major developments have included enhancements to accounting and despatch.

We've been working with Brighton software developers SCL to bring a major development to the American Express site. Message have designed the user experience and front end design as well as integrating the website with SCL's UltraPos software. Additionally, the customised content management system (based on our SweetCMS ) allows Amex to create and deploy multiple versions of the website for their own clients. As to what the development is; that's to be kept confidential until it comes to market!

Amongst several smaller projects we designed and built a website for Rouleur Magazine - a publishing concern set up by Rapha to produce the magazine, annuals, photo-books and other cycling-related collectibles.

Developments at Message

In between times we've also taken on some very talented new staff and freelancers, as well as doubling the space we have at our offices. Melita Ogden joined us to run our internal projects, and her move from our client Strutt & Parker to 'service side' has been a great benefit to us.

The offices have been completely refurbished too, and if you've ever visited in the past you wouldn't recognise the place now!

Business needs can be more complicated and are often a mix of competing factors. Your main goal may be to attract new customers, reduce operating costs or increase your brand recognition. But there are often a whole host of other things you will want your website to do; some will be based on business objectives, others may be political or personal.

The trick to good web design is to make sure that all these needs are catered for. The users get the information they want in an easy and accessible fashion, while the website owners achieve their business objectives. However this is easier said than done!

Why test?

For most projects, users aren't involved in the design process. It's usually left to the designers/developers to "champion" the user and look after the user experience. If you've chosen well, your designer will have a good understanding of what works and what doesn't work on the web. They will flag up potential usability problems and suggest solutions that will benefit all parties involved.

These solutions will be based on a number of things, including Internet best practices, the designer's experiences from other projects and also their experience as a web user. However, a large part of the solution will be based on making educated assumptions. For instance:

"We think the user will understand that clicking on the graphic of a house will take them back to the home page, as this has become a fairly common Internet standard"

This might seem like a fairly safe assumption to make, but without actually testing it, you may find that people just don't realise that's what they're supposed to do. If you're lucky you may find this out once the site has gone live, although at that stage it could be costly to change. What's more likely is that you'll never even know this is a problem. People may carry on using your site, but a number of them will get frustrated because they can't find their way back to your home page, and this will affect their perception of your site and ultimately your company and it's services.

Can't see the wood for the trees?

It's very easy for web design teams and web site owners to understand the site so well (because they've all been working on it for months) that they forget many visitors to the site will be first time users and may not understand the ins and outs of the site structure and navigation.

This is why it's a very good idea to test your information architecture, navigation, interaction and design assumptions on real users. Here are just a few of the benefits of running such usability tests:

• It allows you to come up with solutions based on real observations rather than theories and assumptions.
• It can help test arguments, validate assumptions and build consensus between the design team and the site owners.
• It can detect potential problems early on in the design process where they are easier (and cheaper) to fix.
• It will help inform design decisions made throughout the rest of the design process.
• It will make the site easier to use and help prevent any major usability problems making it to the final release.

Usability tests don't have to be big, expensive and complicated affairs. Sure, there are big London agencies that use hi-tech suites with two way mirrors and complicated recording equipment. However, you get pretty much the same results by using proven and inexpensive testing methods.

How does it work?

A usability test is actually quite a simple thing to do. Using prototypes of the site - either on paper or on screen - you set the user some tasks to complete and then note down any problems that arise during the process.

Once the tests are over, the designers will analyse the results and produce a report outlining the issues that arose, their severity and some suggestions for fixes.

A typical test should take no more than one hour per test subject with some time between tests to write up notes, so testing with five people should take about a day.

By using paper prototypes testing can start early and concentrate on important fundamental aspects such as site structure, navigation and core functionality. The test results will inform the development of the site's look and feel which in turn can be tested using a more refined on-screen prototype. This helps validate the findings from the first round of testing and ensures that the visual design enhances the usability.

What does it cost?

By assigning a modest usability testing budget of around 10% of your overall development costs, usability expert Jakob Nielsen believes you can increase a sites usability by around 135%.

Whatever the figures, running even simple user tests is a proven way to reduce the risks associated with launching a new website and greatly increase your site's chance of success. Simple user testing is something worth considering on all but the smallest projects.

500 Simple Web Design Hints, Tips and Techniques

Written by our very own creative director Jamie Freeman, this essential reference for beginner and progressing web designers is available from Amazon

Visit the book microsite for more information…

Usability/Accessibility

Don't Make Me Think!

by Steve Krug and Roger Black

Subtitled 'A Common Sense Approach To Web Usability' this book is an illuminating read and is always kept close at hand - a constant resource during website design phases.

Designing Web Usability

by Jakob Nielsen

Sorry to be so literal, but Jakob Nielsen pretty much wrote the book on the subject of usability. An essential read for anyone who doesn't understand why they should design their sites with the user in mind.

Programming and Technical

DOM Scripting

by Jeremy Keith

When not working at Message our friend & programmer Jeremy has been sharing his pioneering knowledge of web design with JavaScript and the Document Object Model.

MySQL

by Paul DuBois

Published by New Riders, this hefty book is a valuable technical reference.

PHP and MySQL Web Development

by Welling and Thompson

For many people, PHP and MySQL go together like the proverbial horse and carriage. This book focuses on real-world applications, and the work-throughs make excellent jumping-off points for your own projects.

Professional PHP

by Argerich et al

Aimed at those web professionals who need to take PHP to the next level. Over 900 pages of hard-core PHP action!

Project Management

Web Project Management

by Ashley Friedlein

Incredibly helpful in working out the strategies we use for producing web projects small and large.

The Unusually Useful Web Book

by June Cohen

Like many of the books here, this one is just as useful for those on the client side as it is for us in planning, building and maintaining websites. This book is ideal for those who don't like to read too much and is full of hand-on practical tips, examples and reminder lists.

Web Redesign Workflow that Works

by Kelly Goto and Emily cotler

Another of the books which have influenced our web project processes, with contributions from Zeldman, Veen, Nielsen and more.

Business

Cluetrain Manifesto

by Christopher Locke, et al

One of the most exciting books out there for anyone in business, internet-related or otherwise. If you get it, it will either change your whole outlook, or confirm what you suspected. And it's nice to know you're not alone!

Content

Plain English Guide - Oxford Quick Reference

by Martin Cutts

This could go under 'Accessibility' of course. Full of excellent advice like 'Many folk insist that putting a comma before 'and' is bad. Ignore them'. For anyone involved in creating text for web sites this is a must-have reference and an interesting dip-and-read.

The Economist Style Guide

Based on The Economist's house style manual, it's basic advice is 'Think what you want to say, then say it as simply as possible'. Sobering reading for the verbose and an excellent manual for improving the quality of your site's content.

Just like hairstyles, websites date. What was all the rage a couple of years ago is now seen as passé.

Sometimes this is down to design trends - like the 3D buttons and interfaces that were so popular a few years back when graphics tools made it easy to create bevel and emboss styles. Other times it's because the web is maturing and web designers develop a better understanding of what visitors want. For instance, Flash intro pages were all the rage until web designers realised that users didn't like them and wanted to get straight to the content. Flash introductions are the beehive hairdo of the web design world: dated, impractical and utterly pointless.

So if your site is looking a little old, tired and sporting a beehive, it's probably time for a makeover!

Stay ahead of your competition

The web makes it easy for people to find information about your company and services at the click of a button. The down side is that this holds true for your competitors as well.

It's important for your website to make an impact and stay ahead. Surfers are an impatient and fickle lot and usually make up their mind about a site in a few seconds. Your website needs to out-do your competition or you'll face losing valuable clients. Spend a bit of time looking at your competition; analysing competitor's sites is one of the most important parts of the redesign process. How does your website compare to theirs? If they are 'better' than yours it's definitely time for a redesign. If your site is of a similar standard you may think it unecessary to redesign, but it's much better to be leading the pack than following.

A timely redesign could enable you to steal a march on your competitors rather than waiting for them to redesign and then having to play catch-up.

The design does not reflect your brand or the aspirations of your clients

When people visit your site, they see it as a reflection of your company. If your site looks professional and is full of helpful content they will see you as professional and helpful. Likewise, if the site looks amateur and out-of-date they'll make the same assumptions about you. This is why it's so important for your site to reflect the identity and ideals (brand) of your company.

But your site shouldn't just reflect how you wish to be seen, it's important that it also reflects the ideals and aspirations of your clients. People like doing business with people they can relate to, feel they are similar to or who make them feel good about themselves.

Sending a strong clear message about who you are and what you stand for makes clients want to do business with you. If your site is sending the wrong messages, it's time to get a redesign.

A site that reflects where you're heading, not where you've been.

It's a bit of a cliché, but we do live in a fast paced world these days. Markets change, clients get more savvy and businesses evolve to meet new demands. If your site is more than a couple of years old the chances are it's more a reflection of where you've been than where you're heading.

Redesigning your site not only gives you the chance to align it with your current message, it also gives you the opportunity to think about where you're heading and to plan for the future. It allows you to sit down and really work out a strategy, learn about your clients, your competition, and set new business goals and success criteria.

Your website should be a reflection of where you are now and where you are heading, not where you have just been. After all wouldn't you prefer to do business with somebody who is looking to the future rather than being stuck in the past?

You want to update the content yourself, to keep your site fresh

One of the best things about using the internet rather than traditional channels is the ability it gives to respond to market changes, new business opportunities or customer requirements. You don't have to wait until your current brochure run is used up before you make changes; you can simply update your site whenever you want. Well that's the theory at least, but how many websites have you seen where the content looks like it hasn't been changed in months, or even years?

Often this is because the websites have been built so they can only be updated by the person who designed them. This is fine for some small sites but it really doesn't make the most of the benefits of doing business on the web. If your site's content is stale and out-of-date, it's certainly worth having your site redesigned to enable people in your organisation to update content themselves.

Fresh website content is an extremely important factor in encouraging people to revisit your site and can help give you the edge over your competition. Why would anybody come back to your site if it hasn't changed in months?

Attract more visitors

"If you build it, they will come" may have held good for Kevin Costner, (Field of Dreams) but it doesn't cut the mustard where websites are concerned.

Just because something is there doesn't mean people will come and use it. If people have never heard of your site, don't know what's there and don't know how to get there why on earth would you expect them to visit it?

A site redesign can help you attract more visitors in a number of ways. Building search engine 'findability' into a new site is much more effective than trying to increase your findability once a site has been built. Your site also needs to offer visitors useful information that helps them achieve their goals.

If your visitors' goals - and your business objetives - are not the focus of your website, it's time to think about a redesign.

Increase your turnover, get prospects to convert, shoppers to buy

It's amazing to think how many websites still get built without any goals or success criteria being set. These sites will get visually "designed", existing content will be "dropped in" and then 6 months later it'll be dead in the water.

If this is ringing any bells then it's time you thought about having your site redesigned.

While it's relatively simple to build a basic website, it's a much more involved proposition to build a website that actually performs.

The first step is to set some goals and success criteria for your site. What exactly are you trying to achieve and how will you know how when you've achieved it? Who are your users, what do you want them to do and what do they want to do?

With firm goals and an understanding of your visitors you can make informed decisions on how the site should look, work and sound. Does the site design back up your goals? Does the navigation encourage people to click on the section you want them to click on? How about the content - does it have the right tone? Does it encourage people to buy that product, register for that newsletter, read that article?

Make the site easier to use, help clients find what they (and you) want

We've all been there before. You've found a website through a search engine or by following a link on a site. You're after something specific but try as you might you just can't find what you're looking for. It's almost as though the site is conspiring against you and you come away feeling that it's your fault that you couldn't work out were the thing was.

Well here's a news flash: It was not your fault, it's the fault of the website! First and foremost, a website should be easy to use and easy to navigate. If you can't find what you're looking for, if the site navigation frustrates you or makes you feel stupid, the website is not doing it's job.

Site designers and site owners sometimes fail to see these problems because they are so familiar with the site design, content and navigation. Other times it's simply down to a lack of planning and bad design.

Whatever the reason, a site redesign will enable you to listen to your users, find out what helps them (and what frustrates them) and build a site that is easier to use and thus more effective.

Make the content more relevant, communicate with your clients more effectively

You may have noticed a common theme appearing amongst our top reasons for a redesign and now it's now time to hammer this home. Having relevant content is one of the most important things about having a web presence.

Relevant content does not mean just repurposing old brochures, leaflets and adverts. It means providing content that is interesting and useful to your site users while supporting your core goals.

Content needs to be written specifically for the web. Why? Simply because people don't read a website like they read printed material. Most people scan over web pages trying to determine if the page is going to be of any use. Only once they have decided it looks useful will they start to read the page and even then many people just skim read.

This is why web copy has to be short, punchy and to the point. The main concepts need to stand out and not get hidden halfway down the page.

People tend to use the web to get factual information, not marketing blurb. Nobody wants to feel like they are being marketed to (even when they are!), they want to feel that their needs are being understood and met.

Does your site force visitors to wade through pages of marketing fluff? A site redesign would give you the opportunity to re-address how you communicate with your clients and to write copy that is simple, on target and more effective.

A great marketing and PR opportunity

People have short memories and attention spans. They need to keep being reminded about things. There is a common belief that it takes around seven 'touches' (interactions between your brand and a potential customer) before they become a client.

Having a site redesign is a great opportunity to contact your existing customers, potential customers and the press. It gives you an excuse to contact them and let them know what you're doing, what's new and that you're keeping things up-to-date.

Simply put, a site redesign can be a great marketing and PR tool for your business.

However, there is still a great deal of misunderstanding surrounding the issue of web accessibility. This article gives a brief description of web accessibility and shows how having an accessible website can have a positive impact on your business, both in terms of public relations and return on investment.

What exactly is Web Accessibility?

Simply put, web accessibility is about making a site accessible to the largest range of people possible. For the majority of website owners, this is simply good business sense. After all, the more people you have using your site the better.

Making a website accessible involves removing potential barriers to access and one of the best ways of doing this is to build sites to 'web standards'. We've covered the issue of web standards and browser compatibility in more depth elsewhere. To recap, different web browsers were developed based on different sets of rules. This meant a site might work in one browser but not another. These days, browser manufacturers have started settling on a standard set of rules, web standards. By using web standards you can help to ensure your site is accessible by the widest range of browsers available.

Who does this affect?

People often think that web accessibility relates only to people with physical disabilities. Although they are often most affected by poorly designed sites, accessibility is a much wider issue and, at a fundamental level, affects us all.

• Blind, visually impaired and colour blind people are probably the most obvious group of individuals affected by accessibility issues. This group also makes up a very large percentage of web surfers
• People with physical disabilities, such as those with impaired mobility
• People surfing the web using mobile phones and PDA's. These people are possibly the most affluent and technically advanced group of people suffering from web accessibility issues.
• People using old browsers or old computers. Many companies and organisations have standardised on older browser versions and don't use the latest computer equipment.
• People using slow internet connections.
• The 'Silver Surfer'. One of the largest growing markets on the web, with accessibility issues such as diminishing mobility, reduced hand-eye co-ordination and poor vision.
• Young Internet users who may also have poor hand-eye co-ordination, coupled with a low reading age.
• People who don't speak or understand English fluently.

As you can see, problems with access to websites can affect a large proportion of web users. Each individual group may only account for a small percentage of your traffic, but all these percentages start to add up to meaningful numbers. On even a moderately busy site you could be turning busloads of people away every day.

So how does this affect me?

Under UK law it's illegal for a business to discriminate against people with disabilities. This relates to online as well as offline businesses. So if your site is inaccessible, you are potentially breaking the law. (See the Disability Discrimination Act for more information.)

Aside from being a legal requirement for many websites, accessibility makes sound business sense. Building in accessibility from scratch costs a few percent of the overall budget, but the rewards - and returns - can be great.

The positive aspects of having an accessible website are:

• Ability to tap into affluent niche markets like the 'Silver Surfer' or people using PDA's and phones.
• The positive PR that comes from adopting a socially responsible attitude and complying with web best practices.
• Accessible websites are inherently more search engine friendly. After all, Google is the largest "blind user" on the web.
• Increased turnover from more people using your site.

The negative aspects of an inaccessible website are:

• You could be turning away large numbers of potential customers each day without even knowing it.
• When people have a positive experience of a website they generally don't tell people. But if they have a negative experience they are likely to tell everybody!
• Excluding people from your website can generate very negative PR.
• Your website might even find itself open to litigation.

Web accessibility is a broad issue and one that affects both web users and website owners. Making your site accessible shouldn't be seen as a drain on resources but a positive way of being found, seen and used by the greatest number of people, whoever they may be and whatever device they happen to be using.

• You predict a large percentage of disabled site users
• You want to demonstrate a positive attitude to the issue
• To show that your quality systems extend to web best practice
• To satisfy specific funding requirements

So what are these advanced accessibility features? Read on for descriptions of some of the ways Message can take your website beyond basic accessibility.

If you need a little grounding in web design accessibility in general you might want to read our Business Case for Web Accessibility article first.

Access keys

Access keys provide disabled users with a standardised set of navigation aids that are accessed using the keyboard from anywhere on the site. This cuts down on the need to use a mouse which can be difficult for people with reduced motor functions. These are the access keys used on the Message site:

If you are using Windows, press ALT + an access key; for Macintosh users, press Control + an access key.
1: Home
2: Skip Navigation
9: Contact
0: Accessibility Statement

Home Link

This takes the user to the home page of the site. This clear route back allows users to get to the top of the navigation tree without having to negotiate back buttons or menus.

Skip Navigation

Sighted users only look at the menu when they need to. But non-sighted users who use speech readers, will have to listen to the menu being read out on every page they visit. Skip Navigation links, or 'skip nav', allow users to jump over the menu, saving them the tedium of hearing the menu each time. It also allows keyboard (or other device) users to jump over the menu rather than having to tab through each item.

Contact and Accessibility statement

Another couple of access keys aimed at providing keyboard access to common functions, they simply take the user to the site's contact or accessibility statement pages.

Accessibility Statement

It's good practice to create a page which describes the accessibility features of the site, and the site's commitment to accessibility. Press the relevant access key to take a look at Message's accessibility statement.

Site Map

A site map, properly done, is an excellent navigational aid for all users, regardless of physical ability. Many sites consider their main navigation system to be sufficient, but for many users this isn't always the case. The site map itself should be simple, providing links to the entire site. Of course, the site map page itself must be fully accessible.

Acronyms and Abbreviations

Acronyms and abbreviations can be difficult for users who don't understand the terminology, or have cognitive or language problems. The solution is to mark up the HTML in such a way that it explains the meaning of the acronym or abbreviation, for example 'WWW' means 'World Wide Web'.

Wait, there's more!

The items listed above are some of the important measures we can take to make your site even more accessible. The Worldwide Web Consortium have defined the *accessibility guidelines to which most practitioners refer (including the RNIB). They can be found at:
http://www.w3.org/TR/WCAG20

Just how long IS this piece of string?

The lengths to which site owners go to facilitate access are usually balanced with other practical issues such as cost of development or their potential audience.

A real world analogy might be that of different types of building. A restaurant would want to be able to cater for disabled users by putting in wheelchair ramps and accessible toilets, for example. A health clinic would expect to encounter a broader range of disabilities at a greater frequency, so the steps they would expect to take would reflect this.

The most important thing is to demonstrate a positive commitment to accessibility, and to uphold the spirit of any relevant legislation.

*Web Content Accessibility Guidelines (WCAG) 2.0 W3C Recommendation 11 December 2008 succeed WCAG 1.0 which was published as a W3C Recommendation May 1999.

What's the difference between Cc and Bcc?

When you are emailing the same message to a number people at once there are several ways of doing it:

• You can email everyone individually
• You can 'Cc' a group of people
• You can 'Bcc' a group of people

The first option is not much good. It means your computer will take much longer to connect to the server to process the emails on an individual basis, and it will take you longer to address multiple emails.

The second option sends just one copy of your message to the server, along with the list of recipients. 'Cc' stands for 'Carbon Copy', a hangover from paper office days.

The server takes on the work of distributing the messages for you. This frees up your computer but also means that the list of recipients is included with every message sent.

Everyone who gets the message can see all the other addresses it was sent to.

Thirdly, my preferred option! Bcc is just like Cc in all but one important respect: it doesn't include the list with every message sent. 'Bcc' stands for 'Blind Carbon Copy' Recipients can't see all the other addresses the message was sent to, although they will usually see the address you place in the 'to' field. For this reason it can be a good idea to send the email to yourself, while Bcc'ing it to the list.

Why is Cc a problem?

Say someone sends you a 'humorous' email, and they Cc it to 50 of their friends and colleagues. Just 5 of the recipients find it amusing enough to forward to their own list of 50 friends, and just 5 people on their lists do the same. Your email address has just been passed on to 1,250 people! You can see how quickly it gets around - which is why people in our business get so excited about viral marketing!

If one of those 1,250 people is in the business of spamming then you're all in for never-ending junk email, because they will sell your names to any list-mongers in the business, and they don't have 50 friends on their lists - they deal in millions!

Even worse, these days a frightening percentage of PCs are infected with malicious programs that seek out email addresses from the in-box in order to send automated mass emails, many of which themselves contain viruses and 'spyware'.

You, Spam and The Law

What's Spam got to do with you? And how could your email marketing activity break the law?

Firstly, Spam is generally regarded as any email recieved that was not explicitly requested of the sender. (Websters defines it as "unsolicited usually commercial E-mail sent to a large number of addresses" although this isn't a technical definition of spam, which in my opinion is rather weak - but that's another story!)

The last thing you want is to be regarded as a Spammer by your potential clients, so you must be very careful about who you send to, what you send and how you send it.

Secondly, the simple act of storing contacts on your computer (or in a filing cabinet for that matter) puts certain obligations upon you under the Data Protection Act. For example, you must protect the privacy of that data, unless the individual has specifically allowed you to pass it on to third parties. Clearly, passing an individuals' name and email address to an arbitrary email list is hardly in accordance with UK law!

It's unlikely that a personal email Cc'd to freinds will land you in trouble (unless I receive it of course!), but this sort of activity by companies in a marketing scenario could easily land you with complaints.

How to avoid doing it

Your email application will certainly have the ability to send bulk emails using the Bcc method, but unfortunately some of them default to Cc or obscure the BCC option. For example, using Microsoft Outlook you may be presented with an input field for Cc addresses at the top of your mail message. Clicking on the Cc icon next to this field will bring up a dialogue box which actually allows you to specify Bcc addresses, and this should be your usual option.

If your marketing operations call for lots of bulk emailing you should perhaps consider a tool built specifically for this task. (We use MaxBulk for Macintosh, but a quick Google will bring up plenty of choices.)

The new site has been in the planning stages for a long time and Message began working on it in earnest in December 2008. Over the five years since Rapha's inception we have carried out a number of significant developments to the back-end of the website, allowing Rapha to carry out a huge array of business tasks. This is the first major overhaul to the front-end, meaning a better user experience for Rapha's growing customer base.

Localisation

A key feature of the new site is that different geographical areas can now 'localise' content into the language and currency of the region. (Use the flag icon at the top right of the screen to try it out - Japanese is particularly cool!)

The new site replaces the ground-breaking original Rapha website which received wide attention as it was the first e-commerce site to use an Ajax-based shopping cart, developed at Message. The new cart still uses Ajax techniques, but providing a refined and improved user experience.

A decent proposal

You may want to draw up a brief before contacting the web design team. Other people will choose to get the ball rolling with a phone call or email. In those cases your potential suppliers might ask you to answer a set of questions, or fill in a Request For Proposal form, which will provide the information they need to judge the project scope. This usually leads to further discussions where all parties can gain a fuller understanding of the project.

The teams will then be in a position to write an outline description of the site; the functionality, pages, hosting requirements and so on. This is the 'initial proposal', and its purpose is to allow you to assess the competing web teams' understanding of your requirements, judge their technical capabilities and - of course - value for money.

Planning

Once you've chosen your web team they'll get into detailed discussion with you before moving on to in-depth planning (most of which happens in-house as it is often of a technical nature). They may discuss visual design issues at this stage, but only in broad terms; it's important to concentrate on the functionality of the site at this point. The culmination of this phase is the all-important Project Specification.

Project Specification

This is quite simply the document that defines every aspect of the project. It's a working document which all parties refer and add to during the life of the project:

Programmer: 'Hey, does the user get a confirmation email when they cancel an order?'

Project Leader: 'Look in the Project Spec!'

It includes accurate costs, rather than the 'ballpark' estimate from the initial proposal. Having planned the project out in minute detail your web team will have a much better idea of how long all the individual elements will take. One of the most useful parts of the document is the wireframes. The what? Here, let me explain…

Wireframes

I love wireframes. They're an excellent way to describe a website before it's actually built; something like the storyboards film makers use. On the one hand they allow the client to see just what happens when they press a particular button. On the other, they show the web team's programmers exactly what to build. So you don't end up with a website that does something different to what you had in mind. By approving the Wireframes you're saying 'Yes, that's how I want my site to work. Go build it.' No nasty surprises.

Above: an example wireframe from a recent project.

Detailed planning

Sometimes a project is so complex that an additional internal planning stage is required to plan the programming of specific functional elements. It doesn't make for very exciting reading though, so let's move on…

Usability testing 1 - proof of concept

Why test your website? After all, your web team have spent all this time and effort planning it carefully haven't they? Well, it's really about protecting your investment: usability issues discovered after a site is launched can be expensive to fix. Worse still - they may never even be noticed.

This round of testing can be carried out using paper prototypes based on the wireframes that were created earlier. (Which, by the way, makes not only makes the testing cheaper, but makes the Wireframes even more useful!)

The point is to check whether the site can be used, before it's built. It tests users' ability to carry out defined tasks ('can they buy a product?' not: 'do they like the colour?') and any problems found are fixed before moving to next stage.

See our article about Usability Testing for more information.

Visual design

Notice how your eager web designer hasn't actually 'designed' anything yet? That's because web design is not simply about how it looks, but how it works. (I know, I'm starting to sound like a broken record here!)

You've discussed the look and feel of the site and you may even have provided a corporate style guide for your designers. They will generally follow several design avenues in-house before refining their ideas for presentation. The chosen design is then worked up and signed-off once you're happy with it.

Site templates

Now they know how the site will look your web team can create the templates that will set the style for the entire site. These should be tested for web standards compliance and accessibility (although most web designers skip this important stage) and checked using the specified web browsers.

Usability testing 2 - proof of design

For this round of testing HTML mock-ups of the site will be used, based on the actual site design. This checks that any problems found in the first test have been rectified, as well as checking that the visual design hasn't 'broken' the concept: does that flashing pink 'buy now' button confuse people?

All this time you will have been beavering away getting all the content together, so that your web team have the raw materials they need to build the site.

Site build

Look Ma, I'm actually building the website!

This is where your team get down to the nuts and bolts of building the website; programming pages, functional elements (a shopping cart or user registration for example), installing and setting up databases, turning the content you provided (eg Word files) into web content (eg HTML), optimising graphics and so on.

During this stage is the exciting point where the functionality (how it works) and display (how it looks) come together, and suddenly: you've got a website!

At this stage the site will usually be hosted on a development server where the public can't get their hands on it; your team have got to test it first…

Acceptance testing

Once your web team are happy with the site you'll be asked to give it a thorough going over, using a checklist to guide you through all the functional elements. This process has to cover all aspects, from how it looks ('are they the correct pictures?') to how it works ('can I buy that product in extra large?').

Along with the planning at the start of the project, testing at the end is arguably the most important part of the whole shooting match, and you should expect your web team to urge you to test the site properly before it's let loose on the web.

Launch

The site is now live, but that's not all. While the content is likely to be in your hands (through a Content Management System, for example), there are potentially two ongoing phases to consider.

The first is maintenance; keeping the 'machine' in working order and fixing any problems that arise over time. The second is development, adding new functionality and changing the look and feel of the site.

Summary

Here's a list of all the main phases for a biggish web project:

• Initial proposal
• Initial planning
• Project specification, wireframes
• Detailed planning
• Usability testing 1 - proof of concept
• Visual design
• Site templates
• Usability testing 2 - proof of design
• Site build
• Functional testing
• Launch
• Well earned break!

Of course, not every website requires all of these phases; some are optional, and can be included or excluded as budget allows. And it's certainly true that not all web teams follow these procedures, but those that do will be more likely to get your concept to completion with fewer hiccups along the way.

The Bradford-based farmer run organisation, established in 1950 to operate a central marketing system for UK fleece wool, now has almost 60,000 registered producers. With a substantial corporate web site already serving its membership, the BMWB wanted a much smaller site that would be easier to use for both retailers and consumers.

Although the new site has taken its visual design cue from some of their printed literature, the British Wool Marketing Board was also keen to take advantage of the interactivity and accessibility that good web design can provide. Furthermore, because the site has been built using our content management system, SweetCMS, it makes updating very easy.

With sections focussing on end product usage, users can explore the many benefits of buying products made with British Wool. Information not immediately apparent to the average consumer is easy to find, including facts such as wool's inherent 'smartness' for use in carpets: sound proofing; great comfort; natural flame resistance and high durability qualities. It may seem like stating the obvious to say it's ecologically friendly too!

We are very pleased that the British Wool Marketing Board chose us to develop a site that shows off this remarkable natural British resource and allowed us to create something a little different from the average corporate website.

The Look-Book, Fashion and Etc sections of aboutwool.com will be expanded upon over the next few months.

Alt text describes an image for someone* who can't see it.

*Or some thing such as Google.

The end.

Further improved security with passwords encoded in md5; a backup module; user comments; friendly URLs; some great new e-commerce features.

For more information on these features and others visit our SweetCMS 2 site.

Talk to us about upgrading your website, contact Message.

For informatoin about the PAS in simple terms and to get an overview of the accessibility requirements facing website owners read on.

Who is it for?

Firstly, PAS 78 is aimed at people who buy websites, rather than website developers like Message. "Why not just create a best practice guide for web developers?" I hear you ask. Well, I suppose the thinking goes that if those purchasing the sites are better informed as to their legal (and moral) obligations regarding accessibility, then the web developers will have no option but to buck their ideas up and deliver what will increasingly be asked of them.

(Luckily for us we've been keen practising advocates of accessibility in web design for many years.)

Disability Discrimination Act 1995 (DDA)

As set out in the DDA there is a legal duty on service providers to make reasonable adjustments to their service provision in order to allow disabled people to use them. That includes websites, so if your site could be deemed to be delivering a 'service' then you need to take note.

The DDA really forms the basis for much of the document, but the authors sensibly point out that there's no such thing as a specification for a fully accessible website to satisfy the requirements of the DDA; I'm afraid it's much more subtle than that! For starters, there are those two words reasonable adjustments.

W3C Web Standards

Another central pillar to PAS 78 is reference to the W3C (Worldwide Web Consortium). This international body sets out standards for web developers and software vendors to follow to ensure interoperability between systems. (Read our article Client guide to web standards for more information.)

Specifically, the W3C publishes Web Content Accessibility Guidelines (WCAG), to which PAS 78 refers extensively.

It all sounds a bit technical

So the DDA and WCAG form the cornerstones of 'good practice', but you don't need to know all the details they set out. However, your web developer does need to know the details, and you need to know enough so that you can make sure they're building you the site you require.

After all, with no clear case law on the subject, the website commissioner/owner is likely to be the one held responsible for any failings in the legal standing of the website.

Next steps

If you're commissioning a website you should get hold of a copy of PAS 78 from the British Standards Institute and familiarise yourself with the key points. You might not become an expert, but you will be better able to talk meaningfully with your web team, and if they're good you can trust them to take care of the details. If you are a regular web commissioner then you should make yourself conversant with the detail of the specification. You will then be in a position to lead the conversation with your web team, setting the standards you expect of them, rather than the other way around.

Creating an accessible website should be the responsibility of everyone involved, and if you can engender a team ethos that embraces the issue then PAS 78 can be a helpful reference document rather than a stick to beat people with.

Background

In the bad old days, web browser manufacturers tried to grab market share by introducing features that would only work on their browser. If you wanted blinking text you had to use Netscape. Of course, in those days blinking text was seen as pretty whizzy! Website developers had a number of unsatisfactory choices: to build a site that worked in only one browser, to build multiple versions of a site, or to build very simple - but dull - sites that didn't use any proprietary code.

As the web developed things began to change; browser manufacturers started to adopt a standard set of codes and procedures which allowed web developers to build sites that would work across different browsers. Old habits die hard though, and most web developers are still building sites the old way, despite the proliferation of standards compliant browsers.

Benefits of Web Standards

Why should you, as a website owner, care about web standards? Isn't one sort of code just as good as another? Absolutely not: although you don't need to know the technical ins and outs - that's the job of your web developers - standards compliant sites have a host of built-in benefits that you'll be really interested in.

Fast-loading pages that cost you less

Pages built using web standards such as CSS (Cascading Style Sheets) usually have much smaller file sizes, as the code tends to be simpler. Your user's browser not only has to download less data, it has to do less work translating the page.

It's not only the user who benefits from smaller file sizes. For popular sites, web hosts often charge for the amount of bandwidth used - the amount of data you transfer - so smaller files mean lower costs. Some websites have switched to CSS based layout for the bandwidth savings alone.

Simpler pages that cost you less

Pages built to web standards tend to have simpler code, so they can be easier to build and maintain. The power of CSS lies in the way they separate presentation from content. This means that site-wide design changes only need to be made in one place - the style sheet - rather than every page of the site. This separation also makes it easier to have different people working on different aspects of the site at the same time. Reduced development times mean reduced cost which can only be good news for site owners.

Supplier independence

Sites are often so poorly coded that only the original developer understands them, and if they were to go out of business you'd need to hand the site over to another developer. It can be extremely difficult to decipher the hacks and workarounds used by other developers; it's often quicker to rewrite the site from scratch.

Having a standards compliant site is like a kite mark for code. It shows it was written to a specification that any competent web designer can understand. This frees you from supplier dependency and from spiralling costs where a change of developer is forced on you.

Pages that get found

Pages built using web standards - and in particular those using CSS for layout - are inherently more attractive to search engines. Search engines work by looking at the code of a page and extracting the content. If the code is clean, simple and bug free, it's easy for the search engines to view the content and rank your site.

Search engines have problems with pages containing superfluous or non-standard code. As most web designers still don't use web standards, many sites fail to achieve decent rankings. A whole specialism - search engine optimisation - has sprung-up to help rewrite badly coded pages but this wouldn't be necessary if the site was built properly in the first place.

Pages that are Accessible

Alternative web browsing devices are becoming more common and include things like mobile phones and PDAs (Personal Digital Assistants). In addition many disabled people use assistive technology such as screen readers (used by the visually impaired). One of the aims of web standards is to allow sites to be accessed regardless of the device being used.

It makes sense to have a website that can be used by as many people as possible but making your site accessible to users with disabilities is a legal responsibility for anyone providing a 'service' online. According to the Disability Discrimination Act, since 1999 "service providers have had to consider making reasonable adjustments to the way they deliver their services so that disabled people can use them." Having a web standards compliant site is one of the best ways of meeting this legal requirement.

Standards are the future of the web

Using web standards is the only way to ensure that your site will be compatible with future browser versions. A broken site could cost you dearly in terms of lost sales, damaged reputation and maintenance. A standards compliant site will work across existing and future browsers.

Remember, good search engine results need just three things:

• Relevant text content
• Clean, standards-compliant code
• In-bound links

It's so simple it's a wonder everyone doesn't do it!

Of course, I'd been coming to that realisation for some time, but seeing it that clearly is really helpful; it illustrates that most of the verbiage dedicated to the subject of search engine optimisation is, frankly, just so much hot air.

Those three in more detail

'Relevant text content' is a no brainer. Of course it's text content, as Google can't understand graphical images. Yet. Of course it's relevant or it would be, er, irrelevant and that wouldn't help anyone. (Actually, relevant really means 'relevant to those pages on a similar subject which link to it' as well as 'relevant to the searcher'.)

'Clean, standards-compliant code' is more than just me having a dig at all those two-bit web designers who can't be arsed to do it properly! Clean means lacking extraneous gumph that Google would have to sift through before getting to the content; in other words, a good code-to-content ratio, which Google likes. Making your site standards compliant means that search engines are not going to trip over some nasty piece of code they don't understand. That's the beauty of standards; everyone understands them.

'In-bound links' are incredibly important. Although, much like a three legged stool, SEO would fall over if any one of the three was missing. These are simply links to your page from an external site. What they provide first and foremost is a way for Google and the like to actually find your site in the first place. The worldwide web is so named for a reason; everything is - or should be - linked together, kinda like a web, see? Secondly, they provide an assurance that the content is good; all these sites link to it, it must be good!

An illustration

A couple of years ago I bought a new Martin acoustic guitar and wrote about it on my blog. (Did you see what I just did there? I improved my Google ranking for that page by creating a new in-bound link. Tricky, huh?)

A few short weeks later I happened to notice that a Google search on 'Martin acoustic' or 'Martin acoustic guitar' brought my page up second only to Martin themselves. Given that thousands of guitar shops around the world sell these guitars I thought that was pretty cool. Of course, the page has all but disappeared now, but for a few months it was riding high. If I cared I probably could have kept it up there but it's just my blog…

The point is that I did nothing specific to get the page ranked high on Google. I simply wrote a reasonable length article on a given subject, put it in a website that was coded to web standards, and that happened to have a few in-bound links.

The three 'C's

In fact, while I'm busy trying to coin a catchphrase, I've come up with another one. This time, I'm going from 50 words right down to three; I hereby declare the Three C's of SEO:

• Content
• Code
• Connections

Thank you, I'm here all week. Ok, the last one's a little tenuous but 'links' doesn't begin with 'c'.

Ignore the hot air merchants

"We can guarantee you a number one placing in Google!" screams the headline. The small print should read "so long as the search term is 'aardvark sprocket merchant' or something else equally useless and over-specific".

If you do the three simple things your site will naturally do well. That doesn't mean you can't 'optimise' it of course, and you should. But it's not voodoo, it's not magic, and it's not expensive. It is, for the most part, simply good practice and common sense.

When you view a website for the first time your browser downloads all the various page elements (images, text, style sheets etc.) to your desktop computer's hard drive. This is your local 'cached copy' of the web page. The next time you visit the site your browser first looks in the cache and displays the local copy rather than going to the bother of downloading it all again.

This makes web browsing much quicker; for example, if you press your 'back' button to a page you just visited it will appear almost instantly, without having to download all those images again.

That's the theory anyway, and it's generally a good system for most users. But we - and our clients - are not 'most users'. We're special!

Why is it a problem?

Okay, so a site you've visited previously can load super-fast because it is, in effect, sitting on your own computer. But what if the site has changed since you last visited? You could be looking at something that's out of date. Your browser has a system of checking for page elements that have been updated, but in practice this doesn't always work - especially in a fast-moving website development situation.

During website development and maintenance things can be changing all the time; new pictures, changed version of logos, text updates. We make the change, upload it to the web server and ask the client to check it's all as they requested.

Thanks to caching it's usually about this time we'll get a phone call asking why the change hasn't been made. The client has visited the site to check the work and can't see any difference because what they are actually viewing is their local copy of the page, cached before the changes were implemented.

Note: Pages that are served dynamically (for example using ASP or PHP) suffer less from this issue as the text content tends to be drawn from a database, requiring a new call to the server every time the page is requested. Items such as graphics or Flash elements tend not to be stored in the database and will be cached. In fact, it's changes to images that most commonly cause a problem.

How to get around browser caching

Generally speaking, caching is a 'good thing' as it will speed up your day-to-day browsing experience. But like I said, you and we are special, and when we're working on developing a website it's a good idea to know how to get around your browser's cache.

The first thing to do when you want to ensure you see the latest version of your page is to press the browser's 'Refresh' (or 'Reload') button while holding down the shift key. This is known as 'forced-refresh' and makes your browser bypass the local cache and retrieve all the page elements again from the web server. In most cases this will be sufficient, but if you are experiencing lots of caching problems you can go further.

"Clear your cache"

I doubt we have a single client who hasn't heard us say this at some time or other! Clearing your cache involves deleting those pesky local copies of all the web pages you've visited recently.

The exact method varies from browser to browser, but in Internet Explorer 5.5 for Windows you do it like this:

1. Click on Tools in the menu bar and select Internet Options from the bottom of the menu.
2. In the middle of this screen you'll see Temporary Internet files.
3. Click Delete Files… and press OK.

Deleting Cookies.

One particular type of locally stored information that doesn't get deleted in this way (even if you selected the 'Delete all offline content' option in the previous dialogue box) is Cookies. If your site uses cookies (for example, to check you are logged in to a private area) you may need to delete them for testing purposes. This is rather more complicated:

1. As before, go to Tools > Internet Options in the menu bar and look for Temporary Internet files.
2. Click the Settings button followed by the View Files… button. You are now looking at your browser cache. (Cookies will look like a regular text file and will have names like 'fred@www.bob.com', making it pretty straightforward to choose the ones you want to delete.)
3. Right-click the cookie you want to get rid of and select Delete from the pop-up menu.

You may be amazed to see how many cookies are in your cache - Where did they all come from? What do they do? Are they safe? Is Big Brother watching you? Well that's a whole other article…

Disable browser caching

If you are experiencing continued caching problems during site development it might be a good idea to disable your browser's cache although this will significantly slow down your general web browsing experience. Not all browsers will allow you to do this however, including Internet Explorer 5.5 for Windows, but with some the cache size can be set to 0Mb.

And that's not all… Server Caching

Once you've removed the cached copy of the site from your hard drive it stands to reason that next time you visit the site you will be looking at the latest version fresh from the internet, right? Well, sort of…

So far we've only talked about your browser's cache, but your internet service provider is probably caching too, as well as your company servers and myriad other points along the way from the website to your browser.

With the exception of your company servers (which could be re-configured not to cache certain sites) all of this is beyond your - and our - control.

Conclusion

Browser caching is by far the most common cause of confusion during the development of a website as there is sometimes a disparity between what is on the web server and what the client can see. Understanding the problem is half the battle, and if you can remember the tips for bypassing the browser cache then it should become nothing more than a minor irritant.

Remember:

• Force-refresh the page: Shift + Refresh
• Clear your cache: Tools > Internet Options > Temporary Internet Files > Delete Files

Introduction

When a print designer gives their page a 5mm border, selects Pantone colour 451 and the font Gill Sans 15 point, they can be sure their audience will see their design exactly as they planned it. Print designers and printers have a great deal of control over their medium. In contrast, the web designer has no absolute control and designing for the web is consequently very different. There are a wide range of external factors that will effect how a web page will look to the user.

These include:

• The user's computer system
• The preferences the user has set
• How the browser decides to interpret the page
• Whether the browser supports the code used on the page
• Bugs in the web browser

The user's computer system

The type of hardware and software you use on your computer will effect how a web page is displayed. For a start it depends on the operating system you use. PC's and Macs use a different dots-per-inch (dpi) measurement which means text usually displays larger on a PC. There are other text display differences - on Macs text is 'antialiased' which gives a smooth appearance whereas only the most recent PC operating system does this.

PC and Mac also use different screen brightnesses (gamma), and this means that designs will look lighter on a Mac.

Different operating systems use different sets of 'widgets' - things like buttons and text boxes on forms, and scroll bars on pages - so these elements will also look different depending on the platform you use.

A button as displayed in IE5 on Win95

The same button using Safari on Mac OS X

Print designers can use any font they wish - web designers can't. A web page can only use a font if it's installed on your system, if it isn't, the page will display your system's default font. For this reason, designers usually try to restrict themselves to the most common system fonts like Verdana and Arial. Any piece of text that must display in an uncommon or custom font - for example a strapline - must be embedded as a graphic.

Colour can also be an issue. Different monitors have different colour depths (the number of colours they can display), and simple factors such as the ambient light where a person's monitor is located can have an enormous affect on the perceived colour. Web designers only have around 216 colours they know will be available across all modern computers, so if your corporate colours are not amongst them, they may not always be accurately represented.

As you can see, the setup of your computer can have a big effect on how the size, brightness and colours of a design are displayed. The way certain page elements display depends on your operating system, and how text is rendered also depends on which fonts you have installed, as well as on the type of system you use.

User Preferences

It isn't only your computer system that effects how a web page displays; the way you have set your preferences will also influence what you see.

The screen resolution you choose will dictate how big everything looks and how much will fit on a page, with the most common screen resolution settings being 800×600 and 1024×768.

The learning in sussex site viewed at a resolution of 1024×678

The same site viewed at 800×600. Notice that everything looks bigger and there is less room for the text.

A web designer may want to make sure that the text size on a page displays the same on different browsers but it's not possible to do this in any absolute way. Aside from the differences in text size created by screen resolution, text size can also be changed by the user. In any case, it's not desirable to fix the text size - if users find your text too small to read, you don't want to stop then from resizing it.

Most browsers give the user the ability to set a custom user style. This allows users to override how a website looks and gives them the ability to change things like background colour, text colour etc. This is most commonly used by people with visual disorders such as colour blindness.

Because it's difficult and sometimes impossible to tell what preferences a user has set on their computer, the way a page displays is often down to the users settings.

The browser interpreting how things should look

As if there weren't enough things conspiring to affect the web designer's masterpiece, the web browser also wants to get in on the act.

Each web browser looks at the code used and tries to interpret how the page should be displayed. Some browsers will display the page exactly as the designer intended and others won't.

Some browsers will add default styles to elements. To stop this happening the designer must turn these default styles off. For example, If you use an <abbr> tag people using Netscape 6+ will see a dotted line appear under the abbreviation but Internet Explorer (IE) users will not.

Internet Explorer does not style the tag

Safari on Mac OS X chooses to make tags Italic

While Netscape 6+ underlines tags

Most modern browsers are very good at following the rules a designer has set but there are always some exceptions. For example, if you are viewing this page using IE5 or 6 you will see a solid border around the sections on this page. For people using most other modern browsers you will see a nice dotted line. This is because Internet Explorer has 'chosen' not to display dotted lines less that 2 pixels wide, even though I've told it to show them in my style rules.

As you can see, web browsers do not render the design of a page pixel by pixel. What they do is look at the page and render it based on the rules that have been set by the designer and the defaults that have been set by the browser programmers. This is one reason why the same page can look different on different browsers.

The use of unsupported or non-standard code

During the early years of the internet, browser manufactures stuffed their browsers with features that weren't supported by other web browsers in a race to win market share.

Over time some of these features (such as image support) have become standard parts of HTML, while others (such as the marquee and blink tags) only ever worked on specific browsers.

For example, many web designers use HTML tables to control page layout. To allow people to make a table stretch the height of a page, IE introduced the 'height' attribute for a table tag. This is an attribute that was used very often. Unfortunately it wasn't a standard tag so Netscape and other browsers didn't support it.

The use of such non-standard code led to pages that only worked on one web browser, and even now you will see pages that state they only work in a certain browser.

Thankfully most modern browsers have decided to use a standard set of code. However, many web designers are still using non-standard tags which can cause display problems across a wide variety of browsers. By sticking to web-standard coding, web designers can help reduce these problems.

Bug's in the web browser

Finally, one of the biggest reasons for display differences is simply because browsers are buggy! One would expect big software companies to fully check and bug test before release but in reality this doesn't happen. It's a fast-paced industry and browsers are often rushed out before they're fully tested.

Some bugs are spotted and fixed quickly, but many seem to remain version after version. This was a real problem in the old version 4 browsers when new 'fixes' were being brought out on almost a weekly basis. This practice is still common today.

What a user thinks is a bug in the page is often more likely to be a bug in the browser. It used to be common practice for web designers to use workarounds (or 'hacks' as they are known) to get around these bugs. But as this would often cause problems in newer browsers, this practice has lost favour. If your browser is playing up it's worth downloading the latest version and seeing if that helps - after all, most browsers are free and easy to install.

These days the most common approach for web designers is to build a site with one or two core browsers in mind, ones that are known to be relatively bug free and use current web standards. If you design using this approach you help ensure that the site displays as well as possible in current and future browsers, while making sure that the content (but perhaps not necessarily the visual design) is displayed in older and more buggy browsers.

Conclusion

As you can see there are many reasons why a web page may not be visually consistent. Some of these relate to the user's computer and their personal browsing preferences, and others to the way browsers actually work - interpreting the designer's layout rather than displaying it pixel by pixel. Some of the biggest and most common display discrepancies relate to bugs in a user's browser.

Display discrepancies are a fact of life for web designers and web design buyers. By using web-standard code many of these issues can be dealt with and the increasing standardisation of the web will undoubtedly help in this respect. But unless we all use the same computer systems with the same preferences there are always going to be some differences.

Designing for the web requires a different mindset than designing for print. It's less about absolute layout control and more about content and information.

The web allows us much greater freedom with our content than print ever has. Once an item has been printed it cannot be changed, while the web allows us the freedom to change both content and design. It also gives your visitors the freedom to view your content in a manner of their choosing. To allow this freedom, some degree of layout control has to be given to the user. This means that pixel perfect design on the web is not just difficult - it's undesirable.

The site uses a customised version of our content management system SweetCMS, allowing Katie to update the site regularly, from any web-connected computer. It has a high degree of accessibility and search engine 'findability', and is W3C Web Standards-compliant 'out-of-the-box'.

It also has some rather special features, including a custom-built chat-room where Katie herself will hold regular chat sessions. E-commerece is handled through our SweetCart system, which allows the site manager to manage products, cross-sell items and process oders made through the site. The site content is divided between 'public' and 'private' - the latter only being available to those who have joined the site, paying annual or monthly subscriptions.

One person, two personae

The site is aimed at Katie's younger, predominantly female audience, which is reflected in the design of the site as well as the content. Older fans will still be catered for however; we're currently working on a brand new Jordan Official Fanclub website! Watch this space.

www.katieprice.co.uk