Site Design

Introduction

We will not get into a lengthy discussion about site design. However, there are a few important topics that need to be mentioned. You may have heard a lot of this before, and many of the articles repeat the same information over and over, however, it never hurts to review! We’re going to order this information as a Do’s and Don’ts list. We will provide links to other articles and tutorials that are pertinent to site design at the end of this page.

Read: Free Will and the Web

When you design a site, you must try to account for as many different types of browsers, search engines, monitors and computers as you can. You can optimize a specific page for a specific Search Engine, but there are also some general “rules” that must be followed for all SE’s. There are “general rules” you should follow to keep your site consistent (WYSIWYG) across browsers and monitors, as well. We will try to include everything in these two lists!

Do’s

  1. Keep your site’s design simple.
  2. Use percentages rather than pixels when setting table widths. Percentages will regulate to each browser.
  3. Remember a search engine will read what is at the top of your HTML page first, not necessarily what is at the top of the browser. Read: Search Engine Design Tips
  4. Make sure that if you use images in a table, your total pixel width for the entire page should not exceed 580 pixels.
  5. Use the 216 colors websafe palette. This is a set of 216 “non-dithering” colors, meaning there will be a little variation from browser to browser and platform to platform.
  6. Choose a color palette – three to four different colors and stick with it throughout your site. Here is a 216 color chart: The 216 Web Safe Color Palette. There are other articles related to graphic design located in our Article Index.
  7. Use only one or two fonts. A font will only work if that font is on a person’s computer. “Times” is probably the most common font and almost everyone will have it. “Arial” is also common to PCs. “Helvetica”, similar to Arial, is common to Macs.
  8. If you are serious about your website then learn HTML. We recommend Sam’s Teach Yourself HTML in 24 hours. (There are a couple of good HTML books that you can order in books. There are many other HTML resources available for free on the internet.
  9. Include directories to get around your site. One of those directories could be located at the top of your HTML page. Many SE’s will crawl your site from one URL that you submit. They need to have links to the other pages of your site in a place where they can easily grab them. The top of the page is the best place to put your most important links.
  10. Make your site as interactive as possible. Use scripts like forms for people to fill out that go to your email, scripts for online tools like searching and discussion boards. See free services for links to free CGI scripts.
  11. Use the same layout throughout your site. Again, it’s consistent.
  12. Use a logo or the same heading on every page so that people know they are at your site. For instance, people could be coming to different pages of your site through SE’s, and you need to let them know where they are.
  13. Set width and height on all images.
  14. Do include contact information somewhere on your site. A contact page is recommended.
  15. If you are selling something, have purchased through credit card services available.

Don’ts

  1. Don’t use frames or if you must, then have a “no frames” edition of your site. Some browsers and search engines don’t support iframes.
  2. Don’t lay out your site so that people must use a horizontal scroll bar.
  3. Don’t use a crazy background. White is best for professional sites. If you must use a background, choose only one and use it throughout your site. People like consistency, keeping the same background reinforces consistency. Also – use a tile background or backgrounds in the columns of your tables. Columns will regulate to each browser.
  4. Don’t make your heading all-consuming, taking up half of the page, people want to get to the meat of the subject quickly.

Make a List and Check it Twice

  1. Use Dr. HTML to check your web pages. Use the “Single Page Analysis” – it’s free. Be sure to bookmark this tool.
  2. When you use this tool, be sure to notice how long the download time takes.
  3. Check your site in both Netscape Navigator and Internet Explorer. Using older versions will reveal some truly amazing things about your site!
  4. Check your pages in both the minimized and maximized versions of IE and Net Nav.
  5. Check your pages on the highest resolution and the lowest resolution on your computer. (Lowest res. usually 480×640).
  6. If you can, check your site on both a PC and a Mac.
  7. If you can check on a smaller monitor (14 inches) and a larger monitor (at least 17 inches).

More Information on Site Design

Research.