In This Issue...

• Introduction
• PNG8 - The Clear Winner
• The Inaugural Electric Floor Awards
• What's New on SitePoint!
• Hot Forum Topics
• New Blog Entries

Join the Fight against overpriced images!

Fast. Easy Always on. The revolutionary image bank Fotolia is here. Millions of images from $1. Any use. Yours Forever!

1,000 new members a day are inspired by our spirit!

Join today and get 2 complementary images by entering 21BVB0MU as the promotional code at checkout.

Visit http://www.fotolia.com

Introduction

Welcome to Design View #37.

Doesn't time fly? Twelve months ago we were toying with the last release candidates of Internet Explorer 7 before its official launch in mid-October 2006.

While new browsers are never the magic bullet we'd like them to be, a year down the track the browser ecosystem has evolved considerably. While browser stats can be open to interpretation, some common threads run through most reports:

1. Most reports agree that Safari is commonly found at around 3% and Opera around 1%.
2. Firefox/Netscape numbers range between 25% in the broader market (i.e. TheCounter.com) and around 30-35% in more technical/savvy audiences (i.e. WordPress.com and W3Schools).
3. Internet Explorer 7 seems to have smoothly captured around 20-25% of the market without noticeably affecting the non-Microsoft browsers (only the older IEs seemed to have suffered from IE7's introduction). Whatever numbers are reported for IE6 -- as high as 60%, and as low as 36% -- all of the reports I've read suggest that IE6 is in a measured but very steady decline.

Nevertheless, as Chuck Upsdell's figures show, the variation between sites and markets can be huge. Chuck's stats are interesting as they're pulled from a cross-section of unrelated sites -- universities, finance, and science sites -- and demonstrate that the only truly relevant figures are the historical figures on your site's specific audience.

So, what's changed for you since August 2006?

Can we stop using CSS hacks?

Not really. Hacks are almost as prevalent as ever, although most developers I know (but not all) now prefer to keep them in a separate style sheet that's linked via a conditional comment. This technique is nothing new, but has become more common since many of the old CSS syntax bugs (used for targeting IE browsers) were rectified in IE7.

Are we using newly supported CSS?

Probably no more than before. IE7 introduced support for a slew of previously ignored or buggily supported CSS standards, including min-height, max-height, min-width, and max-width. Alas, allowing IE6 to fail badly was not an option for most developers, so despite these standards being newly supported, practically speaking they were no more useful than they had been in the pre-IE7 days.

Are we using more PNG images?

Yes. For me, this has been the single biggest change in the way I work, as PNG has gradually become my default image format.

At the start of 2006, I tended to use PNG like the good silverware -- only to be dusted off for those "special occasions." PNG32's alpha-transparency was nifty but hacky and hard to work with in IE6. PNG8 was ok, but it was hard to see why you'd choose it over the reliable ol' GIF.

IE7's improved PNG support has been the tipping point for me, and today we'll be looking at how you can use a seemingly little-known Fireworks feature to produce transparent PNGs in all browsers -- no scripts, no hacks.

Alex Walker
Editor
SitePoint Design View

PNG8 - The Clear Winner

I'm going to run through a little PNG trick in Fireworks today. This is a method that's been around for years, but I'm constantly surprised by how many people don't know about it. Even in this office, I've had web gurus furrowing their brows and insisting "No, no ... that can't be right ... can it?"

So, at the risk of having long-time Fireworks users yawn, roll their eyes and think duh!, here it is.

As you probably already know, PNG comes in two flavors -- 8-bit and 32-bit. It's the 32-bit version that gets most of the fanfare.

PNG32's major characteristics are:

• It uses a flexible "JPEG-like" RGB color model, rather than a limited palette as GIF does.
• It employs a completely lossless compression method, allowing you to save and resave your image with no loss of quality.
• Lossless compression does come at some cost -- PNG images are always much fatter than their JPEG equivalents.
• It can reproduce complex, graded transparency settings, similar to a PSD or TIF file.

Of course, Microsoft's scant regard for the PNG spec (authored way back in 1996) meant that the announcement of the glorious PNG format fell on deaf ears. And rightly so -- in that year, Internet Explorer had roughly 95% of the market, so naturally an image format that rendered transparency as a solid, dishwater grey in most people's browsers qualified as a total non-event for the majority of developers.

Not to be bowed, a lot of bloodyminded developers set about inventing all manner of hacks, tricks and workarounds designed to force IE to play nice. These included many JavaScript/IE Filter-based solutions and even a Flash powered PNG renderer.

While most of these methods worked, all of them were complex, completely tied to the presence of another technology (Flash, JavaScript, etc.), and still failed badly on older browsers.

These efforts were, however, good attempts at making the best of a bad situation.

PNG8's major characteristics are:

• It employs a palette-based color model (sometimes called an indexed palette), like the one that GIF uses.
• It can't animate like GIF.
• It offers GIF-like 1-bit transparency. Pixels are either solid or completely transparent, but never partially see-through.

Although this last point is generally accepted as fact, it isn't strictly true, and this is the topic we'll be examining today.

Transparency information for all PNGs is contained in a section of the file called a chunk, and according to the spec, for indexed images, it stores alpha channel values for one or more palette entries.

In other words, the chunk is allowed to have more than one transparency color.

Now, as we know, official specs can lay out all sorts of wonderful ideals involving rainbows and unicorns and fluffy kittens -- just look at the most of W3C specs -- but it's what happens in the big, wide, dirty world that truly matters.

Let's look at an example.

We'll begin in Fireworks with a simple illustration that I've given a yellow translucent glow. As you can see in the screenshot below, the background is visible through the glow.

If we set our file format to PNG8 - indexed transparency, we get a result very much like any transparent GIF you might see. One color chip in our palette is set aside for the alpha channel, and all semi-transparent colors are flattened into the background color and rendered opaque.

However, if we switch from index to alpha transparency, things get interesting.

While our default alpha chip is still there, our PNG8 palette preview now shows a new type of color chip with a transparent chiplet cut out of the top-left corner. These are our semi-transparent colors.

Let's export the graphic and see what our web browsers make of it. If you want to try your own quick tests, the page is here.

As you can see in the diagram above, all four modern browsers render the yellow glow effect beautifully, with subtly varying levels of transparency. No issues there.

But what about those cranky older IEs? Are they going to suck the life out of the party again?

The answer is: not necessarily.

Although older browsers won't render the gentle glow effect, they'll happily ignore it while continuing to render the 100% transparent parts in glorious, GIF-like, 1-bit alpha. Not perfect, but not tragic either -- particularly when compared to the ugly grey boxes that accompany unhacked PNG32s on older versions of IE.

Amazingly, Fireworks seems to be the only graphics app that supports this semi-transparent PNG8 export feature -- and it has done so since at least version 3.

I can certainly confirm that none of PhotoShop, Gimp, Paintshop Pro, or Xara has this functionality built-in. Perhaps there are plugins out there that can inject super PNG powers into these apps, but I haven't seen them. So if you have even an older version of Fireworks hanging around, it's probably worth holding onto just for this feature!

Summary

It seems there are very few reasons for not using more 8-bit Fireworks PNGs in our work. In many typical situations, between 60% and 80% of users will be using a browser that fully supports these files.

The remaining IE5-6 users will see a slightly jaggier but often very acceptable version of the same image. The example to the right is used on the sitepoint.com home page, and I doubt IE6 users are aware that they're missing anything.

The generated files are small -- the light globe image used in the examples above was less than 6k. I generated a PNG32 version of the same image and it was 3 times the size.

And as they have no reliance on browser hacks, JavaScript, Flash, DirectX, or any other third-party technology, it's difficult for them to fail.

While there still may be times when full transparency control in all browsers will demand the PNG32 hacks, personally I think PNG8 should become the default choice for web transparency effects.

Discuss this technique in the SitePoint forums here.

Create visually stunning web sites with CSS

Let Jonathan Snook, Steve Smith, Jina Bolton, Cameron Adams and David Johnson teach you the secrets to creating inspirational web sites in The Art & Science Of CSS.

Presented in full color, this book will show you just how easy it is to unleash your creative talents and design beautiful web sites with CSS.

Learn to work with images, backgrounds, headers, navigation bars, and more in this comprehensive, and inspirational guide.

Get your FREE Sample chapter now.

And the Inaugural Electric Floor Award goes to...

Gee, aren't floors great? All flat and clean and smooth, they do a faultless job of preventing us from plunging headlong into the voids beneath them -- a particularly useful thing in multi-story buildings.

It's interesting to reflect that, although electricity has been available for over 100 years, no one has ever sought to improve the humble floor by making it totally dependant on electric power.

Floors that disappeared or collapsed whenever the power was cut -- even if that was only occasionally -- would be inconvenient, to say the least! While electricity has often been used to improve the usability of our floors by heating, cooling or lighting them better, no floor would ever cease its basic operations without the presence of electricty.

With this in mind, I find it remarkable that large, successful, multinational corporations can build the foundations of their online headquarters on a technology -- in this case, JavaScript -- that may or may not be available to their users. Disabling JavaScript completely disables the fundamental operations of these sites just as surely as would removing the floor from the company's real-world lobby.

So, without further ado, I'm pleased to announce that the inaugural Electric Floor Award goes to ... *drumroll please*... (disable JavaScript before clicking on it) ... Visa.com!

When you arrive at Visa's global portal without JavaScript turned on, you'll be greeted by what's probably the most extensive use of white space you'll ever see ...

... and nothing else.

While simplicity and elegance are to be encouraged, this is probably taking things a little too far.

If you were to somehow make it past this first redirection page, you'd be deposited at the landing page shown below.

Things immediately appear more encouraging. The page certainly seems to be rendering fine without JavaScript ... that is, unless you want to access any of Visa's Consumer & Business Sites. If you do, you'll be asked to select your country from a dropdown, and this dropdown will be empty if you have JavaScript disabled.

Okay, I'm making light of the situation, but this is a serious issue. We're not talking about complex operations that necessarily require scripting. This isn't:

• a multi-site mashup
• advanced functionality, such as a 3D animation, multimedia, or an interactive map
• a partial page refresh with sooper groovy Ajax

We're talking about boring, fundamental operations like page rendering and navigation -- operations that have worked flawlessly since Tim Berners-Lee first imagined them two decades ago. And at Visa, they're failing completely.

There are simply no good reasons not to make basic pages like these work without JavaScript, and the Electric Floor Awards are designed to highlight some of the high-profile offenders. If Google can make GMail work without JavaScript, there should be no excuse for infinitely simple sites to fail.

Congratulations to Visa.com on taking out the first award!

I've got my eye on another half-dozen sites that qualify for the award, but if you're aware of other worthy nominees, we'd be interested to hear about them.

And if you're thinking 'Come on, how many nutcases are there REALLY out there cruising around without JavaScript?' ask yourself this.

How many Sony Ericsson's are there out there?

Have your say about Visa.com in the SitePoint forums

That's all for this issue -- thanks for reading! I'll see you in a few weeks.

Alex Walker
design@sitepoint.com
Editor, The SitePoint Design View

Help Your Friends Out

People you care about can benefit from the wealth of information on new and maturing technologies available on the Internet. Help them learn how to do it by forwarding them this issue of the Design View!