How important is color in web design?
"Research reveals all human beings make a subconscious judgment about an item within 90 seconds of initial viewing and that between 62% and 90% of that assessment is based on color alone."

All too often, I see a great design concept with a poor choice of colors. Part of what makes a great web design “great” is layout, typography and color. When each of these aspects work to compliment each other, great design is born.

Colors are seen as warm or cool mainly because of long-held (and often universal) associations. Yellow, orange and red are associated with the heat of sun and fire; blue, green and violet with the coolness of leaves, sea and the sky. Warm colors seem closer to the viewer than cool colors, but vivid cool colors can overwhelm light and subtle warm colors. Using warm colors for foreground and cool colors for background enhances the perception of depth.
Source: Pantone,Inc.

Color for Web sites is just like food color for food. Color makes both better. Learn to add color to your Web site with HTML and a color chart. One of the first things people notice about your Web site's design when they visit your Web site is the color so make sure your colors stand out.

Color is a very important feature of your Web site. If you ever took a cooking class then you know that one of the most important things to consider when preparing a meal is color. The same is true when designing a Web site. If you put chicken with mashed potatoes and cauliflower you will have a very bland looking Web site. You need to add some color.

On the other hand if you use fluorescent food coloring to have your site be seen from a distance then you will have a lot of people who will not want to eat it and will never come back to your kitchen.

The trick is to find that happy medium where the colors compliment each other and make your pages look simply scrumptious. This all may sound kind of silly to you but it's true. If your site is boring or if it is to bright people will not want to look at it and it will be thrown in the trash with the leftovers.

When I wrote Another Browser To Worry About: WebTV I discovered that the WebTV people recommend using a dark background with light colored text. They claim it's easier to see and easier on the eyes when someone goes to read your page.

Although a dark background with light text may be easier to read most Web sites are done just the opposite. One reason for this is that throughout time we have written on light or white colored paper with dark colored ink and that's what we are used to. Another reason is that the default color for a Web page is white and the default color for text is black and sometimes it's just easier to not change the colors and go with standards.

No matter which colors you decide to go with make sure you look at your pages with a skeptical eye before publishing the finished version to make sure it is pleasing. Courtesy: About.com

Using Web Safe Colors: Color is often a key aspect of artwork. However, the colors you see on your artboard aren’t necessarily the colors that will appear in a web browser on someone else’s system. You can prevent dithering (the method of simulating unavailable colors) and other color problems by taking two precautionary steps when creating web graphics. First, always work in RGB color mode. Second, use a web-safe color.

GIF: Graphics Interchange Format (GIF) contain fewer colors than other image formats and load faster in the browser, they are best suited for Web graphics with a limited color range, such as site navigational buttons and headers. It is mainly used because of it's background transparency property.

JPEG:
Joint Photographic Experts Group (JPEG) files use lossy compression. While most users won't be able to see much difference between a moderately compressed JPEG and the original uncompressed image, a heavily compressed JPEG will appear blurry and make individual pixels noticeable. As the "P" in its acronym implies, the JPEG format is optimized for use with photographs.

PNG:
Portable Network Graphics (PNG) Originally developed to replace the GIF format. It employ lossless compression. But unlike GIFs, PNG files can be saved in 24-bit mode to achieve a much wider range of color

Always do image compression

Since image files can be quite large, many formats employ some form of compression, the process of making the file size smaller by altering or removing information. If you choose a format that uses lossless compression, no data will be removed from the image, resulting in a file that appears almost identical to the original. On the other hand, if you use a format with lossy compression you permanently eliminate certain information in the image but do so in a way that's not obvious to most people.

Image Alt Attribute

Always remember to provide textual alternatives when using graphics. This is to provide for text-only or image-disabled Web browsers & indexing agents. Besides there may be cases where some web visitors may never turn your website images on.

When the page loads and the image size is already defined (ie. you've used the height and width tags), the browser knows where everything will be before the images are loaded. Otherwise the page has to wait and load the images before the text. Same goes for tables, so try to use width tags when possible on those as well for a speedier page.

Call up decorative images through CSS

It's possible to present images as part of the background, called up through CSS. If you've got an image that's 200px by 100px you can use the following HTML code: <div class="pretty-image"></div> And this CSS: .pretty-image
{
background: url(filename.gif);
width: 200px;
height: 100px
}

Browsers basically download background images after everything else. By using this technique, your text will load instantaneously while your image is still downloading.

This technique disables the ALT attribute so if you really want to have one then replace the above HTML code with this: <image src="spacer.gif" class="pretty-image" alt="description" />

While images can greatly enhance the look of a site they can really slow it down if there are too many. Try to decide if all your images are really needed (quite a few nice effects can be done with css, so sometimes images are unneeded.)

Don't Scale Images in HTML

Don't use a bigger image than you need just because you can set the width and height in HTML. If you need image width="100" height="100" then your image should be 100x100px rather than a scaled down 500x500px image.

Minimize the HTTP Requests:

Use External JavaScript Files: Don't embed your javascript, instead use external javascript files to speed up the download of your Web pages.

Use relative call-ups: Try to avoid absolute call ups as they take up more space. An example of an absolute call up is: <a href="http://www.URL.com/filename.htm">. Much better would be <a href="filename.htm">. But what if some files are in different folders to other ones? Use these shorthand properties:

Use / at the end of directory links: <a href="http://www.URL.com/directoryname/">

Why? If there's no slash at the end of the URL the server doesn't know if the link is pointing to a file or to a directory. By including the slash the server instantly knows that the URL is pointing to a directory and doesn't need to spend any time trying to work it out.

Use shorthand CSS properties: You can use the following shorthand properties for the margin CSS command. Use: margin: 2px 1px 3px 4px (top, right, bottom, left) ...instead of margin-top: 2px; margin-right: 1px; margin-bottom: 3px; margin-left: 4px

I'm not a big fan of using tables for layout anyway (I'm one of those people that believes content and presentation should be separate.. but thats another tip page). With that said, if in your templates tables seem necessary (or the easier way to do it), try to avoid nesting. Why? When you place a table inside another table, it takes a lot longer for the browser to work out the spacing since it has to wait to read the entire html and then work out the layout. If at all possible, try using CSS to create the columns on your page.

If you do use a wysiwyg editor, most times the will add useless code to your pages for example, many will leave empty tags (ie. <font> </font>). Removing any of those excess tags will not only speed up your load time, but make you pages validate a lot cleaner

Don't include white Spaces and line returns: Once you've moved all the scripts and CSS to external locations and optimized your graphics what can you do? Whitespace, whether you put it in deliberately or because of programming adds a lot of it, causes a longer download time.

Don't put too many HTML Comments: to Speed Download Time Comments can be as big or small as you write them, but even small, they slow Web pages down.

Don't embed your style sheet: CSS styles embedded within the page can make up large chunks of code. Switch to external CSS for more standards compliant code that downloads faster.