Web Page 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.
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.
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.
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.
Next; Web Page Design Do's and Don'ts.
Feel welcome to reprint my articles as is. Please don't change them. All I ask in return is a
credit link to my site. Thanks.
