If you would like your own home page you might like to download Alan Levines 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: dont hide the right-hand side of your page!
Preferably design your web site to be viewable on a 12-13" monitor. While there probably arent 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 cant 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 didnt 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, youre effectively blocking out a reasonable number of Web surfersor 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 wasnt 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 pagebright green print on a black background. I think the author must have been pining for the days before Bill Gatess 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) wasnt objectionable. I didnt read the page of coursebecause, after all, it wasnt the promised story. Since I couldnt 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 doesnt 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
Dont 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, shouldnt I have as many pictures as I want? Well:
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, its 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.
Dont 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 doesnt have to spend extra time searching for the image size;
When the image finally appears it wont cause the text that your visitor is reading to suddenly jump down the page, which is extremely annoying.
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
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 programs 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 youll 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 filemaybe by pressing the start button. Apart from the fact that visitors may find the music objectionable, theres 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. Im sure Im 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
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.
Its 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 cant go wrong: everybody has these. Of course, most browsers allow visitors to override a webmasters choice of type, so your site could still look ugly to some people. But thats their problem!
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.
Dont 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.
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!
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 browsers 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.
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.
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.
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.
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 havent. If youve used colour to enliven your text in other places, they may even have trouble working out whats a link and what isnt.
Dont 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?)
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 theyve found it!
For the same reason, a link to your guest book (if you have one) should appear on every page.
If youre worried about spam robots grabbing your email address, you can always use Unicode (which I use to create typographers quotes, emdashes, proper apostrophes, etc) to hide it from themalthough sooner or later these evil things will be adjusted so they can read the code. In the meantime, the codes are as follows:
- - @ @ a a b b c c d d e e f f g g h h i i j j k k l l m m n n o o p p q q r r s s t t u u v v w w x x y y z z
. . A A B B C C D D E E F F G G H H I I J J K K L L M M N N O O P P Q Q R R S S T T U U V V W W X X Y Y Z Z _ _
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:
Blinking textfortunately not so common these days.
Words marching across the page.
Words marching across the status bar at the bottom of the browser. Thats where I want to see the URL of the link at which my mouse is pointing, for goodness sake!
Manipulation of the visitors browser window. On one site (a supposedly safe site for children to have fun) my status bar disappeared, along with all my computers pull-down menus. If this was meant to increase my enjoyment of the site, it failed dismally. I was frustrated and furious! Im the onethe only onewho should decide on the browser set-up of my computer! Are youngsters surfing the Net perhaps more tolerant than I am? Somehow I cant 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
Dont 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 links contentvery time-wasting.
Its 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.
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.
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.
Finally, view your pages in your browser with pictures turned off before you upload the files to your server (thats usually whoever is providing your Internet access). Are the pages still readable? Obviously they wont look as good without your background texture and your graphics and photographs, but are they still acceptable? If youre not too confident of your own judgement, ask somebody else.
Well, these are some of my personal prejudices. However, things that irritate me might not be important to someone else, and you dont have to take notice of them if you dont 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, Im amazed at the number of web site creators who expect me to do just this!
Certainly visitors who cant navigate your site are going to think youre less than courteous. They will probably think youre an idiot if they cant read your sites content because you havent specified a suitable background colour and your type is the same colour as their default background colour. Also, if you dont 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 dont use the ALT tag so that text-only visitors can read what your picture is about, they wont be tempted to ask for it to load. Thats just common sense, surely!
Some of the unfriendliest web sites Ive 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 youve explored my site thoroughly you will have noticed Ive 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 Im 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 youre ready to create your own home page, youre still baffled by the strange codes for Web colours, check out my Web Colour Codes page.