In This Issue...

• Introduction
• IE8 Arrives
• Making 'IE6-friendly' PNG8 Images
• What's New on SitePoint!
• Hot Forum Topics
• New Blog Entries

HostGator eats up the Competition with their newly priced plans!

Whether you are a web designer, or a small site owner; HostGator offers a web hosting plan to fit your needs. With their Hatchling Plan starting at $4.95 ranging to their Reseller Plans and Dedicated Servers you will definitely have room to grow.

Host Unlimited sites on our Baby Plan!

• Disk Space: 600 GB
• Bandwidth: 6,000 GB

Along with superior support and a features like instant backups,
99.9% Uptime plus an all new 45 day money back guarantee you will
be glad you chose HostGator.

Sign Up Now and Receive the first month Free!
Coupon: SITEPOINT

Introduction: Birth of the Blue Man

Welcome to Design View #43.

Yes, the rumors are true. The SitePoint CSS Reference is no longer a precocious only child -- it has a brand new sibling!

The beta of the SitePoint HTML Reference went live last week and we've already received a pile of really useful feedback from happy users. All the content in the site has been lovingly hand-crafted by SitePoint author, HTML stickler, and erstwhile accessibility doyen Ian Lloyd, while long-time Web Standards Grouper Lachlan Hunt has been contributing his considerable polish to the technical editing.

As with the CSS reference, everyone is encouraged to contribute their comments, know-how, tips, and insights directly to the content, so each day the reference grows a little richer than the day before.

I can also tell you that we're currently working on a slick visual overhaul that will have the content looking as smart as it reads.

Get in there, have a poke around, and let us know what you think.

Cheers,

Alex Walker
Editor
SitePoint Design View

IE8 Arrives

Did someone change the coffee brands at Microsoft? After taking 6 years to move from version 6 to version 7, the IE team has offered the first IE8 beta barely 18 months after IE7's release.

Cosmetically, things don't look all that different to IE7, but under the bonnet -- where most of our nightmares originate -- the IE dev team seems to have set some pretty ambitious goals.

To me, the most important stuff includes:

• fixes to long-standing rendering bugs, including most notably the double margin bug and skittish CSS floats
• support for generated content
• support for more pseudo class (i.e. :after, :before and :focus) and support for the outline property
• much improved development tools, including a built-in, souped-up version of the IE Developer Toolbar that rivals Firebug's feature set
• a much more standardized Document Object Model (DOM), which means you won't need to write IE-specific JavaScript to make IE8 sing and dance
• the introduction of CSS table-layout support allowing you to take some of the more robust layout qualities of tables (i.e. self-equalizing columns) and apply them directly to clean, sensible markup (Kev has written a great piece on this if you haven't already seen it.)

On the not so positive side:

• Yes, IE8 another variable for us to contend with, inevitably complicating the development process that little bit more.
• This beta seems to render significantly differently from IE7 and the other mainstream browsers.

To be fair on the rendering issues, this is the first beta, so it would be silly to believe the rendering engine won't change before the full release. In short, by all means test your sites in it now, but hold your fire on any IE8-specific hacks -- for now at least -- as they will likely be unnecessary by the time the official release candidate hits the ground.

On a similar note, it's probably not wise to install this browser on any critical system at the moment, as it will automatically and permanently overwrite any IE6 and IE7 installs. That would be a brave course to take with a potentially unstable beta.

However, if you're keen to have a play, Microsoft has released a version of IE8 embedded in a virtual hard disk image (VHD) that can be run via Virtual PC. Microsoft offers both of these downloads for free, allowing you to freely test the beta while keeping it safely isolated from the rest of your system.

This VHD beta will time out in July 2008, at which point you'll need to download an updated image.

If you haven't used a VHD before (and a few readers have asked about it), I'll run you through the set up process below.

However, before we start, think twice about doing this if your system is lacking either reasonable grunt or good bandwidth access, as you'll need plenty of both to first download the VHD file (a 430+MB file that decompresses to almost 1.4Gig), and then to efficiently run it under Virtual PC.

1. Download and install Virtual PC (30.4 MB).
2. Download and run the IE8 Virtual Hard Disk file here (IE8_VPC.EXE) -- this will auto-extract your VHD to a folder (along with a couple of text files).
3. Launch Virtual PC and click 'New...' to start the New Virtual Machine Wizard.
4. Select the second option, 'Use default settings to create a virtual machine' and click 'Next'.
5. Give your new virtual machine a name -- 'IE8' seems sensible enough -- and hit 'Next'.
6. Hit 'Finish'. This will automatically create a new directory called 'IE8' (or whatever else you named it) with a new configurations file inside it called 'IE8.vmc'.
7. A 'Settings' dialog box should now open automatically. 'Select Hard Disk 1', and switch the 'None' radio button to 'Virtual hard disk file:'
8. Browse and select the VHD file you extracted earlier, then press 'OK'.
9. Your Virtual PC console should now list a new Virtual Hard Disk. Select it and hit 'Start'.
10. Voila! After a few seconds you should be have a standalone window running XP and the IE8 beta.

The first time I ran this VHD, the system needed to do some housekeeping, and asked me to restart it, but from then on it's been hassle-free. Of course, when you've had enough, use the console to shut it down.

So, take it for a spin and let me know what you think. It goes without saying that it's going to be a quite a while before IE8 is a factor in our day-to-day development thoughts. However, though it wasn't obvious at the time, looking back now it seems that it was IE7 that delivered the final killer blow to IE5.

If IE8 can help speed IE6 towards the door, we will all be happier little web monkeys. Oh, happy day!

Read the blog entry:

Web Tech Blog: Technically Speaking by Kevin Yank Standards Support in Internet Explorer 8 beta 1 (10 comments)

Clickatell's messaging gateway allows you to send messages to almost any mobile phone in the world.

SMS enable any application easily and send two-way messages to 712 mobile networks in 212 countries, reliably.

Connect quickly and simply using HTTP/S, FTP, SMPP, SMTP, XML & Com Object.

Click here for your free trial now.

Making 'IE6-friendly' PNG8 Images

For all the recent buzz and bubble generated by the IE8 beta, the slightly depressing reality is that IE6 is still going to be occupying more of our thoughts (and nightmares) for the foreseeable future. Even as IE7 has begun to gain market share, I can't say I'm spending any less time writing IE6-specific code than I was, say, two years ago. Sad but true.

Likewise, if we ever thought we'd encountered all the demons IE6 had to offer, we were mistaken there too, as George Reilly recounted in an interesting read last week.

Despite the fact that George draws upon seven years of 'Microsoft insider' experience, he spent five months trying to eliminate persistent, 'app-killing' IE6 browser hangs when using the garden-variety PNG32 alpha-transparency hack.

The fact that even he eventually admitted defeat and converted his images to PNG8 could be viewed as a sobering lesson for us all. Can you be 100% sure your PNG32s aren't locking up at least some of your IE6 users' browsers?

Of course, these things are often a trade-off:

• Do you go for higher quality PNG32 images for most IE6 users, and accept the fact that you may well be forcibly taking down a percentage of those users?
• Or do you play it safe with PNG8, but have to grudgingly accept often ugly, blocky image edges in IE6?

It seems like a question of the devil and the deep blue 'e'.

Today I thought I might run through one of the approaches I've been taking to improve those images in IE6.

The Problem

Let's take a relatively simple example that you might recognize from the site at the moment.

On the left we have the post-it note graphic (a partially transparent PNG8) that we intend to overlay on the blueprint background on the right.

As we might expect, in all modern hip'n'groovy browsers we get a smooth, blended edge between the yellow post-it note and blue back. The magnified section shows a palette of maybe a dozen yellows, blues and grays working together to create the illusion of a gentle clean transition (test the live example here).

Unfortunately, the same images rendered in IE6 (and earlier versions) are a major disappointment and, in my opinion, a show-stopper.

The problem is that all the semi-transparent yellows and shadow grays that blended with the blues to create "inbetween colors" have been rendered 100% transparent by IE6. Our pixels are either yellow or blue -- not halfway between.

To be fair, it's true that the complementary colors in this example represent an absolute worst-case scenario -- diagonal bright yellow on blue. Nevertheless, worst-case scenarios happen all the time, so we still need to be able to generate a more acceptable result.

The Approach

While we're never going to be able to reproduce the transparent shadow in IE6, we do need a way to generate a lot more of the yellow/blue blending colors along the edge. I've found the easiest way to do this is to bring a tiny sliver of the background inside our yellow shape.

In the diagram at the right, I:

1. Duplicated the main yellow shape on top of the original.
2. Set its fill color to 'clear' so the original shape shows through.
3. Set its border color to the background blue.
4. Used the knife tool in Fireworks to break the new border into four separate lines. This allows me to color each border color separately.
5. Exported the graphic.

Of course, you could simplify the process by applying the border to the actual note, but keeping the border on a separate shape gives you more freedom to re-color each edge if you need to.

This is the final IE6-friendly PNG8 graphic and here's an example of it used in front of the blue background for your own browser testing pleasure.

Finally, here are a few browser screencaps I prepared earlier.

As you can see, there's no tangible loss of image quality in Firefox -- or any modern browser, for that matter. The transparent shadow is still as smooth and useful as ever.

However it's clear the result in IE6 is light years ahead of our initial result. There's no shadow, but the edge is as crisp as we could possibly want.

Summary

As you may already have realized, this is more of a general approach to better PNG8s than a magic bullet for all your PNG8 woes. It's certainly true that by "baking" our graphic into a particular background color, we're permanently reducing its flexibility. There are going to be some occasions where this method isn't an option.

But just as surely, there will be many situations where this method (or variations of it) will help you turn chunky, unsightly, unusable IE6 renders into perfectly acceptable results. I hope you get some use out of it.

Read the blog entry:

Design Blog: Pixel Perfect by Alex Walker PNG32 hacks and IE6. Is it worth it? (1 comment)

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

Morae: Usability Testing for Software & Web Sites.

An all-digital tool that enables you to:

• Quickly identify website and software design problems
• Affordably conduct user testing. Quickly calculate metrics & graph results.
• Deliver professional results in a fraction of the time.

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!