Working with Web Colors: You may have noticed that a web page sometime changes colors when viewed on different machines. Why does this happen? It's because different platforms use different color palettes. Both Macs and PCs have 256 colors in their system palettes, but only 216 of them are the same colors. In the past most people did put much importance on MAC browser since majority of browsers and machines were windows based. However, in this age and time, you can't afford to ignore any segment of your market. No matter how small it is. Remember not every color is going to look bad when it is forced by browser. Most of them will still be close to what you originally designed but some of them will look outright ugly.

This article is written to make you aware of the discrepancy that exists in color palettes. As a good designer these things should always be at the back of your mend when working with web colors.

The 216 web colors are in the form of 00 33 66 99 CC FF.

The numbers that are put together like the above example are called "Hexadecimal Colors" (Hexa=6). You cannot select these number from your system palette, but you can specify RGB value in your system palette. RGB is red, green, and blue value. These numbers are used to convert RGB values to Hexadecimal values. For example, blue background color on the left hand side of this page is '006699' which is a web color. So is the color at the bottom left side '99CCFF'. However, navy blue color in the middle is not a web color('002B55').

GIF or JPEG: As you may know, the most widely supported web image graphic formats are GIF and JPEG. This may add to you confusion--when should I use GIF and when should I use JPEG? Depending on what you want to do with your images, you’ll look for specific properties in an image editor. The easy rule to remember is to use GIF format with graphics that you have created on your computer such as horizontal rules, buttons, or animation and use JPEG format when the images are scanned pictures or photographs.
GIF file can contain the maximum of 256 colors (8 bit) or less, which is good for customizing your graphic files. JPEG was built to contain 24-bit (16.7+ million colors) and was developed specifically for photographic-style images. JPEG stores the information of images by keeping track of color changes. The advantage of JPEG is that it can carry a smaller file size than GIF when used in storing photographs and images with a wide variety of shading. But, it will not yield a smaller file when dealing with low color level and details like computer generated graphics.

GIFs also has some special features such as animation, transparency, and interlacing. You can use GIF images to create transparent images to fit on your web page. Sometimes, you have to create a graphic using anti-aliasing or another method--like glows, feathers, or drop shadows--to make its appearance look soft. Doing this, the image looks soft because the edge of image is blended with the background. You have to be careful when making the image transparent because the edge of the image has some parts of the original background surface attached. A simple rule of thumb is to not make a dark background picture transparent is you're planning to use it on a white or light background web page. Try to match the picture background to webpage background as closely as you can.

Screen Size: Your customer will have different screen sizes as well as screen resolutions. There is no way to force someone to use a certain size monitor so you'll have to make your web page do the job to display properly on any screen resolution. Making your page fit in any screen resolution is a must. People will view you page in different kind of screen resolutions. Today, a very few people have a screen resolution of 640x480 but there are plenty of websites from late 90s that were designed with that screen resolution in mind. End result: there are white spaces around these web pages and waste of space. When you design a web page, think of a screen resolution that your target audience is most likely to have. Screen resolution for 17 inch monitor is 1024X768 while for 19 inch monitor it is 1280X1024. You should design your web page for the lower screen resolution and from there put procedures in place to address higher screen resolutions. You can use tables with width set as % of screen size instead of fixed pixel width to accomplish it. However, setting table 100% width of screen, your page will looks differently on different machines. If your page is text based, it would be considered less harmful; but if your page contains graphics, be very careful with % settings.

Working with Doctypes: By using a certain DOCTYPE (strict or transitional) you claim to have correctly implemented a certain (X)HTML flavor:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

When you declare a DOCTYPE, validators take you at your word. When you validate your pages, they check your code against the syntax that you claim to follow. If the markup fails to meet the standard, it gives you error messages. Use XHTML 1.0 Transitional if you have no experience with doctypes. It requires you to use XHTML instead of HTML, and thus forces you to take a step towards standards-compliant markup. On the other hand it allows for more tags and attributes than its Strict brother, so it's easier to implement.

The correct code for using the Transitional DOCTYPE is shown in the declaration above.