Home Web Design Programming Fairlight CMI Soap Box Downloads Links Biography About... Site Map

The Holmes Page WEB DESIGN TIPS

Web Design Design Tips Programming Tricks Web Page Makeovers



BACK TO
WEB DESIGN

Here are some things to consider when designing a Web site. 
Some of these tips may seem to discourage the use of images. That is not the intent. Instead, you should consider carefully every element on your pages, whether it is text, image, sound, or other media. Does the element belong? Is it really needed to make the point? Can it be optimized, reduced, replaced? 
A future of the Windows Explorer is going to blur the location of files and resources as PCs become more connected via the Web. But, unfortunately, the Web is not ready for this. 
Because the World Wide Web is so popular, transfer speeds are very inconsistent. Rarely does the speed equal the theoretical maximum of the modem (without compression about 1400cps for a 14.4k modem, and 2800 for a 28.8k). More commonly, speeds range from 800cps down to 40cps because of congestion or maintenance. 
The modem is not the bottleneck. 
As more people get on the Web, with streaming video, Internet phones, Web TVs, and corporate virtual private networks, the situation is going to get worse with all of the bulky data flowing across the wires. 
Certainly we all have to push the limits of PC technology to achieve advancement, but just as surely we also need to work within the boundaries of current technology. 
That is the point these tips address: make the most of what we have now.



First, something to keep in mind (and avoid) at all times:
inscrutable (in-skroo'ta-bl), adj. not to be penetrated by inquiry or reason; incomprehensible.
Remember, however, that rules are meant to be broken...



Organization

 
Your site's structure must be clear   The Web is a huge and complex thing. It can be overwhelming and difficult to get oriented. For your site, use a clear hierarchy of pages to organize your information. For example, although there is some great stuff at the David Siegel site, the initial "menu" grid leads to many more grids with lots of repeated choices, no explanations, and no clear organization. Some of the principles discussed in the Yale C/AIM WWW Style Manual could be applied to Dave's site. 
Include a site map   This will really help your visitors get a handle on your site, and it will allow you to have a more complex (but understandable) site. Take a look at the site map for The Holmes Page. 
Eliminate "Under Construction" references.   All web pages are under construction all the time, by definition, so why bother? The Web is a dynamic medium. People expect change on the Web and they get a little put off by out-of-date information. 
Too much change is a bad thing   Some sites have totally new information on them every day, some change every hour. Some sites are different every time you click "reload". This can be fun and exciting, but the visitor does not develop a feeling of stability. The site becomes hard to understand. 
Use Linear and Hyper Navigation   The classic example of linear navigation is the book: start at the beginning and read through to the end. In contrast, the Web was envisioned as a interconnected collection of documents that could be accessed in any order. The "http" you see at the beginning of every link stands for "hyper-text transfer protocol". Although the difference between books and the Web may seem clear, many sites would benefit from a linear approach, just as many books rely on hyper navigation. Consider an encyclopedia -- it is not read from front to back. Instead, topics are read as needed. Conversely, on-line fiction is read in a linear manner. Linear is the clearest method, but hyper allows immediate access. Use a combination of the two for best effect.


Presentation

 
Say it with text or graphics, not both   Many pages have a little graphic of a mailbox with a bit of text explaining that it is a mailbox. Both items point to the same link. Eliminate either the picture or the text. If the picture isn't clear, get rid of it -- don't explain it. 
Use the ALT option for images   For various reasons, many visitors choose not to view images. There is a good discussion of when and how to implement the ALT option in Use of ALT texts in IMGs by A.J.Flavell at Glasgow University. 
Turn borders on around buttons   Although text links change color to indicate whether they have been visited, graphic links often do not have this feedback. Turning on the border around a "button" shows the visitor this important information. 
Don't use a black background   Some sites use a black page background. While this may be legitimate as a political statement or an indication of protest, it is not an easy thing to see. Most average monitors do not have enough clarity to display the single pixels that make up text at sizes smaller than 16 points. If you insist on a black background, use bold text. Printing pages with black backgrounds is also a problem. 
Choose the right text for a link   Rather than saying "Click here for more details", why not try "The Details page contains more information". The idea is to emphasize the content, not the mechanism. The Links section of Sun's Guide to Web Style covers this concept further. 
Include the WIDTH, HEIGHT and ALT tags in images   These tags make the page more presentable to the visitor while it is being downloaded, and it appears faster.


Optimization

 
If you use a graphic once, use it again.   Browsers can be configured to cache a certain amount of information from a site. Most likely, there will be enough room in the cache for all of the elements at your site. You can improve performance by re-using elements, because they will come from the cache rather than over the modem connection. 
Put the "Text Version" button at the top of the page, not the bottom   Putting it at the top ensures that it will be the first thing to appear so that the visitor can immediately click on it. If it is at the bottom of a complex page, it will not appear until all elements on the page are loaded. By then it is too late. 
Think in seconds, not bytes   A useable site should be fairly quick. Ideally, a home page should take less than about 30 seconds to fully load. For estimating the time-to-load for your page, use a pessimistic 400cps (characters per second). The total size of all elements on a page (HTML and images) divided by 400 gives the number of seconds. If it is less than 30 then you are doing really well. Pages deeper in your site can take longer to download; at that point it is clear that the visitor is willing to wait. 
Don't use those "Netscape Now!" or "Free Internet Explorer" images   These little rectangular pictures are a waste of resources. They are usually copied locally to each Web site that uses them. This means that there are multiple copies of them in the visitor's cache from many different sites. This is a waste of download time and of disk space. If you must display them, then the <IMG SRC> tag should point to the original image on the Netscape or Microsoft sites. 
An image that says "Click me..." is a waste   Such an image has no purpose other than to lead the visitor on to another page. Either replace the image with text, or use a better image that visually describes what is ahead. Then re-use the image in other locations throughout your site, such as in the heading of the destination page. 
Reduce the number of colors in an image   Many sites contain images that use too many colors. For example, the Socan site uses a background gif of the Socan logo with an embossed effect. The original file utilized 256 colors and was 10390 bytes in size. Reducing the color palette to 16 colors shrank the file to 2356 bytes with no visible difference. Actually, it looked better because it loaded four times faster! 
Use a group of smaller images as a menu, rather than a large image   Although there is more overhead with many small images (due to the handshaking that takes place on every http connection), the small images can be re-used as identifying graphics at the top of the rest of the pages. Also, an individual image in a menu bar can be selectively replaced with a "pushed-in" version to indicate the page you are on, or a "dim" version that indicates that the option is unavailable.


Home Web Design Programming Fairlight CMI Soap Box Downloads Links Biography About... Site Map

Site Map Send comments about this site to Greg at gregh@ghservices.com
All pages copyright © 1996-2005 GH Services™   Created 1996/10/01   Last updated 2005/01/03
All trademarks contained herein are the property of their respective owners