links |
Web page samples |
Network Information |
Website Design | Repair |
About Perpetual PC's | Contact Us
| home
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 |
|||||
links | Web page samples | Network Information | Website Design | Repair | About Perpetual PC's | Contact Us | home |
|||||
images made with
powered by
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 |
||||||