User interface (UI) in this Web 2.0 driven internet is only one aspect to having a successful site, simply put, design is not everything. Nowadays, user-experience (commonly referred to as UX) is a matter more given attention to rather than just the interface: it is the combination of the interface the user is interacting with along with the subtle details that the user experiences during the interaction. Think of it as the overall impact that we as users have after visiting the website or using the application. And one of the best ways of improving your users’ experiences is adding subtle animations which normally include transitions that play with opacity. Arguably, some elements look better when it gracefully enters your view rather than just popping in and out.
As a web developer, you have the burden of making the UX happen for your users. The problem is that your users don’t exactly use the same platform, browser, or even device. As a web developer you must ensure that the experience remains consistent, or at least pleasant, across varying platforms. Nowadays I personally support two (2) major browsers for development: Mozilla Firefox and Microsoft Internet Explorer.
Firefox is an excellent browser for development, and I wish I could say the same for the other. For IE I normally test on two (2) versions: 6.0 and 7.0. These two versions are worlds apart but since IE is still the most common web browser as we speak we have to support it likewise.
One of the most annoying IE “feature” is the opacity bug. If you have a section (div, span, etc.) that uses opacity (e.g. filter:alpha(opacity=50);) chances are your text will render in anything less than pleasant. Another is when you have a background image with (semi) transparent background (png) the background layer may not show or be simply covered in a shade of blue (IE 6) or black (IE 7+).
I found two ways of dealing with this problem:
- The easiest is to simply add a background-color to your element. IE’s problem arises from a ClearType side effect when IE doesn’t exactly know what the background color is, so the text renders poorly, and even your png doesn’t display as expected (IE 6.0 doesn’t really support the alpha channel of png images).
- I guess you used png as background images because you really intend to use its alpha channel. If you specify a non-transparent color as your background the layer below will definitely not show as you may have planned. If you’re going to use a png image as a background anyway, don’t put a filter:alpha in your layer’s style and apply the transparency in the png itself. But if it is already placed there as a result of some animation script, remove it:
if (opacity < 100)
obj.style.filter = ‘Alpha(opacity=’+opacity+’)’;
Note that the script above works exclusively for IE. It will generate an error in Firefox.
Naturally there are a lot more ways to deal with this issue; these are just two of the ones I personally use. Feel free to share if you have a better one.