September 23, 2005

Stupid Microsloth redux

One of the things I dearly loathe about redesigning a Web site is the fact that certain mainstream browsers just seem to be way behind the curve when it comes to implementing established standards. This is the second time where I wanted to make an improvement to the look and feel of this blog only to find out I had to overcome a limitation imposed by second-rate Microsoftware. The first was my attempt to excerpt longer articles on my main page.

There comes a point where as a Web designer I have to choose between a compromise layout that doesn't look as good as I would like on anyone's browser, and a standards-compliant layout that I like, which others can also enjoy if they will just take the time to upgrade their software to something current. This is the point where I finally go the latter route.

Some of this site's graphics are in the Portable Network Graphics (PNG) format. The most significant advantage of the PNG format is its support for 256 levels of "alpha channel" transparency: in other words, any given pixel can be completely opaque, completely transparent, or anywhere in between.

This ability solves a Web design conundrum: how do you create a partially transparent bitmap object of irregular shape that doesn't have a "halo" of jagged edges when you display it on top of a contrasting background? The solution is to anti-alias the edges of the object so that the background shows through a little bit. Then the object looks just fine no matter what's underneath it, whether light, dark, or variegated. For example:

Two blue globes on white background

Two blue globes on black background

Two blue globes on bitmap background

But right about now, about 80% of you are screaming "Lies! False advertising!" You have no clue what I'm talking about, because all you saw was three copies of two blue globes on a black background. The reason is a lack of functionality in Internet Explorer for Windows, the world's most popular Web browser. I understand that the Macintosh version supports PNG transparency just fine; it seems Bill Gates doesn't think his Windows customers deserve the same treatment. Of course, Internet Exploder hasn't been significantly upgraded in something like two years, though version 7, which is currently vaporware, is supposed to support full PNG alpha transparency. We can only hope.

I decided a year ago that the advantages of the PNG format outweighed the inconvenience caused to IE users. Up until now, you have had to contend with ugly white rectangles around my bullets. However, when redesigning the graphics for the blog last week, I learned something I didn't know before: that when you save a PNG in the Gimp (as well as, I presume, any comparable application such as Photoshop or Paint Shop Pro), whatever background colour you happen to be using, becomes the background colour of the image. So it is possible to create a PNG that is at least colour-coordinated if alpha transparency isn't supported by the browser.

But I still can't please everyone, because I use the same bullet on two different backgrounds, and it would defeat the purpose of even having alpha transparency to make two versions of it. The moral of the story: Ditch Internet Exploder and look into Firefox: secure, standards-compliant, and kept up-to-date. What more could anyone ask?