No man is an island

Some time ago i stated that creating pages using transparent pngs will be easier and more feasible in the future now that IE7 is out.

I predicted that IE7 will get about 50% market share compared to about 20% it had back then. Well, all those statistics have to be taken lightly - as it is with statistics. My prediction is off my quite a margin anyway.

“The future exists today. It’s just unevenly distributed.”

So we will have to hang in there until this sadness that IE6 is will grow out of the systems. From what i have seen in the past with other technologies this will take a long time.

The workarounds for transparency issues will remain and we will continue to use those IE filters to get our site to work in that sad thing that IE6 is.

Just a short reminder mainly to myself how awkward IE is. I retouched a website for a customer today to make it fully working in IE. There were a few minor problems but nothing serious to get me to step in earlier.

So i went through my list of IE weirdness and discovered some things new to me:

• IE 6 cannot display borders with transparent as color. Now this was annoying since that meant to define a color in quite a few more spaces than necessary. Since the whole things i Zope/Plone backed i will collect all those colors in a DTML. Though Plone.org says this method is about to be deprecated i have yet to see what new way should be.
• IE 6 cannot display dotted borders. Yeah, thats right. It displays them as dashed. Workaround includes transparent gifs and a few css tricks so Mozilla or other browsers capable of displaying dotted borders don’t pick up the picture.
• IE 6 and 7 behave odd with fieldsets and legends. When you define a background color for a fieldset and that fieldset will contain a legend, the background color extends into the space above the fieldset itself to the upper border of the legend. This is definitely awkward, since the workaround really feels like fixing IE itself. The fix was basically to define fieldset position relative and legend position absolute and then move the legend to the right space again. This fix works only partially since a yet to be determined combination of margins, paddings and borders still lead to the background extending outside it’s borders.

Now that IE finally supports transparency in it’s 7th inception it’s time to look more into website design using transparency in PNGs.

32 Bit images (24 Bit color, 8 Bit transparency channel) allow effects previously hard or even impossible to do on websites. IE5.5 and IE6 in fact supported these transparencies to some degree with AlphaImageLoader. This was painful, had it’s issues when using this on PNGs that were background images of elements and simply didn’t work when ActiveX was deactivated. It also had issues when animating these PNGs for example in a draggable area although that worked ok in IE5.5+ most of the time.

The time for workarounds comes to a close, especially as soon as IE7 becomes the major IE in use out there. Currently it’s 20%+ for IE7 and about 50%+ for IE5.5/IE6. This still leaves a lot of room for improvement but it’s a start. I think IE7 will gain marketshare of about 50% by July 2007. Within a years time IE5.5 and IE6 will only be used by a minority. One issue with IE7 is that it is not and will not be available for Windows 2000. There are still a lot of Windows 2000 installations out there and some die hard resisters to switch to a newer Windows version (I am). But there also are still users out there using NS4 (yes, surprising). The only chance for those visitors i see is simply telling them to upgrade their browser or use an alternative browser that works fine. This may not be possible for every target group but for some websites this approach may work. Either way this will reduce users of your website. You can’t have it all i guess.

With proper use of transparency a lot of fancy designs can be achieved a lot easier than before. Just think of the dreaded drop shadow or even worse the drop shadow on the gradient. This will all work just fine with PNGs. I predict that we will see an uprise of transparent PNG using websites within the next 12 months. It will probably not reach mainstream websites until later but the geekier websites probably alread use it anyway.

Imagine you are a car manufacturer and you want your cars not only to outperform your competitor’s cars in technical performance but also in visual appeal. Of course you would hire a designer to do that. Any designer? No - you would hire a designer that not only is a good designer but one that also knows about aerodynamics and the technical limitations like how much space does the motor take up.

Same game, different results with web designers. Every designer i worked with to create a website had no idea what designing for the web is about (one noticeable exception, who happens to be an ex-flatmate and a very good friend). All of them simply replied with “simply cut it out” or “pick the color from the photoshop file” when confronted with questions about how to get all the info needed to implement the design in html. (more…)