Web Log Costa Blanca

Make text readable? You may be thinking, “For a website designer with a Web hosting company, this sixth rule is tame stuff.” Why would anyone put text on a Web page that they didn’t want to be read? Bear with me. There are things here that not everyone gets—including me when I was green in judgement.

The first obvious thing is that text colour must show up well against background colour. Given that we may use a whole range of background colours for particular regions in our Web pages, it’s easy to slip up. You can trust your own eyes here, or you can use an online tool. I myself like the Colour Contrast Analyser, which will allow you to enter your two colours and then let you know if the combination is within acceptable guidelines.

Next, you need to give your words breathing space. White space, more white space! Make sure you use enough padding round your paragraphs for your visitors’ eyes to rest and to take in your message easily.

It doesn’t matter how cool your site looks when you call it up. If your visitors can’t read your words effortlessly, they will click on their Back button, or on the little X which closes a tab, and be off to the next site in Google. All the work you put in to get your site hosted will be wasted.

If there is no colour scheme for links (and you haven’t customised your browser) then text links you haven’t followed—or only followed some time ago—will be blue and underlined. Links you have followed recently will be purple and underlined. When your mouse cursor rests on the link, the cursor will change to a pointing finger, but the link will stay as it was. When you click on the link, the link will also stay as it was—for the second or so before you are whisked away to the new location.

Very few professionally designed pages keep this default look and behaviour. Nor should you. So my fifth rule is: design your text links.

You will take this step as part of working out a colour scheme (Rule 3), perhaps at the same time as you are deciding your two basic backgrounds (Rule 4). And you will have four link states to consider: unvisited, visited, hovered over, and clicked on.

(more…)

The first thing you need to do with your colour scheme (see Rule 3) is to establish a couple of backgrounds.

By now, you will have done all the vital preliminary analysis. You will know what this new site is for, which specific visitors the site owner wants to attract and keep, what visitors will be doing once they get to the site, and so on.

If you are (in whatever spirit) keeping to my rules so far, you will now be in a position to decide two crucial backgrounds—the screen background, and the background to your 960-pixel-wide main area.

Of course both backgrounds can be the same, if that is the effect you want. And they can both be white. Once again, it’s a matter of what you want to communicate, who you want to attract and keep on the site.

I like plain white for the main area. I use it more often than anything else. On the other hand, if a site is complex, I sometimes use a different background colour for subsections. And I really like to experiment with the screen area—the area outside the site pages.

In the early days of the Web, designers played with all kinds of backgrounds for pages. These days, patterned backgrounds, dazzling gradients, bold colours are out of fashion, and unlikely to come back, since all our emphasis now is on usability and readability. However, there is a place for backgrounds which communicate a message—and that is in the screen area to either side of your pages. Here you can use gradients, images, patterns, anything you think will work. Since no text or other images will appear on top of this background, it is free for you to exploit for the most creative of effects.

Don’t neglect it!