Browsing by design

We've all seen Web pages that look like they've been thrown together in someone's bedroom. Danny Bradbury explains how to build a professional-looking website that will burnish rather than tarnish your image.

All the hype about the potential of e-commerce and the Internet leaves aside one small fact, which has huge consequences if you get it wrong: most businesspeople haven't got the first clue about website design.

Let's face it - a lot of the Web is just downright awful. We've all seen some websites that make 1960s psychedelia look relatively sedate, and a few of us have probably been responsible for them.

The tragedy is that it doesn't have to be that way. Using some simple design rules, you can turn your gaudy, difficult-to-use website into a professional, good-looking place that people will want to return to regularly.

Get designer-savvy
One of the most important factors here is navigation. Many people design their websites without first having a clear idea of its structure.

Before doing anything, the savvy e-commerce businessperson will talk to the website designer about how the site should be divided. Ideally, such areas should reflect distinct parts of the end-user experience (there's no point merging the technical support and sales sections, for example).

Frames can be used to provide a constantly available navigation bar so that people can always find their way around the site. And make it clear what the links are pointing to, avoiding what some people call 'mystery meat navigation', where unfathomable images are used to link to parts of the site that aren't immediately obvious.

Graphics (static and otherwise) play an important part in professional-looking Web design. Used wisely, they can add panache to a site that contributes to your overall brand image. Use them badly, and they will do exactly the opposite. Obvious no-nos are the use of bandwidth-heavy graphics, which will bore people waiting for them to download - especially given the dire state of consumer ADSL availability in the UK. And those animated GIFs that look like Word clip art are a sure way to make your site look amateurish.

If you do want animations on your site, then Macromedia's Flash program is so well-known on the Web that it's effectively a de facto standard. But make sure that any animations you use are productive. Simply putting animated banners and icons on the site because you can is not advisable, but if it increases the usability of the site (say, by having an icon move when you put your mouse over it) then it's acceptable.

The golden rule is to check that the end-user's browser supports the technology that you're using - whether it's Flash, or something else - and to provide an alternative, low-tech version if it's not compatible. Any well-informed HTML and JavaScript programmer will be able to do this.

Talking of compatibility, both standards compliance and backwards-compatibility for older browsers is important for good Web design. The World Wide Web Consortium (W3C) is the central authority on standard ways to describe the information in your website to visitors' browsers.

Theoretically, marking up your HTML and other Web information to these standards should ensure that your Web page always looks as it was intended. Check your HTML code against these standards by surfing over to http://validator. w3.org/.

Unfortunately, coding to these standards is not enough. While the latest versions of the most popular browsers (Netscape 6 and Internet Explorer 6) are standards-compliant, older versions of these browsers were not.

Your website should be able to work with Netscape 4 and 6, for example, and this is no mean feat, because Netscape completely redesigned the underlying browser engine in version 6 to be more standards-compliant, meaning that some sites designed for version 4 don't work under the new version.

Using XHTML, a relatively new standard from W3C, can help to cope with this problem by enabling programmers to include different display instructions for different browser versions as part of the website content. These guides are known as style sheets.

Regardless of whether they're used with XHTML or not, cascading style sheets are an invaluable tool on any website, because they can also be used to create a set of standard display guidelines for site content.

You may wish for all of your headlines to be displayed in pale yellow against a dark blue background in a font size of 24, for example. Instead of having to specify this every time, you can simply create a style sheet dictating that every headline in your website should be displayed this way, thus ensuring consistency.

You can validate your use of style sheets against W3C standards in the same way that you can validate your HTML, by surfing to http://jigsaw. w3.org/css-validator/.

Test, test and test again
Making sure that your site looks professional is about a mixture of technical know-how and artistic skill. Reading a book or two on good design will give you much more in-depth knowledge than this article can but, in general, the rules of aesthetics dictate that less is more; subtlety goes a long way.

And when you've gotten your website just the way you want it, be sure to test, test and test again, on every version of every browser that you can find, to ensure that it looks good to all your users.
www.webpagesthatsuck.com
www.macromedia.com
www.w3.org