It’s up to the web designer/developer to make sure the web site displays or degrades gracefully on all major web browsers: Firefox, Opera, Chrome, Safari and Internet Explorer (IE6, IE7, IE8). Reaching that goal seems daunting if not impossible.

How can one make all those web browsers get along?

For years now web developers have been pointing the accusatory finger to Internet Explorer: J’ACCUSE!!

Well, a few years back Netscape 4 was sitting on the trial bench, accused of slowing down the web. These days, all eyes are on IE6 . Internet Explorer 6 does not support most of the new HTML & CSS features which take web page design to the next level: CSS round corners, PNG graphics, and the CSS :hover pseudo-selector is limited to the anchor tag.

Those are just a few of the potholes along a winding road. The need to make websites display well on all major browsers, despite all the shortfalls mentioned earlier, puts a brake on how far a web designer/developer can push the envelope. More and more time is spent on a given project tweaking and “hacking the code” to be compatible with IE6 and others. And that “my friends” can not only be a real nightmare for the web designer, it’s a big impediment to the evolution of the web.

Since you will have to include IE6 anyway in the list a web browsers to check your website again, here are a few nuggets to save you tremendous web development time and frustration. At any stage in your web design process (HTML/CSS):

• Avoid applying padding to main CSS layout containers (div tags) at all cost
• Use margins in the nested container to simulate the left and right padding on the closest parent container.
• Wrap the text in paragraph (<p>) tags to which you applying margins to achieve the padding.
• IE6 doubles the margin of the floated element on the direction of the floating (left or right)
• Always specify a width of any floated HTML element
• Apply both the float and inline display properties to list items of your horizontal navigation
• If you must hack, create a separate CSS style sheet where you would group all the styles aimed at IE6 and use the Internet Explorer’s conditional comments.

At the end of the day/project, web development is all about matching the capabilities of the end-user’s web browser. It’s less about the artistic talent of the graphic artist or the programming skills of the web programmer.

“This web site is best viewed in web browser X or Y” is just an excuse to avoid spending extra time checking your design compatibility with other major web browsers. It might seem cost effective at first but it does not make business sense: you are loosing potential customers user web browsers different than your target browser.

All you need is to preview your site design at crucial steps during the web development process to fix potential problems early on. In the end you will achieve a design that will accurately display your website on all major web browsers. It may also be time to target smartphones as well.

IE6 is still here and breathing. We just have to deal with it.

However because of IE’s lack of support of new CSS and HTML features, most web developers consider Internet Explorer as more than a nuisance and start recommending other “more modern” web browsersto their clients and friends:  Firefox, Safari, Opera and  ”the new kid in the block”  Google Chrome.

IE6 is still around because it’s the default web browser for most Windows XP users. Although the percentage of IE6 users is dwindling every month,   web developers still have to optimize their web site design (HTML, CSS, Javascript) to accommodate that old web browser.

IE7 and the latest version IE8 are certainly a great attempt from Microsoft to be inline with the recommendations of the Worldwide Web Consortium (W3C). But there is  still more room for improvements. IE lacks some of the most important functions most modern web browsers have today.

But all that is going to change very soon with the upcoming of a new version,  IE 9. The rumor is IE9 will  support HTML 5,  CSS 3 and SVG vector graphics. What that means is the ability among other things to:

• create round corners with CSS without using graphics
• display a multicolumn page content without manually breaking it down in separate containers
• apply multiple background images to the

Those are just a few of the new features the CSS3 specifications include. They are already supported by Firefox, Opera, Safari and Chrome.
For now, let’s wait and see what surprises Internet Explorer version 9 (IE9) has in store for us.

1. GIF Format

   It  is the most  appropriate export format for graphics with large areas of solid colors. Digital artwork using a narrow palette of  colors (up to 256)    will deliver crisp and a small file size when  exported as a GIF.

   The GIF format is also a good choice to make certain colors transparent in the exported image:  index transparency. That comes handy when you need  transparent edges around your image. You will be then able to blend that exported image with any web page area no matter what background color is used.

   Your only choice is a GIF format to create  animated graphics such as banners (animated gif) unless you use a Flash movie:   JPEG and  PNG do no supports a such animations. You would have to either keep the number of animation frames to a minimum and reduce the dimensions (width and height) to lower the file size of your “animated gif”.

2. JPEG Format

   This format is more appropriate for images with lot of details and photos requiring millions of colors. The JPEG format is also the best option for  computer graphics with gradients of colors or  artworks using shadows, bevel, feather and other digital effects.

   Images  exported in a JPEG format are usually crisp when exported with a compression between 60 and 80%.  That  gives you enough wiggle room to find a balance between quality and file size.

3. PNG Format

   The PNG format comes in three flavors: PNG8, PNG24 and PNG32. This format lays somewhere between the GIF and JPEG formats. PNG is a lossless compression, uses virtually unlimited palette of colors and offers both index and alpha transparency.
   Let’s explore what each subset of this format has to offer.

   • The PNG8 is  quite similar to the gif format in terms of quality and size of the exported file. It offers index transparency as well as alpha transparency
   • PNG24 is better suited when your graphic is a mixture of lots solid colors and gradients. In a nutshell, the png24 format lays between the gif and jpeg formats.  It produces crisper images with a smaller file size than the GIF format.  However the PNG24 does not offer index or alpha transparency.
   • The PNG32 option is currently not available in Photoshop. You will have to use Adobe Fireworks to take advantage of  the full alpha transparency offered by the PNG32 format.
   • The only drawback of  PNG images is they are not well supported by Internet Explorer 6: you will have to resort to a CSS hack using Microsoft’s filters.

• Although the GIF format offers a palette of 256 colors, my personal experience taught me to use the GIF format only when no more than 32 colors are needed to keep the exported image sharp. For images requiring more colors, you are better off using the other file formats.
• If the image you are dealing with needs more colors than the GIF format can handle and no transparency is required then JPEG is your best bet.
• There is no real gain in choosing the PNG format at this point unless you are using the PNG32 to take advantage of alpha transparency you cannot get with GIF or JPEG format.

In the end there are really no hard rules in choosing the right file format to export your image in. As you just learned, the best suited file format depends on the current context: the graphic you are working on.