 |
  HTML Tutorials GuruSearch! Web Glossary LiveWire Forums |
 |
 |
  Getting Started Text Links Colors Backgrounds Images Tables Frames Image Maps |
|
|
|
|
 Design Guide Forms Meta Tags JavaScript Style Sheets SSI CGI Web Browsers |
|
|
|
|
 HTML Editors Free Web Hosting Domain Names Copyrights |
 |
This design guide will assist the more advanced web authors in the design, layout, and implementation of web pages. There are certain unsaid rules of web design that should always be followed, below are listed some of the most important:
Avoid:
- Blink tags
- Neon colors
- Dark text on dark backgrounds
- Light text on light backgrounds
- Graphical HTML Editors
- Linking to pages with "Click Here" as the link text
- Background sound files
- Slow load times
- Extensive use of Java and/or JavaScript as these can be irritating and incompatible with many browsers
You may think that these rules go without saying, but if you look at the vast majority of personal web pages on the internet today you will find too many examples of poor web design. There is no reason for this to happen, I hope this guide will help you to avoid the problems listed above.
Index:
Load Time
Layout and Text
How to get attention
Links
Images
You may like to see some examples of poorly designed web sites:
- Example 1
- Example 2
- Example 3
Load Time:
The internet allows people all over the world to connect to eachother and exchange information. The fact that the a document can be retrieved off the internet in seconds is amazing, but at present there is still a noticeable delay.
Let's consider the time it takes to load a page. First, your web surfer clicks on a link which tells their machine to look up the address of the server machine, contact it, wait for a reply, and start receiving data. This process is repeated for every embedded graphic. The time it takes to issue a request for a page is much longer than the time it takes for a screen full of text to load. Thus, you should tend towards having longer pages and fewer of them. If the person keeps having to follow links every few seconds it gets tedious.
To keep your visitors coming back to your web site you must keep load time to a minimum, not only your home page, but every supporting page must load in a quick efficient manner. To accomplish this you must be aware of every image you use, and how large it is. We strongly recommend using a tool such as Adobe ImageReady to reduce the file sizes of your images before you put them onto your web pages. ImageReady is rather expensive though, so you may want to explore other options.
Layout and Text:
Web browsers such as Netscape Navigator and Internet Explorer format a web page's text based on the position and size of images which are to be displayed on the page. This is why it is important to have image size tags (Check out Images to learn more). Web surfers come to expect this so they can see the content of a web page quickly and determine if it is what they were actually looking for without time consuming images being loaded. You do this by using "width=300 height=100" attributes in your images tag. The numbers "300" and "100" represent pixels, a pixel is a single dot on your monitor. You can find out the number of pixels wide and how tall an image is by viewing it in your web browser, which will title your web browser window with the pixel sizes and display the image. A very quick and easy tool to find out the correct size. I should mention that if you get the size wrong, you will stretch the image (not the file, just how it appears on the web page). Now web designers do this on purpose with for example a single pixel colored dot (or transparent dot for spacing) so they don't have to use as large of an image file. However, if you do this to enlarge photos or most any other images, it will look distorted. Also, to keep load time at a minimum, do not use the size attributes to reduce an image's size. Instead, use image editing software to reduce the image to the desired size.
To allow for the various different Web Browsers that people use, it is necessary to use HTML commands in such a way that they will still look right on an older system. There are people with text only terminals such as Lynx, people on black and white monitors, and blind people who speech synthesizers. If you use ALT tags, in general everything will be okay (Check out Images to learn more). Try to avoid designing pages that are to finely tuned to the size of font or width of page as these are highly prone to incompatibility with older browsers, smaller monitors, and a list of other battles that the good webmaster walks a fine line on every day.
To be direct, there is very little reason to use the most advanced features of the latest version of HTML. If you do, you are only restricting your net audience, and most web pages want all the visitors they can get. So, if you need a table, go ahead and use the table tags, don't employ javascript or java to do a task that will load three times as fast even on a machine that can handle it with the basic fundamental HTML tags.
On the other hand, if they are using an old Web browser like Mosaic, and they only see the page once it has completed downloading, then they'll be kept waiting for a long page. Even with a browser that displays the page as it arrives, a background image will display before the appearance of text, so use backgrounds sparingly. A clean solid colored background is always much appreciated on the web, though preferably white, many colors can be used correctly.
How to get attention:
On the internet today, web sites try to catch your eye's attention on an every day basis. You may see the most common form of this on all the big web sites, banners. Banner advertisements keep many "free" service sites open for business, and as time goes by banner advertising has become a calculated art for the trained professional. You can learn almost every form of attention getting from a good banner. Bold or italic text, headlines, flashing text or images.
You should be careful not to overload the reader with attention seeking elements of your web page. If everything is bold, or you have headings on every other line, it will be difficult to read and your visitors may just give up. People are attracted by things that move, and things that contrast strongly with the background. You may be thinking that blinking text would be a great idea, though it does get people's attention it is difficult to actually read and I strongly suggest never using it. It is better to make words bold so that they stand out, but are still easy to read.
Of course, as with links, your words in bold must be concise and meaningful. If the reader sees just those words, they should get the point. Don't have whole paragraphs in bold, and don't make the word 'New' flash, because it has little meaning or use on its own. You should have most of your material in the normal body font, so that the prominent stuff stands out. You should also be consistent in your use of headings or whatever so that the reader can learn to recognize the significance of each style. Besides, if your are consistent throughout your web page it will help pull the site together. Also, if you use the same sets of images for example a header throughout your site they will become cached on your visitors computer thus making load time far less time consuming.
Links:
The magic thing about the Web is that you can cross-reference from any word or picture to any other web page or element, such as an image or movie file. In fact, you can link from a single letter of a word or a pre-defined area on an image, which is called an Image Map, to another web page, or even a section of another page using an Anchor tag. Links are normally underlined, so they draw the attention of the reader automatically. If there are too many of them, people get a bit confused and can't read the text properly. To this end, I suggest that you keep links apart from each other some what when they are being used in a paragraph.
If there are several underlined words which all seem to be the one I want, it takes me a while to point at each, look at the address it would take me to, and make a decision based on the file names. A crucial point about the prominence of links is that a person may only read the underlined bit, so you must have a brief and significant word or phrase for each link. Don't link a whole sentence, because the reader can't take it in in one go, and don't ever have a link saying "click here". I mentioned that before, but I feel it is important to reiterate my point. To key to using links effectively is anticipating what the reader wants to know that isn't contained in that paragraph, and if you don't put a link in will they be able to get to the page easily from somewhere else, maybe in your navigational toolbar? Usually you can work out just how necessary a link is if you read what they will be reading carefully.
If you have a heading linked to something, for example a sub page, the reader may miss it because they mistook the underlining for an aspect of the heading style. On the other hand, a person who does realize it is a link would prefer to keep it there. My solution to this is to have two links; one in the header line (assuming it's brief) as well as the most relevant phrase in the text. If you only want to link part of the heading, there's no problem because the reader will clearly see that some of it is a link and some is not.
Images:
Images offer so much to web page, but they must be used correctly. That means frivolous images should not be used, images should be .gif for animations, buttons, text, and most other web images while .jpg should be saved and used only got photograph like images. Pictures of people, houses, and you name it fall into this category. They are used for these because they do a better job at compressing images that are for example scanned from a photograph.
You must keep in mind though, that pictures take a long time to load compared to text. Having a large amount of irrelevant ones is a waste of time for you and for the web surfer, who probably won't wait around for it to load in the first place. General rule of thumb: One picture for each large screenful of text, or less.
The Electronic Telegraph, which has a good balance, uses small pictures on each story summary to indicate the type of story. So you may wish to have a look at their web site. Notice that I linked to their web site twice, first on their name, and second indicating you could look at it for those of you who missed that.
But even very small images take time to load, spent mainly in making the connection to the server, so you may not want to have many. Having a colored blob, as many pages have for bullet points, is nice, and if it's the same image repeatedly, there's no time overhead for re-using it because the image becomes cached.
You should remember to make the pictures discernible in black and white, unless they must be viewed in color to appreciate them, or they are so trivial it doesn't matter. For readers without graphics, such as those on text terminals, you should always include an alt="[short description of image]" tag in the image command which will appear instead. For graphical navigation menu options, where the words are not repeated in normal text, you will want to use alt tags so the reader doesn't miss them.
It's most unpleasant to see a big picture with a paragraph of text starting with the first line to the right of the picture. If you have a normal illustrated essay page, you should either put the pictures to the side of the paragraph of text (with align=right or left) or explicitly take a new line after each picture with <br> or <p> but I prefer <br> though they accomplish the same effect.
It should also be mentioned that it is always welcomed to have captions on your images. There are numerous ways to do so, I'm going to go over two of them. The first is to have the picture in the center of the page with the caption in italics also centered beneath it. The second, a method that doesn't work with older browsers, is to have a table with the picture above and the caption in the box below.
Large Images:
To relieve web surfers annoyance at slow loading pages, create what is called a "thumb nail" or smaller version of the image or images you wish to display and put that on your web page. Put a small caption explaining to click on the image to enlarge it, all you need to do would be to add a link tag around your small thumb nail linking to the larger one. Some people like to have what are called "image borders" on linked images, I myself find them to degrade a pages appearance and would steer clear on them. However, they are a default for all linked images. If you don't want these thick blue borders to appear, refer to the following example:
<a href="lake1.jpg"><img src="lake1-small.jpg" border="0"></a>
Notice the key element in the above code is border="0".
| Tell a friend about NetaGuru | Comment on NetaGuru | Bookmark NetaGuru This page was last updated 12/12/03 Please read our disclaimer and legal notices. All editorial content and graphics copyright 2002 NetaGuru. Designed and maintained by David Jones and Reid Beels. |
