|The Useful, the Usable and the Unbelievable in Design for the Web|
In This Issue...
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!
Along with superior
support and a features like instant backups,
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.
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:
On the not so positive side:
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.
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:
SMS enable your website or application via a range of API's
Clickatell's messaging gateway allows you to
send messages to almost any mobile phone in the world.
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:
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.
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.
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:
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.
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:
That's all for this issue -- thanks for reading! I'll see you in a few weeks.
An all-digital tool that enables you to:
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!
Go to the The Ultimate CSS Reference
Or download free chapters from any of these SitePoint Books!
The mobile web is here to stay -- but is your site optimized for users that are on the run? In this article, Brian reveals seven fundamental tips to make sure your web site is a joy to use for all users -- including those browsing from a mobile phone.
In a world in which visitors expect to receive everything for free, does subscription-based content stand a change? If your content is quality, then the answer is yes! In this article, Brock shares five tips to ensure your readers sign up -- and stay subscribed.
Unlike site flipping, domaining allows you to reap the benefits of investing in a web site without having to spend time giving your (virtual) property a facelift. In this article, Peter gives an insider's tips on how to identify, value, buy, and sell domains.
Specificity is a word that's even more difficult to understand than it is to pronounce! But until you�ve mastered the concept, you�ll never really understand how your CSS style rules are being applied. In this article, Paul presents the facts about specificity clearly, so you can apply them to your own CSS today.
Every designer knows that Photoshop's Brush tool is terrific for touching up photos and other images. However, few realize that it's also a powerful utility for creating graphics from scratch, fast! Corrie cleans up with headers, backgrounds, and other graphic elements that you can create in moments.
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-2008. All Rights Reserved.
Design, coding, community or marketing? Select the right newsletters right for your needs...