NZ Forest Native Birds
Is Your Web Site Unfriendly? Some tips and a tutorial

If you would like your own home page you might like to download Alan Levine’s excellent Writing HTML Tutorial, which is designed to operate like a web site. I used it to build these pages and had a lot of fun. In the meantime, here are a few tips to help you create a pleasing web site, or improve it if you already have one.

Page Width: don’t hide the right-hand side of your page!

Preferably design your web site to be viewable on a 12-13" monitor. While there probably aren’t all that many of these around today, there are still plenty of 15" ones. Also, type that reaches from one end of a large monitor to the other and can’t be viewed by making the browser window narrower makes for difficult reading. A good yardstick is to keep the page width within the default width of your browser. Having to resize the browser window can force the screen to redraw and therefore waste time, and having to scroll past the width of the screen is downright irritatinga bit like trying to read a comic or newspaper and having someone else continually covering up the right-hand side of the page. When I had a 15" (640 x 48) monitor I had to be very keen on its content to stayand I probably didn’t go back to it. Page lengths are not quite so important. They will vary anyway, depending on content.

So, if you design your site only for the majority of visitors, you’re effectively blocking out a reasonable number of Web surfers—or at least making it difficult for them to appreciate your site fully.

As an example of an unfriendly web site, someone on a group to which I subscribe posted an invitation to check out a free story. He even included some glowing reviews to whet our appetites. And the story sounded really interesting. But when I went to the URL given by the author, the page wasn’t the story I expected. Apart from a load of Tripod pop-up ads that I thought would never stop coming, a Java splash page loaded in. That was followed by a most unexpected page—bright green print on a black background. I think the author must have been pining for the days before Bill Gates’s copy of the Macintosh platform made DOS computers so much friendlier to use and easier on the eyes! To add insult to injury, the writer included a sound file with absolutely no way of turning the sound off. Fortunately the file (mostly bird song) wasn’t objectionable. I didn’t read the page of course—because, after all, it wasn’t the promised story. Since I couldn’t even find a link that looked remotely as though it might lead to the story, I logged off.

The moral of this tale? Clever use of the latest technology doesn’t necessarily make for good web design.

Another recently visited site had red text on a black background. Merely looking at something like this is enough to give any reader a headache.

Images: make every one count
  1. Don’t load your page with graphics, especially those “under construction” things. If the graphic has nothing to do with the content of your page it is best left out. Why, I hear you ask, shouldn’t I have as many pictures as I want? Well:
  2. <

    • Visitors who still have very slow Internet connections will simply get tired of waiting for your page to download and go somewhere else.
    • About 30% of Internet users with browsers that support images disable this feature, and some older browsers are text-only: your page can look messy if, for instance, it’s full of empty boxes or boxes with the word “(image)” in them.
    • Unless your home page is devoted to, say, your artwork or your prize-winning photographs, graphics can distract from the content of your site.
    • A large number of graphics, especially animated and other gimmicky ones, often indicate a site lacking in real substance.

  3. By all means use graphics on your home page as links to other pages, but make sure you supply words as well: a line or row of little empty boxesor boxes with the word “(image)” in themmeans text-only visitors have to wave their mouse pointers over each box to see if the link contains something of interestand URLs can sometimes be so long and complicated that this information might be hard to extract. I have been put in this position, on the home page of a supposedly professional site (a publisher’s site in fact) where I found nothing but empty boxesno welcome, not even the publisher’s name. My thoughts were not kind ones! I recently visited a page where, because the webmaster had used JavaScript for navigation, waving my mouse over the link did nothing but tell me that there was a link there! Yet another web site that I landed on when looking for something else belonged to a firm who were supposed to be professional web designers but who presented my grapiics-off browser with nothing but a load of empty boxes. Yikes! Supposing I had actually been looking for a web designer I would have instantly closed the window and carried on looking. While a web designer’s clients might have high-speed Internet access, those clients have to consider the fact that their own clients could be using 56 K modems. Until everybody in the world has high-speed Internet access, web sites need to be designed for the slowest modem that’s likely to be out there.

  4. Don’t forget to specify the height and width of images. There are two good reasons for this:
    • The image will download a lot quicker because the browser doesn’t have to spend extra time searching for the image size;
    • When the image finally appears it won’t cause the text that your visitor is reading to suddenly jump down the page, which is extremely annoying.

  5. If you are using scanned photographs, or maybe scans of some of your own artwork, make sure the scans are good ones. Most scans need work doing on them before they are suitable for use. They should be clear and sharp, not looking as though taken with the camera slightly out of focus, or as though seen through a white haze.

More like this

than this

or this

please load this pic

please load this pic

please load this pic

Yes, I have seen on the Internet images with faults similar to the middle and right-hand scans abovethough maybe not quite as exaggerated! Consult your scanner or scanning program’s instruction book to find out how to make your photos look as much like the original as possible, or how to correct a scan of a faulty photograph. The better your scanner, of course, the less work you’ll have to do on your scans.

Sound Files: Don’t Drive Your Visitors Away

If you must put MIDI sound files on your page make them so that visitors have to ask to hear the file—maybe by pressing the “start” button. Apart from the fact that visitors may find the music objectionable, there’s a good chance they are surfing late at night or early in the morning when other people are sleeping; or they may be listening to the radio or a CD; they may even be trying to look busy during a lull at work, and the sound could alert the boss. You will be most unpopular. I’m sure I’m not the only surfer who (unable to reach the “stop” button because the page is still loading) just bangs on the close window box until the page goes away. I never return.

Text: the way it’s presented can make or break your page
  1. Be consistent with your typeface sizes. Body text should usually be the same size type throughout and headings and subheadings should also be consistent. If you keep jumping from one typeface size to another for no real reason your page will look ugly and might even be difficult to follow.

  2. It’s a good idea to specify type faces throughout your site so that your pages look the same to visitors as they do to you. If you stick to, say, Times, Ariel and Helvetica you can’t go wrong: everybody has these. Of course, most browsers allow visitors to override a webmaster’s choice of type, so your site could still look ugly to some people. But that’s their problem!

  3. Never underline text, even headings. On paper underlining belongs strictly to the typewriter and is regarded as bad typography. On the Web it indicates a linkunless, of course, the link-underlining feature has been disabled.

  4. Don’t turn whole sentences into links if you can avoid it: great chunks of underlined text are difficult to read, as well as being very ugly.

  5. Use text in all capitals only for headings, and then use it sparingly. Blocks of text in capitals are difficult to read. Most headings look best with Just Initial Capitals.

Colours: don’t make them play vanishing tricks with your text!
  1. If you use a textured background gif make sure you also specify a background colour that is similar to the main colour in the gif or your text could be unreadable to someone browsing with text-only. Believe it or not, I have found myself trying to read white text on my browser’s default light background! The fact that I had specified a default background colour rather than white was the only way I realised there was something there to read.

  2. If your background texture/colour is dark, use a light text to create enough contrast to make it easy to read. If the background texture/colour is light, use a dark text.

  3. Keep your use of the brighter colours to a minimum: fluorescent green or yellow text on black, for instance, is very hard on the eyes. If you favour a black background, use such effects sparinglysay to draw attention to your email address. Bright coloured backgrounds are also hard on the eyesnot to mention the fact that finding a good contrasting text colour (apart from black or white) is almost impossible because bright colours are often neither dark nor light.

  4. Preferably use the same background texture/colour on all your pages as it gives a more unified feel and appearance to your site. However, if your chosen colours clash badly with, say, the colours in an important graphic or photo on one particular page, by all means change the background for that one page.

  5. If you change the link colours from their default settings (for instance, the green and blue of Internet Explorer and the green and purple of Netscape Navigator) because they clash with your chosen colour scheme, then keep these link colours consistent throughout your site or visitors will have trouble working out which links they have been to and which they haven’t. If you’ve used colour to enliven your text in other places, they may even have trouble working out what’s a link and what isn’t.

  6. Don’t specify the same colour for visited links as for unvisited ones: this will confuse visitors just as much as using different link colours on each page.

Feedback: (You DO want people to tell you they like something?)
  1. Make it easy for visitors to tell you how much they enjoyed a particular item on your site by putting an email link on every page. Not everyone wants to sign a guest book and if visitors have to go back to the home page to find your email address they might forget what they wanted to say by the time they’ve found it!

  2. For the same reason, a link to your guest book (if you have one) should appear on every page.

    If you’re worried about spam robots grabbing your email address, you can always use Unicode (which I use to create typographer’s quotes, emdashes, proper apostrophes, etc) to hide it from them—although sooner or later these evil things will be adjusted so they can read the code. In the meantime, the codes are as follows:

    -     &#45;
    @     &#64;
    a     &#97;
    b     &#98;
    c     &#99;
    d     &#100;
    e     &#101;
    f     &#102;
    g     &#103;
    h     &#104;
    i     &#105;
    j     &#106;
    k     &#107;
    l     &#108;
    m    &#109;
    n     &#110;
    o     &#111;
    p     &#112;
    q     &#113;
    r     &#114;
    s     &#115;
    t     &#116;
    u     &#117;
    v     &#118;
    w     &#119;
    x     &#120;
    y     &#121;
    z     &#122;
    .    &#46;
    A    &#65;
    B    &#66;
    C    &#67;
    D    &#68;
    E    &#69;
    F    &#70;
    G    &#71;
    H    &#72;
    I    &#73;
    J    &#74;
    K    &#75;
    L    &#76;
    M    &#77;
    N    &#78;
    O    &#79;
    P    &#80;
    Q    &#81;
    R    &#82;
    S    &#83;
    T    &#84;
    U    &#85;
    V    &#86;
    W    &#87;
    X    &#88;
    Y    &#89;
    Z    &#90;
    _    &#95;
META Tags, so people can find you on the search engines

This is a somewhat “hit and miss” area of writing web pages, because search engines all seem to work differently. The idea, basically, is to use the words in your tag as many times on the page as possible. If your site is devoted to your favourite photos, for instance, you could place the word “photograph” in your META tag and use it, and derivative words such as photo and photographic, as much as possible in the page itself. If the page includes, say, advice on choosing cameras and this word appears on your page several times, placing “camera” in your META tag would also be a good idea. Words placed in the META tags are usually separated by a comma: <Meta name="keywords" content="photo, photograph, camera">.

Other “unfriendly” things on web sites are:
  1. “Blinking” text—fortunately not so common these days.

  2. Words marching across the page.

  3. Words marching across the status bar at the bottom of the browser. That’s where I want to see the URL of the link at which my mouse is pointing, for goodness’ sake!

  4. Manipulation of the visitor’s browser window. On one site (a supposedly safe site for children to have fun) my status bar disappeared, along with all my computer’s pull-down menus. If this was meant to increase my enjoyment of the site, it failed dismally. I was frustrated and furious! I’m the one—the only one—who should decide on the browser set-up of my computer! Are youngsters surfing the Net perhaps more tolerant than I am? Somehow I can’t imagine most children being happy to find their browser display has suddenly changed!

The gimmicks in items 1, 2 and 3, along with animated graphics, are extremely distracting, especially to the eyes of visitors who are much more interested in what the owner of the web site has to say. Item number 4 is plain unforgivable interference.

General: linking it right; checking everything
  1. Don’t use “click here” for your links (the link should be attached to where you want your visitors to go: “Return to Home Page” rather than “Click here to return to Home Page”). “Click here” is meaningless and the visitor has to keep scanning the text to find the link’s contentvery time-wasting.

  2. It’s a good idea to put the URL of each page on the bottom of the document. This makes it easier for people who have downloaded your page to disk to revisit it. I often find myself wishing more people would do this, especially for the type of page that eventually becomes out-of-date.

  3. Take time to proof-read your text before you upload it to your server. Preferably get someone else to do it for you: authors become so familiar with what they have written that they usually see what they expect to see, thus missing many typographical errors.

  4. Pretend you are a visitor to your site and click on all your links to make sure they work properly. Or ask a friend or family member to do it for you: problems will be more obvious to them.

  5. Finally, view your pages in your browser with pictures turned off before you upload the files to your server (that’s usually whoever is providing your Internet access). Are the pages still readable? Obviously they won’t look as good without your background texture and your graphics and photographs, but are they still acceptable? If you’re not too confident of your own judgement, ask somebody else.

Summing up

Well, these are some of my personal prejudices. However, things that irritate me might not be important to someone else, and you don’t have to take notice of them if you don’t want to. Nevertheless, most of these faults are considered by genuine professional web designers to be serious ones. Some people insist a web page is nothing like a printed page and web designers are therefore free to break all the rules of good page layout and design, but the fact remains that if it looks ugly on paper it looks just as ugly on a monitor. Do you really fancy reading a book or newspaper with black pages and blue or bright green print, for instance? Well, then, why would anyone want to read something like this on a monitor? However, I’m amazed at the number of web site creators who expect me to do just this!

Certainly visitors who can’t navigate your site are going to think you’re less than courteous. They will probably think you’re an idiot if they can’t read your site’s content because you haven’t specified a suitable background colour and your type is the same colour as their default background colour. Also, if you don’t specify the height and width of your images these will take ages to download and your visitors will give up and go elsewhere. I do. Likewise, if you don’t use the ALT tag so that text-only visitors can read what your picture is about, they won’t be tempted to ask for it to load. That’s just common sense, surely!

Some of the unfriendliest web sites I’ve visited, incidentally, have been done with various versions of Microsoft FrontPage. When I mentioned this to a friend who knows more about web design than most professional designers, he made me laugh by replying very emphatically that FrontPage is “evil”. But statistics can always be twisted to say what you want them to say. The truth in this instance is probably that this program is simply more popular than others. And I have visited some very attractive sites made with FrontPage.

I must confess that if you’ve explored my site thoroughly you will have noticed I’ve broken several of my own rules: there are a few pages with purely decorative graphics in place of dividing lines; and elsewhere I used all capitals for my heading. But I’m not telling you which pages these latter are on! And now, without further ado, download that Writing HTML Tutorial and go for it! Depending on which version you require, it ranges in size from 2.3 to 3.3 MB (and is growing all the time!) and will need unzipping/unstuffing before you can use it. If, when you’re ready to create your own home page, you’re still baffled by the strange codes for Web colours, check out my Web Colour Codes page.

to choose other pages on my site, or see
Web Colour Codes

If you have any comments or questions, please
email me