Software - PC User Interactive - 12 Web design bloopers

Helen Bradley and John Hilvert provide tips to overcome common Web page design flaws.

1. Backgrounds that swallow text
Many sites have the text of the page or the links set so that they are difficult to see against the page's background. Another particularly annoying habit is for a designer to actually 'hide' followed links by making them the colour of the page background. While this makes it easy for the user to see what links they haven't yet followed, it does mean that if you find an interesting link, it disappears the minute you return from viewing it.

You can avoid this by setting the colour of the default text using the TEXT attribute of the BODY tag, for example <BODY TEXT="#rrggbb">...</BODY>. The values for rr, gg and bb are two-digit hexadecimal numbers representing the value of red (rr), green (gg) and blue (bb) in the colour you are using. The values are from 00 to FF hexadecimal (0-255 decimal). There is a handy colour chart at Lynda's Homepage (http://www.lynda.com/hex.html) showing the decimal and hexadecimal numbers of the 216 browser-safe colours (the colours in the palettes used by the popular browsers).

The attributes that control the colour of links are LINK, VLINK and ALINK. LINK is the colour of a link, VLINK is a visited link and ALINK is an activated link. These are attributes of the <BODY>...</BODY> tag. The defaults for these links are blue, purple and red and you can alter them using the same colours you use for background text. This example gives you blue background text, red links, black followed links and green active links:

2. Just because you can
Just because you've found a wonderful animated graphic of a spinning globe, or because you can write neat JavaScripts to alter background colours or because you can turn your Web page into one large image map, doesn't mean that you should do any of these things.

Seasoned Web users are a pretty jaded bunch and are sceptical of sites with large graphics that take minutes to download and don't add anything to the purpose or functionality of the site. So, while we're not saying you shouldn't have cool graphics and hot scripts on your page, you should ask yourself why they are there. If you're putting them there only to show that you can do it, then it may be time to revisit the goals for your site. Everything on your site should be focused towards achieving the goals you have for your site. They should complement the statement you're trying to make and must always be relevant to your target audience.

And always be wary of the trade-offs involved in implementing some nifty multimedia add-on or plug-in, such as Shockwave. While the effects you create may complement the purpose of your site, you stand to lose a portion of your viewers who don't have the time or inclination to download the plug-in simply so they can view your design in all its glory. For people who don't have the plug-in, your choice is to either make sure your site is still intelligible or accept that you will be losing a segment of your potential audience.

All this aside, if you simply must have a spinning globe on your site, check out http://www.webgrafx-fx.com/pages/archive.html. There are thousands of animated GIFs and over 130 globes available to download!

3. Links that aren't
There is nothing more annoying than reading the blurb for a link to a great site that you 'simply must visit' and clicking on the link only to find it doesn't work. While the fact that the linked page has gone AWOL is no fault of yours as the page designer, its absence when linked from your page does subtly change the way your viewer looks at your site. Your viewer asks themselves, 'how many more of these links won't work?' and 'how up-to-date is this page anyway?'. Whatever positive thoughts your viewer had about your site and your product, some subtle negative messages are now creeping in.

The best way to avoid disappointing your viewers is to check your links regularly and make sure they're current. And when you do, make sure you empty your cache before you do it (or set your browser to Verify: Every time -- see verify.bmp) or you might just get your browser's recollection of what the link used to look like -- before it ceased to exist!

If the task of checking links is a big one, then there are programs which will do the work for you. Try the shareware program which you can download from http://www.cyberspyder.com

4. No time to wait
Large sites that take too long to download risk being over-looked by viewers. If your site is graphics-intensive and slow because of this then viewers will simply give up and go elsewhere. Here are three things to check which might speed up the graphics on your site:

Can you achieve the same goal another way? For example, better support for fonts means that you can replace graphical headings with text formatted with the ... tag instead.
Can you reduce the file size of your graphics? On the Web you can use either GIF or JPG files as graphics and background images. If you aren't sure whether to use GIF or JPG, save your graphic in both formats and compare each for file size and quality. And remember that saving a graphic as a JPG file allows you to increase compression at the expense of image quality so experiment with these settings, too.
Can you make the page look like it's loading more quickly? If you specify the size of your graphics in your IMG tag, your browser displays the text in your document leaving gaps where the graphics will appear to fill in later on. For example, <IMG SRC = "logo.gif" WIDTH=200 HEIGHT=152>. Your page won't load any faster but your viewer will have text to read while the graphics are loading.

5. Too big for my screen
Viewers dislike having to scroll extensively to view your Web page. As a designer you won't be able to avoid some vertical scrolling simply because it's too difficult to get all the information you need on one screen. Scrolling more than half-a-dozen screens, however, is not recommended, so if your page is longer than this try splitting the information into more than one page to reduce the scrolling needed to view it.

And be aware of screen resolution, too; many Web designers make the mistake of imagining that all their viewers own the same 17in or 24in monitor that they do. Unfortunately, many Web surfers are still viewing your site on a 15in 640 by 480 screen, although most will now be using a 800 by 600 screen. So, when you're designing for the Web, take different screen sizes into account in your design and, whatever the cost, avoid making your viewer scroll horizontally.

When you're testing your page, reduce your screen resolution to 640 by 480 to check what viewers using that resolution screen are seeing when they view. You may need to weigh up the differences between assigning table and frame widths in pixels or percentages in the light of how the material you have to work with looks at the different screen resolutions.

And, always keep in mind that HTML is a mark-up language, not a page layout language. So, you should never expect that everybody will see your Web site exactly the way you've planned it. Every browser will render your page differently so the best that you can do is to preview how your page looks under a variety of possible browsers and ensure that, whatever else happens, they degrade gracefully.

6. No feedback or contact details
Strangely, many Web sites lack basic contact details so that if you need more information about the company, you have to look elsewhere to find it. This is an inexcusable omission -- every Web site should contain an easy to locate page with details of how the company can be contacted.

And remember, the Internet is an international medium so include the country name in your address and include two versions of your phone number -- one for local callers and one for international callers. In the international version include the country code and remember that international callers can't be expected to know that they shouldn't dial the leading zeros from Australian phone numbers.

Also include your e-mail address so your viewers have the ability to e-mail you for more information or feedback about your site. The tag <A HREF = mailto:yourname@your.mail.address>email me</A> will allow the viewer to click on the link and e-mail you direct from your site. Many sites include this at the foot of every page but wherever you put it, it should be easy for your viewer to locate.

7. Why am I here?
While fancy splash screens look creative and may capture a viewer's interest, the interest will not last if, upon entering your site, it isn't fairly quickly obvious what your viewer stands to gain by being there. Very soon after they enter your site your viewer should have a clear impression about who you are and what they can expect to gain from visiting it.

Ask yourself why a user will visit your site, for example, they may be visiting to find more information about your product or service, to send a virtual gift to a friend or to locate information in your database. When you know why your viewer is visiting, you'll know what information to give them to reinforce the impression that they've come to the right place.

If they aren't reassured pretty quickly that your site can give them what they want they'll either go elsewhere or, if they have no alternative, they'll develop a negative impression of your company and the services it offers.

8. Where am I?
Too often when you're navigating a Web site you get lost or confused about where you are, where you've been and where you have yet to visit. There are even sites which leave you wondering if you are still on that site? If this happens on your Web site you'll annoy your viewers leaving them with a bad feeling about your company and your products.
The easiest way to avoid these problems is at pen and paper stage (remember them?). Your site needs to be designed, on paper, from the top down so that you are clear about how and where each page fits into the overall plan. Your site diagram should be able to be drawn in a similar way to an organisation hierarchy chart with four to six main branches off your opening page which will each contain sub branches.

With a plan for your site you can then design its navigation system. Have a look around the Web at how other sites work to see what might work on your site. You may choose to use menu bars and contents lists as a way of showing your user what is available or you may display icons or pictures for them to click on. Make sure that you always offer a text alternative for any graphical navigation system or users with graphics turned off won't be able to find their way around.

If your site is large, providing your viewers with a site overview or a table of contents page will give them a good idea of what is to be found on your site. And always give the viewer a way of getting back to your home page too, so that if they get lost they can always find their way back.

Also consider that many of your viewers won't have entered your site via your home page. They may have come in via a link from another site to any single page on your site, so make sure that from any page it will be easy for them to know where they are and what is available to them if they choose to stay and look around.

A handy technique for making sure that viewers don't leave your site even if they follow links to outside sites is to open the link in a new Web browser screen. For example, this <A HREF = "http://www.microsoft.com/default.asp" TARGET = "_blank">Microsoft</A> opens a new window for the Microsoft site, leaving the window containing your site still visible.
In addition to opening a whole browser, you can use JavaScript to customise how big the browser window is and what features, such as scrollbars and menus, are to be included. See http://search.netscape.com/comprod/products/navigator/
version_2.0/script/script_info/methods.html#open_window_method for more details.

A word of warning though, always exercise caution when you use techniques that manipulate your users' desktop, as some viewers may find it annoying to have yet another window open that they don't have control over.

An excellent resource on Web design which should be the foundation stone of every Web designer's library is the book by Crystal Waters, Web Concept and Design -- A Comprehensive Guide For Creating Effective Web Sites. Visit her site at http://www.typo.com/

The Australian Canned Food Information Service site home page is easy to navigate, is only two screens deep and displays clearly on a 640 by 480 monitor.

9. Under construction
That little worker shovelling dirt on a yellow warning sign is working in way too many places, so give him (or her) a break and keep them off your site! In short, your site shouldn't be there for viewing until you are ready for people to visit, and if there are elements of your site that are incomplete either don't mention them or mark them as 'coming soon'. But, if you do pre-publicity for a section of your site, make sure that it does get developed -- sooner rather than later. Viewers will get discouraged if they see out-of-date promises on your site about what you 'will' be providing.

A better way of developing your site is to add new areas and then mark them as being new with a 'new' symbol or put them in the 'What's New' section of your site. This way your viewers will see that your site is changing -- they're more likely to visit more often if they can expect new things to see when they call by. And while you're at it, don't leave topics in the 'What's New' section for too long or, again, you'll disillusion your viewers.

10. Unreadable
Many Web sites are text heavy and are at best difficult to read and at worst, unreadable. The mistake many designers make is thinking that material written and prepared for a book or a newspaper will reproduce on a Web site without significant reviewing. This is not the case because reading information from a screen is more difficult than reading printed matter. You should always review, and possibly reformat or rewrite, material before including it on your Web page.

Make sure that text paragraphs are short, try for between three to seven lines long so they look small and easy to read. Add either an indent to the first line of each paragraph or a break between paragraphs to make a visual pause for your viewer. In general, a serif font such as Times New Roman is easier to read than sans serif font, such as Arial, so use a serif font for preference and at a size that is easily read even at lower resolutions. Remember that your aim is to make it easy for your visitor to read what you have to say.

If you have a text heavy page, don't try to squeeze it in to make it fit in a smaller area, rather, spread it out with lots of white space and frequent paragraph breaks. Even at double the length you'll have a page that is more reader friendly and more likely to be read.

You'll find that the new line tag and the new paragraph tag may operate differently in different browsers and depending on whether or not you're using style sheets. The will give you a smaller break than the tag.

11. Text alternatives
Many Web users surf with graphics turned off to increase the speed and some are still using text-only browsers such as Lynx. To these viewers a graphics-intensive page can be either a useless blank or a wealth of information. If you don't know what we're talking about, turn graphics off on your browser and go surf the Net for an hour or so and see how difficult it can be to find your way around.

The ALT attribute for the IMG tag allows you to add text to your graphics that appears on the screen if viewers have graphics display turned off or they're using a text-based browser. You should use this attribute to add some meaningful information about the graphic. For example, <A HREF = "http://www.pcuser.com.au/"><IMG SRC = "pcuser.gif" ALT = "Go to PC User home page"></A> will display the graphic pcuser.gif on a graphics enabled browser and the text 'Go to PC User home page' on other browsers.

If you have a graphic on your page for illustration purposes, include some information about it and its size; for example, <IMG SRC="parrot.jpg" ALT="Crimson rosella, 40Kb, JPG image"> tells your viewer what the image contains, its size and file type.

Remember, too, that if you use image maps these won't be visible on browsers which don't have graphics enabled. Always provide some alternate text-based navigation system if you are using an image map.

For an interesting discussion on the use of ALT text, check out the Web Design Group's Use of ALT texts in IMGs at http://www.htmlhelp.com/feature/art3.htm

12. Ugly bullets
No doubt you'll have seen sites around with square borders around circular bullets or where the bullet itself is encased in a square which differs in colour to the background of the page. The problem here in the first instance is that, by default, some browsers include borders on images and others don't, and in the second, that the image's background is not transparent.

You can ensure that whatever browser your viewer is using that borders do not appear on your images by setting the BORDER attribute to 0, so <IMG SRC="button.gif" BORDER = 0 ALT = "Next screen"> will display the graphic button with no border.

The circular bullet with a different coloured square around it is caused by having to save files as rectangular objects even if they contain a circular image. The unwanted border can be eliminated by opening the graphic in a paint program and colouring the border in a single colour. When you save the graphic as a GIF file, specify the coloured border as the transparent colour. Most graphics packages allow you to save graphics files with a single transparent colour.