Choosing the Right Format For Your Web Images
Flag as a symbol of language - stupidity or insult?
JavaScript Guidelines and Best Practice
You are here: irt.org | Articles | Design | Web Page Creation [ previous next ]
Published on: Sunday 21st June 1998 By: Gary Ransom
This page is a bit of a catch-all page but it covers a number of key issues and techniques. If your aim is to create a "Home Page to be proud of" and one that attracts visitors to spend time at your site, then read on.
Let’s start with page design.
Accepting that beauty is in the eye of the beholder, there are none the less a number of guidelines that every good Home Page will follow.
The first of these is that the overall look of the page should be in sympathy with the content. At the risk of stating the obvious, this means that if the subject matter of the page is visual then the page design must pay a lot of attention to the visual presentation of the content. If the subject is humour then it should look humorous. If it is informative/technical then a more text based look is appropriate (have I made the point yet?) - but that doesn't mean boring. Whatever the appropriate look is, it must look good.
Another important factor in page design is the compromise between design and speed that you will sometimes need to make. I can’t recall the source, but I recently read some research that showed that 30% of internet users will abandon looking at a site if it has pages that take more than 10 seconds to load. If it has pages that take more than 30 seconds then this increases to 90%. You can't do anything about Internet traffic delays frustrating your visitors but page size is completely in your hands.
As a rule of thumb you could expect a page of up to 20Kb, including images, to load in under 10 seconds, even with a slowish modem or when the internet traffic is heavy. However, 2 or 3 screen fulls of text will only use a couple of Kb; the biggest hogs of all are graphics/images. So here’s the rub. You need graphics and images to get the right look but the file sizes can be huge.
An easy solution is to use fewer images and graphics and of course, to make them a smaller size. But a trick often missed is to reduce the graphics/image data. The most common file format used for images and graphics on a web page is the gif. This is very efficient in terms of file size but it is easy to create a file far larger than needed. With the exception of the animated gif on the main page, all the graphics I create are made using a couple of simple graphics packages. Once created, I load each into Paint Shop Pro, (probably the best shareware graphics program there is) and then check the number of colours used. In most instances I am able to reduce the number, an easy process in PSP, without any visible impact on the graphic, but with an enormous saving in file size.
Another point. Many people set their browser to load a page as text only in order to speed up page display. All they will see of your site, if you use graphics or images, is your text plus a number of empty boxes. How will they know what they’re missing? They won’t unless you use the ALT attribute within your image tags. Always use the ALT attribute to provide a description of the missing graphics/image if you think it is at all important for your visitor to know what it is. An obvious example is where you have used a graphic as a button to send the visitor to another part of your page or the web. If the button can’t be seen then the visitor doesn’t know it’s there. Incidentally, you’ve probably noticed that there is a text based site index at the bottom of every page. Why? Well, this is a belt and braces method to ensure that every visitor is able to use at least one navigation tool for the site. The visitor may not have graphics enabled, the server may be slow and images are taking a long time to load or the visitor’s browser may not support the image maps.
Ensuring that navigation is easy at your Home Page will help make sure that your visitors explore more of your site. If you have sprinkled links to other pages throughout your Home Page it is very easy for a visitor to lose where they are and having to hit the back key a dozen times is not a fun experience. Apart from ensuring that your Home Page is logically laid out, it is a good idea to have a link back to your main page on every page, or even a site index or menu on every page if it’s not too large.
If you’ve taken all that on board there is one last point to consider. Don’t assume that everyone will be able to see your Home Page just the way you designed it. Apart from the points above, your visitor may have a system and browser set up that’s quite different from yours. An old browser that won’t support the latest HTML features. A screen set to a different size/resolution than yours. And often overlooked, they may not have the font that you’ve specified installed on their system or they may have set their browser to always use their preferred font. You can take this too far but I certainly think that it is worth designing your Home Page with this in mind. Keep it simple and more people will see your Home Page as you designed it to be seen.
For further advice on Home Page design, have a look at these sites:
For useful graphics, buttons and clip art try:
Next Publicise...
>Choosing the Right Format For Your Web Images
Flag as a symbol of language - stupidity or insult?
JavaScript Guidelines and Best Practice
Netscape and mozilla.org give birth to Gecko