logo

Networks.       Web Site Design.
San Juan Islands


WEBSITE DESIGN   and usabitity issues

Why do you want to display a webpage or website?

This is a very important question to ask because it will lead to the design that will give the best results. If you want to display your artistic abilities or your proficiency at animation, or your tendency to spend lots of money and time on expensive trendy software, or your ability to hide links in cute stylish pictures so people can wander around the pages with their mouse cursor looking for the links; then providing information through any kind of text or navigation through your website is probably not too important. Have fun spending money and looking cool - lots of people do that.

However if you have a business, you most likely want to sell things; and to do that you must have customers. If you are depending on your web site or web pages to bring you customers; of course you want it to be the best website; so the site should be impressive. Your customers are looking for information about your products so they can make a decision. Does it make sense to make it difficult for them to find the information by hiding links behind difficult-to-produce images that seem to you to be intuitive and show how good you are? NO. THAT IS STUPID - unless you just like spending money to show off and waste network space. Your links should make sense in the language of the website and should be relevant to the subject linked to. Yes, make the site look good and have nice images well placed and put together nicely but DON'T MAKE IT HARDER FOR YOUR CUSTOMERS TO FIND THINGS THAN IT HAS TO BE. Your links should be underlined - that is the convention. Don't underline text to accent it, if you want to bring attention to an idea in text make the text bold, or put it in italics and make it bold but don't - I repeat DON'T underline it unless it is a link.

If you are using the web to provide information to the public or to students you must be even more careful. A significant number of users do not use the common proprietary browser (see illustrations below) so you MUST make your site cross browser compatible. If you do not, you are excluding others; or worse, forcing them to adhere to expensive monopolistic proprietary software. You must also insure that the information you present is easily found and not hidden behind cryptic icons that only make sense to a small circle of friends or programmers. Your site has to work for everyone - period. A good way to do this is to adhere closely to w3c standards.   What is w3c and why is it important?    find out more about w3c standards

If you insist on making your own rules and conventions for your particular custom artistic website then as is suggested on this webpage define your link style clearly on all pages and be consistent with that style througout the entire site.

Here is an example of a confusing navagation style. It looks really cool but what is a link and what isn't? It's a search engine for crying out loud! At an artist's site or personal page the cute little boxes might be nice; however, when I am looking for information the last thing I want to do is waste time playing   find-the-link-with-my-mouse-cursor!!!  This pattern, somewhat easy to decipher on this rather simple page, is found on many websites with hundreds of links - some of them underlined and some not - some pictures some not - making it extremely frustrating to find anything. Here is an example of previously poorly designed website that looks really nice. It has recently been completely revised but still has some problems with readability - and its an online newspaper!!! There is now a fairly consistent link style with the exception of their notice about the changes at the top of the page; and the weather, traffic, webcams, and obituaries links in the black portion change to an unreadable color when you mouse over them - red on black - very hard to read. . . wonder how long till they change that?
Updated 2007-07-17
Most recent update: 2009-12-09

Here are links to some other newspapers that have confusing links: (after over 2 years they still have confusing navagation)
From Auburn California: Some pics are links some are not. Some links underlined some not.
From Augusta Georgia: Some pics are links some are not. some links underlined some not.
From Aurora Nebraska: Some pics are links some are not. Some links underlined some not. Links at the top are hard to read.

This is a link to a large list of online newspapers in the U.S. . I only went through 1 letter and found the above examples, how many more are there. . . ?

Now look at this: Here is an example of excellent navigation style Links are underlined, navagation is clear and pictures in other pages on the site that are links are clearly marked as such. Here is another example of good navigation style

To make a website work you must know who you are trying to reach, what operating system they are using, what browser they are using, and what display resolution they may be using. The way colors are displayed is very important to understand. The chart below shows colors that can be displayed on a wide variety of systems with reasonable consistency. A chart showing the 216 websafe colors can be found here. and a Websafe color chart with background color test can be found here. If you use custom colors they most likely will not be the same on all systems. Some custom colors may look very unpleasant on some of the more basic systems.

The US is far behind the rest of the world in bringing high speed internet technology to individual citizens. It is estimated that China will surpass the US this year in sheer numbers of people with broadband access. Many people in the US don't have access to high speed internet service. Currently it is about 22% and this is NOT broken down necessarily by income level. If you have a page or site that is slow to download you will miss many customers. A fantastic site filled with graphics and animation will likely only annoy many people because they must wait too long while everything downloads; and furthermore this kind of bandwidth on dial-up lines further slows down everyone else. If you are responsible for a public service website such as an educational or government site you are hurting many people by allowing a site designed for broadband access to be your only contact. This is EXTREMELY IMPORTANT to understand - just because you have DSL or cable does not mean everyone else does. It is best to have a site that will load well on dial-up connections. Currently, DSL only reaches about 3 miles from a central office; beyond that, sorry no convenient, inexpensive high speed access unless you use cable which slows down if too many people are using the line.

On the other hand if you know your audience has high speed access then you are probably wasting your time with pages designed for dial-up access with limited speed. We can help you with planning a site and can advise you how to go about getting the best results for your given audience. If you are interested in finding out how much it would cost to have a website done, email your requirements to us and we will send you an estimate. We do not charge for estimates.



page last modified 2006-10-08

The screenshots below, illustrating the browser diversity that must be considered, are from the access log of this website (the one you are viewing now) which gets over 98,000 hits per month: (there are no active links in the screenshots - I have removed the underlined portion)


web log browser summary
summary of web stats


Valid HTML 4.01!

links | Web page samples | Network Information | Website Design | Repair | About Perpetual PC's | Contact Us | home

images made with  the gimp image  powered by  Linux logo     Linux is a registered trademark of Linus Torvalds
HTML Color Names
view all 216 web safe colors on any web safe background color at one time on one page.

AliceBlue #f0f8f3   Dark Purple #871f78  
Antique White #faebd7   DarkSalmon #e9967a  
Aqua #00ffff   DarkSlateBlue #6b238e  
AquaMarine #70db93   DarkSlateGray #2f4f4f  
Azure #f0ffff   DarkTan #97694f  
Beige #f5f5dc   DarkTurquoise #7093db  
Black #000000   DarkViolet #9400d3  
Blue #0000ff   DarkWood #855e42  
BlueViolet #9f5f9f   DimGray #545454  
Brass #b5a642   DustyRose #856363  
BrightGold #d9d919   Feldspar #d19275  
Bronze #8c7853   FireBrick #8e2323  
Brown #a52a2a   ForestGreen #238e23  
CadetBlue #5f9f9f   Gold #cd7f32  
Chocolate #d2691e   GoldenRod #dbdb70  
CoolCopper #d98719   Gray #c0c0c0  
Copper #b87333   Green #00ff00  
Coral #ff7f50   GreenCopper #527f76  
Crimson #dc143c   GreenYellow #93db70  
Cyan #00ffff   HotPink #ff69b4  
DarkBlue #00008b   HunterGreen #215e21  
DarkBrown #5c4033   IndianRed #4e2f2f  
DarkCyan #008b8b   Indigo #4b0082  
DarkGoldenrod #b8860b   Ivory #fffff0  
DarkGray #a9a9a9   Khaki #9f9f5f  
DarkGreen #006400   Lavender #e6e6fa  
DarkKhaki #bdb76b   LightBlue #c0d9d9  
DarkMagenta #8b008b   LightCoral #f08080  
DarkOliveGreen #4f4f2f   LightCyan #e0ffff  
DarkOrange #ff8c00   LightGray #a8a8a8  
DarkOrchid #9932cd   LightGreen #90ee90  
LightPink #ffb6c1   Pink #bc8f8f  
LightSteelBlue #8f8fbd   Plum #eaadea  
LightWood #e9c2a6   PowderBlue #b0e0e6  
Lime #00ff00   Purple #800080  
LimeGreen #32cd32   Quartz #d9d9f3  
Magenta #ff00ff   Red #ff0000  
MandarinOrange #e47833   RichBlue #5959ab  
Maroon #8e236b   RoyalBlue #4169e1  
MediumAquaMarine #32cd99   SaddleBrown #8b4513  
MediumBlue #3232cd   Salmon #6f4242  
MediumForestGreen #6b8e23   SandyBrown #f4a460  
MediumGoldenrod #eaeaae   Scarlet #8c1717  
MediumOrchid #9370db   SeaGreen #238e68  
MediumSeaGreen #426f42   Sienna #8e6b23  
MediumSlateBlue #7f00ff   Silver #e6e8fa  
MediumSpringGreen #7fff00   SkyBlue #3299cc  
MediumTurquoise #70dbdb   SlateBlue #007fff  
MediumVioletRed #db7093   Snow #fffafa  
MediumWood #a68064   SpicyPink #ff1cae  
MidnightBlue #2f2f4f   SpringGreen #00ff7f  
MintCream #f5fffa   SteelBlue #236b8e  
MistyRose #ffe4e1   SummerSky #38b0de  
NavyBlue #23238e   Tan #db9370  
NeonBlue #4d4dff   Teal #008080  
NeonPink #ff6ec7   Thistle #d8bfd8  
NewMidnightBlue #00009c   Tomato #ff6347  
NewTan #ebc79e   Turquoise #adeaea  
OldGold #cfb53b   VeryDarkBrown #5c4033  
Olive #808000   VeryDarkGray #cdcdcd  
Orange #ff7f00   Violet #4f2f4f  
OrangeRed #ff2400   VioletRed #cc3299  
Orchid #db70db   Wheat #d8d8bf  
PaleGoldenRod #eee8aa   White #ffffff  
PaleGreen #8fbc8f   Yellow #ffff00  
PaleTurquoise #afeeee   YellowGreen #99cc32  


links | Web page samples | Network Information | Website Design | Repair | About Perpetual PC's | Contact Us | home