|The Useful, the Usable and the Unbelievable in Design for the Web|
In This Issue...
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.
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:
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
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.
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:
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.
These efforts were, however, good attempts at making the best of a bad situation.
PNG8's major characteristics are:
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!
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.
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.
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.
Learn to work with images, backgrounds, headers, navigation bars, and more in this comprehensive, and inspirational guide.
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.
... 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.
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:
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.
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.
How many Sony Ericsson's are there out there?
That's all for this issue -- thanks for reading! I'll see you in a few weeks.
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!
Download free chapters from every SitePoint Book!
If you think freelancing is about being buried in design or code 24/7, think again. To achieve freelance success, you'll need to be a businessperson first of all, as well as part coder and designer. In this hands-on primer, Brendon helps you face the facts of freelancing, and prepares you to take the plunge!
Itching to create your own mashup? The huge range of Yahoo! APIs gives you total creative freedom and countless sites are taking full advantage. Here, Akash explains how to build your own Yahoo! mashup, using PHP to combine Yahoo! Maps and Search functionality to create a truly useful local search engine that really works!
Navigation is the key to surfing the Web, and in this collection of ready-made solutions Rachel steps us through horizontal and vertical menus, drop-down, fly-out, and tabbed navigation systems. Learn the basics of styling lists as menus, and soon you'll be creating drop-down menus from pure CSS -- and making sure they're as accessible as possible!
Web Tech Blog:
Manage Your Subscription Here.
You are currently subscribed as to the HTML edition of the Design View.
CHANGE your email address here
UNSUBSCRIBE from the Design View here.
SUBSCRIBE to the Design View here.
SWAP to the 'Text-Only' version of the Design View here.
SitePoint Pty. Ltd.
Thanks for reading!
© SitePoint 1998-2007. All Rights Reserved.
Design, coding, community or marketing? Select the right newsletters right for your needs...