Tips for Developing Your Web-Site.

Separating Content From Presentation

When Tim Berners-Lee et al set about defining the world wide Web, they envisioned it only as a simple way for scientists to share information and exchange data at various locations and using disparate systems. They did not see a compelling reason to separate the presentation from the content. Not in their wildest dreams did they envision just how ubiquitous the Web would become. Web sites are not only ubiquitous, but are used for much more than sharing data. Web sites are often very large and maintaining them is a big issue. Maintenance is vastly easier if the presentation is separated from the content. So the World Wide Web Consortium (W3C) corrected the problem with HTML recommendations that allow the separation of presentation and content. In addition, many other improvements have been adopted to ease the development and maintenance of Web sites.

Here are a few suggestions for good site development:

• Make sure you use well formed HTML tags -- for example, close tags. If you use a <p> tag, make sure you close it with a </p> tag.
• For new development, conform to XHTML standards even though you may use the HTML 4.01 transitional DOCTYPE. For example, use lowercase letters, enclose attributes in quotes (e.g. "10px").
• Don't use deprecated tags (tags that the W3C has determined will not be supported in the future, like the <font> and <center> tags).
  
  Unfortunately, many web development packages, like Microsoft Frontpage™, load the HTML code with unnecessary deprecated tags. I often see the <font> used on every single line of code. This is not just unnecessary, but it will garbage up the code, make the page load slower, and generally make it difficult to maintain the site.
• Do make heavy use of CSS (cascading style sheets). This is the main means of separating the presentation from the content.
• Design semantically -- that is, use tags as they were intended. For example, if it's a list, use list tags, if it's a paragraph, use <p> or <div> tag. Use tables only for displaying tabular data. This is more difficult to do in you don't use Cascading Style Sheets. CSS gives you complete control over the appearance of page elements which in turn results in you choosing tags because they describe the structure and meaning of elements on the page (i.e. the semantics). This is important for a number of reasons.
  1. You can easily find things when you're making changes to the content. The code is clean and actually makes sense, as if you were looking at a newspaper. This makes maintaining the site much easier.
  2. Search engine optimization (SEO) is greatly enhanced because it increase the site's keyword density which is an important metric for ranking.
• Don't use tables except where necessary (i.e. for displaying tabular data).
  
  

  In the early days (before CSS), graphic designers discovered that they could use tables to gain significant control over the presentation of content to users. Web designers used tables for positioning and almost everything else.

  Why are tables so bad?

  1. They result in load times that are longer than necessary.
  2. They encourage the use of inefficient "placeholder" graphics that further slow performance.
  3. But most important, maintenance can be a nightmare. Even minor changes "break" the entire layout.

  Fortunately, with modern HTML (XHTML) and particularly CSS (cascading style sheets), tables are no longer necessary for design purposes. I've seen very elegant sites that do not have a single table in them. Nevertheless, tables are now so entrenched that you'll find them overused even in major websites. This site, being started before I knew better, employs unnecessary tables, although not that many. I haven't gotten around to cleaning it up, but for new development, I limit their use.

  The following two examples show that you don't need tables for graphic placeholders or to accomplish positioning.

  • A Word From The President with no tables
  • A Word From The President using tables

[ Return to Top ]

Search

Building a great looking website is only half the battle. You need to get the people to your site. One way is to get the search engines to find you and display your site on the first page.

Here are a few suggestions for getting good positioning:

• Don't try to game the system, that is -- trick the search engines by excessively duplicating key words, by using white text on white backgrounds, extra small print, etc. Search engines are too smart for that and if you get blacklisted, you're dead in the water.
• Do use relevant keywords in your meta tags. And don't have hundreds of keywords in the meta tag. Avoid overly general keywords like Real Estate, or Foods. You'll be buried on the 10,000th page of the search.
• Use relevant words in titles and headings.
• Have these words show up in the body of text.
• Don't use anything related to pornography in keywords tag in any other part of the code in the hope of drawing hits.
• Don't use competitor names in the keyword meta tags.
• Focus on content. It's the best way to get found.
• Do get linked up to other sites, but make sure those sites are relevant to your site.
• Keep the website as semantically correct as possible -- where tags are used according to their purpose (see above).

[ Return to Top ]

Colors

Good looking sites make good use of colors. Avoid garish colors. Avoid black (even dark in my opinion) backgrounds. The exception being Band sites, movies sites, sites with lots of video and less printed content. But if printed content is important to your site — and that's just about every site — then make reading from the screen as pleasing and easy on the eye as possible.

What other considerations are important with regard to color? In the early days of the Web, Web developers limited their choice of colors to those determined to be "Color Safe" or "Browser Safe", sometimes referred to as the 216 Netscape palette, as well as a few other names. Browser safe colors are a set of 216 colors that will faithfully be reproduced on all browsers for both the MAC and the PC. Where does the number 216 come from? Many computers used to be limited to 8 bit color, meaning there are 256 possible colors. Of these colors, it was determined that 216 look approximately the same on both a standard MAC and a standard PC. So by sticking to these 216 colors you would guarantee that the site's look would be depicted as you intended it to be.

Almost all PCs and MACs today have true color, so the importance of color safe coding is not particularly relevant. Here is a table of safe colors (I threw in some greys as well).

In addition, you may use the color name rather than the HEX code to reference colors. Here is a table of color names that are supported by most browsers.

The HTML color code is coded as a 6-digit color code (in hexadecimal) where each pair of digits represents one of the RGB (Red-Green-Blue) colors. The value for each pair can range from 00 to ff (which is 0 to 255 in decimal system). The 3 pairs of color codes are combined to form a particular color. For example "#ff0000" represents the color red, "#00ff00" represents the color green, and "#0000ff" represents the color blue. An HTML color code of "#000000" represents black and a color code of "#ffffff" represents white. Browser-safe colors can only contain 00, 33, 66, 99, cc, and ff values in each of the paired digits of the RGB spectrum.

The main thing is to keep the site pleasing to the eye and make reading easy. Obviously, that means avoiding writing in one color and having the background too close to that color which makes you squint to read it. Also, keep in mind that a significant amount of the male population is partially color blind, so again, don't use shades that are too close together. Common sense should be your guide, but ask others to review the site for you.

[ Return to Top ]