Website Design Checklist


Armed with your plans and design ideas, you are ready to start buidling your website. Whether you choose to develop your site yourself, or whether you have your site developed by a developer, there are elements of design that you need to be aware of.

is it browser compatible 1) Browser Compatability.
Not all code is compatible with all browsers. You will want your website to load in Netscape Navigator, Internet Explorer, Firefox and the current AOL browser. The surest way to verify this is to maintain multiple browsers on your computer, or to use a browser testing service to verify the results. Do not use html testing tools to verify your website's appearance. I have seen testing programs state that a website is compatible with multiple browsers, when in fact the website in question loaded a blank white page in other browsers. Robot programs do not have eyes and cannot "see" what your potential customers will see.

is it browser compatible 2) Platform Compatibility
You will also want to make sure your website loads properly on both Mac and PC platforms. Be sure that your website uses a browser safe color palette, not a windows safe palette. If you use a windows-safe palette, many of the colors may not display properly on a Mac because it does not run on Windows. In addition, the text/font output on a Mac is smaller than on a PC. That means that a size 12(pixel) font, on a Mac, will look 40% smaller than that same size on a PC. Not all of your visitors will know how to change the font sizes in their browser. By the same token, if you are designing on a Mac, don't make your fonts too large or they will end up looking even larger, and amateur, on a PC.

3) Screen Resolution
With the variety of monitor sizes that are available on the market, you want to ensure that your website displays properly across any screen resolution. There is nothing quite so unprofessional as a website with a background that tiles and text that scrolls infinitely across the on a large monitor. You can check your website by changing the resolution of your monitor, using your desktop properties.

typewriter 4) Fonts
When developing your website, remember that not all people will have the same fonts installed on their computer as you do. If you specify a font style that the viewer does not have installed on their system, the viewer will see a "default" font that looks much like a typewriter font.

Yes, that means your beautiful Shelley Allegro scriptfont will look like something Grandmother pounded out on the typewriter 25 years ago. The only failsafe way to include specialty fonts is to render them as an image. Keep in mind the search engines can't read those, so use sparingly and with alt tags that the bots can read.

5) Colors
When building your website, be sure to use background and font colors selected from the browser safe palette. This will ensure that people actually see the chocolate brown text on a cream background that you intended them to see.. instead of orange text on a dull green background.

In addition, website design statistics indicate that colors that cause retina strain will cause people to leave a website faster. It is not a wise idea to create a website with a brilliant yellow or orange background because the eyestrain will reduce the amount of time anyone spends at your website. The easiest color combinations on the eye are black or dark text on a white/pale background.

6) Navigation
Good navigation is crucial. Your navigation system should not change from page to page. After all, when you walk into a store, you want to know that they aren't going to move the exit door on you, don't you? If your potential customers get confused trying to navigate your site they will usually solve the problem by leaving.

In addition to your top of the page navigation, always include a text footer. The text footer becomes doubly important if your upper page navigation uses javascript and the visitor has javascript disabled on their computer system. Also include a site map, for your visitors and for ease of indexing for the search engine bots.

7) Images
Many people mistakenly believe that images are the sole reason for slow loading pages. Not true.

This image intensive site loads in less than 22 seconds on 56k and 7-13 seconds for those on ISDN or cable.

There are many html creation programs that add so much superfluous code that they create more page bloat than a well compressed image would cause. However, images should be compressed or diced for quick loading. Ideally, all images on your website should be 10K or smaller. A good image optimization program can reduce the size of most images to acceptable size. Extremely large images can be diced.

Dicing is simply cutting the image into smaller pieces and re-assembling it in a table. Specify height and width attributes in your image tag, too. The height and width attributes will allow your images to load much more quickly and efficiently because they "tell" the browser how much space to leave for the image. Have you ever seen a website where the text jumps around until the page has fully loaded? In most cases, that happens because the browser does not "know" how much room to leave for the image until the image has finished loading.

In addition, remember to specify a name for the image in the "alt" tag. This provides a description for search engines indexing your site. It's also helpful for visually impaired people that use screen readers to tell them what the pictures on the site are.

This article was written by, and republished with the permission of Linda Caroll.