As much as we would like it to go away, the sad reality of web design today is that there is still a significant number of people out there who surf the web with Internet Explorer 6. And, in many cases, it’s not their fault – they just can’t help themselves! No, really, they can’t – because they work in corporate environments where their IT department has their machines locked down. For those of us who have had the dubious pleasure of experiencing a large corporate IT department, you know how slow they can be in upgrading anything. I’ve heard anecdotes as recently as a few months ago or departments just now beginning their move from Windows 2000. Sad, but true.

As a web designer, the need to support Internet Explorer also means that you have to make a ton of other trade-offs. One of which, I myself had (un)happily accepted as a fact of life, the inability to leverage PNGs for transparency. Now, before we go any further, I realize that there are several Javascript approaches to achieving transparency, but none of the ones that I have tried have “worked” in every circumstance. That’s why I was so pleasantly surprised that a solution had been under my nose for many, many years and I simply hadn’t known about it.

First, have a look at the piece of a site design above. As you can see, the designer has called for a drop shadow on the logo. In making the decision about optimization and format for this image, a number of things have to be considered. Obviously, a jpg image could be used if we could guarantee its placement (due to the stripped background) – but this would require quite a bit of tinkering. A gif image is also problematic due to the lack of a solid background – regardless of which color we choose as a matte, we end up with a rather ugly effect as you can see below.

Obviously the only “real” option is to use a png image. But, again, the problem with IE arises. For a beautiful drop shadow effect, we really need to use a PNG 24, but that means an even worse result in IE6 – a solid gray background! So, there just doesn’t seem to be a good solution – or at least, so I thought. So, what’s that solution that was right under my nose?

The solution lies first with your choice of optimization programs. A majority of web designers export their images directly from Photoshop – and under most circumstances that would be okay. (Although I did write a post explaining the “disadvantages” of exporting jpg images from Photoshop.) In this instance, however, Photoshop can’t offer us any help.

But, as you might have guessed, Adobe Fireworks actually provides us a more elegant solution – and one that you can’t get with Photoshop! The secret lies in the ability of Fireworks to create a “semi-transparent” png.

Here’s the same PSD file opened in Fireworks CS4. I’ve chosen the PNG 8 format and the default of Index Transparency. This gives us the exact same result as we saw in Photoshop, where we had chosen a white matte to “mix” with the drop shadow, giving us the ugly white border effect. And, yes, I could have chosen a PNG 8 from Photoshop – but again, I would have gotten the same white border result.

The solution is to optimize with a different transparency option selected. It’s the Alpha Transparency option. When it is selected, you can see that instead of a single color chip becoming transparent, a whole bunch of the chips contain both a transparency AND a color! These are semi-transparent colors – and as you can see, the shadow is blending nicely without any ugly matte border. And size-wise, the image is the same (or even smaller in this case) than the corresponding gif!

Now go ahead and ask – what happens in IE6? Well, I’m glad you asked. And the answer is… absolutely nothing. At least with regard to the semi-transparent pixels. You see, IE6 does support transparency in PNG8’s – but it doesn’t understand the concept of a semi-tranparent pixel. Therefore, instead of placing a gray background on the image like with a PNG 24, IE6 simply ignores the semi-transparent pixels – meaning, they are simply not there.

Of course, more “modern” versions of Internet Explorer do actually understand the semi-transparent pixels, as do all of the standards-based browsers. So, this means that everyone except IE6 visitors will see the nice shadow from the semi-transparent pixels, while IE6 visitors will simply “not know” that they are missing anything.

You can see the same semi-transparent effect happening all over my blog. Look closely at the pieces of tape, and you’ll notice that you can see through them. In other words, the tape is the image, and it is simply being positioned on top of the other elements. In IE6, the pieces of tape simply “disappear”. Pretty cool, huh?! If you don’t happen to have a copy of IE6 laying around, make sure to head over to Adobe BrowserLab where you can compare how the various flavors of browsers will view your page.

I just received the latest issue of Web Designer magazine, which includes a write-up of the many announcements and festivities that went on during the recent Adobe MAX conference in Los Angeles. If you were there, or have ever attended MAX, you know that the most anticipated event every year is known as “Sneaks”, in which Adobe engineers, product managers and evangelists get to show off technologies and projects which “may or may not ever make their way into a current or future product”.

This year, I had the pleasure of showing off an experimental project codenamed “Rome”. I’ve received literally hundreds of questions about Rome since that 5 minute demo. And, although I would love to tell you more, unfortunately at this time, my lips must remain sealed. However, for those that missed it, someone took the “liberty” of filming my presentation and posting it to YouTube. So, since it’s on the web, I thought I would help my readers out by linking directly to it. :-)

Now, just don’t ask me if/when/where/how you can get more information about Rome, ‘cuz I can’t tell you. But if you were excited by the demonstration, have thoughts about the “possible” product, feel free to leave a message or send me an email.

The subject of image optimization always crops up during my seminars, and one of the “oh, wow!” moments for almost everyone in the audience is when I compare JPEG optimization from our beloved Photoshop and Fireworks. As everyone who has seen this knows, we get a much smaller JPEG out of Fireworks. But for those of you who have not had the chance to check this out, I wanted to document it here.

To follow along, you should find your favorite uncompressed picture, or if that’s too difficult to find, you can download my RAW image – even if you try this with a compressed JPEG, you’ll still see a dramatic difference. But the optimal workflow is to start with the highest quality possible. I always shoot in the Raw format for many reasons – not the least of which is that I get that completely uncompressed image. If you have a Raw image, you’ll first make any desired adjustments in Camera Raw and then open it in Photoshop CS4.

Save the file as a PSD, since we’ll need it in a few moments. And if you’re working with a RAW image, that means that you’re probably dealing with a rather large image size – my image is a 12 megapixel shot. For this example, I’ve scaled it down to 350 x 233. In order to get the smallest possible JPEG out of Photoshop, it is important that you do NOT try a “Save As” and select JPEG. Instead, we need to go through the “Save for Web and Devices…” process (in the File menu).

(more…)

It’s unfortunate that most web designers and developers pay little-to-no attention to their sites on anything but a browser running on their local computer monitor. The thought of designing a page to display properly on a mobile device or set-top browser rarely gets any braincells thrown at it. This is somewhat understandable, given the fact that the mobile browsing space is in such disarray.

But it frustrates me to no end when I need to save or print a web page, only to be given something that is at best barely useable. I’m sure most of us have had the pleasure of the four-page-print-phenomenon in which a seemingly simple web page causes the printer to spit out three additional (and completely blank) pages. It’s not rocket science to create a print stylesheet, but only the cream of the crop take the time to do it.

I think one reason that many Dreamweaver users don’t do it, is not only because they have the misconception that it’s difficult, but also because we did a really good job of hiding an essential tool for creating a print stylesheet (or handheld sheet for that matter). (more…)

Along with everything else that is going on on the ninth day of the ninth month of the ninth year of this millennium, my colleagues on the Adobe TV team have launched their completely redesigned site.

The initial version of Adobe TV was launched about 18 months ago. And while it accomplished its mission to provide a single point on the web for learning about Adobe products, it was quite honestly a mess due to a hastily thrown-together backend and an even worse user experience. Ironically, I’m almost sad to see the old site go, as I used to use it as an example of what NOT to do on the web – namely build an entire site in Flash/Flex. Don’t get me wrong, I love Flash and have no problem with Flash content – especially video. There are only very limited examples of using Flash/Flex to build an entire public facing site and doing it right – so limited in fact that I can’t even think of any.

(more…)