Sunsetting IE6 on your own

Anyone that does front end web development or web design hates Internet Explorer 6.  Why?  First released in 2001, IE6 is dog slow, very buggy, and essentially completely non-standards compliant.

These issues manifest themselves in two primary categories as best I can tell:  javaScript bugs/behaviors, and layout/CSS behaviors or missing features.

So, developers learn to code around these things.  In CSS this means a lot of hacks and html conditional statements to load custom css, js and htc files to fix many CSS-related deficiencies such as the lack of 24-channel PNG transparency.  As to JavaScript, I’ve found that jQuery cures the need for IE6-specific code, but we continue to see IE6-specific bugs/glitches that are difficult or impossible to isolate, duplicate, or fix.

Unfortunately for enterprise developers, our users seem to be behind the curve when compared to browser adoption. Much of our target audience is still on Windows XP, and depending on IT policies and budget constraints, abandonment of IE6 in the enterprise has lagged behind the consumer segment.

In the enterprise environment I work in, my primary application sees about 200 visits per day across the institution.  About a year ago I began a crusade (no, that is not too strong of a word when the context is IE6) to purge IE6 from the realm of users accessing my web apps.  I had three goals in mind: 1) Reduce userland bugs/glitches and errors caused by IE6, 2) Improve the overall user experience via a superior browser, and 3) Reduce the amount of time I have to spend working around IE6’s craptasticness.

I have to give this caveat before continuing further: As my institution has begun deploying Win7 machines, our IE6 usage has plummeted like a brick.  Admittedly this is the biggest single factor in the reduction of IE6 users against my web apps.  However, there is something to be said for encouraging your users to upgrade and warning them that their experience may be poor with IE6.

Step 1 is to determine the user’s browser when they hit your site.  On my web app’s login page, I use a simple conditional similar to the below example to display a formatted message to the user:

if(eregi('MSIE 6.0', $_SERVER['HTTP_USER_AGENT'])) {
    echo 'You are accessing this site using Internet Explorer 6.0.  We make every reasonable attempt to ensure this site is compatible with IE6, but due to the age and lack of web standards compliance in IE6, you may experience some errors and bugs that are beyond our control.  For best performance, we STRONGLY recommend a more modern browser, such as <a href="http://www.mozilla.org/firefox">Mozilla Firefox</a>, <a href="http://www.apple.com/safari/download">Apple Safari</a>, or <a href="http://www.microsoft.com/windows/Internet-explorer/default.aspx">Microsoft Internet Explorer 8</a>, which are all available for free.  Firefox and Safari are recommended for the best overall experience and performance, though Internet Explorer 7 and 8 are also fully compatible. Less than 7.5% of traffic on this site is from users on IE6.  Therefore, at some point we will make a decision not to support IE6 any longer, as it takes considerable effort to maintain this backward compatibility. PLEASE UPGRADE YOUR BROWSER SOON!';
}

Wrap that message with some bold styling to grab the user’s attention. Then start watching your browser traffic with Google Analytics.

Once IE9 is out of beta, I’ll change the message to include it in the recommended browsers, but for now I want to funnel my users into a browser with some CSS3 support, because I’ve incorporated a lot of it into my app and I think it improves the user experience a great deal.

What I’ve seen in the past few months is a steady reduction in IE6 traffic from the mid 30% range this time last year, to 10% a couple of months ago, down to 7.1% this past week. I believe the biggest reduction has been deployment of Win7 desktops, but the incremental drive from 10% down to current levels seems to be due to the above user warning.

The other thing I’ve been doing is verbally encouraging use of Firefox any time the issue comes up. When I get a call or email about a bug, if I can’t replicate it in Safari then it is almost always a browser specific issue, and when asked the user almost always informs me he or she is using IE6.

Once IE6 usage hits 5% I am going to change the warning message to say that IE6 is no longer supported. Of course I’ll continue to make accommodations, but I’m not going to go out of my way to make IE6 users comfortable in the application–it just doesn’t make sense any longer.

Toggle Table Rows with jQuery, no plug-in required

Last week I encountered a situation with one of our web apps that required a toggle-able table row. Essentially the existing table was populated with information from four different tables. In addition to several joins there were some nested queries, and it was killing the MySQL server.

So, I decided to pull the information from the nested queries out of the rows and use a hidden table row below each existing row where I would show the formerly nested information using an ajax call to retrieve. Removing the nested queries significantly improved query performance.

The biggest problem in this was creating a table row that toggles. The native toggle() jquery function didn’t work at first, and this is because a table row’s display attribute is “table-row”, and not “block” as toggle() resets to.

I found this jQuery plugin by Janko at Warp Speed for doing exactly what I need. It is simple and works quite well with the minimum necessary amount of code. This is accomplished by using jQuery calls to add an anonymous click function to the even rows. However, there are some drawbacks. First, if you observe the demo, notice that a click anywhere in the parent row triggers the toggle.  This is great unless you have a link in the parent row.  What to do if you have, say, a table of employees and you want a link to their full record in the parent row?

Quite unintentionally, after fiddling with jQuery for a couple of hours I came up with a solution.  Only after I tested did I realize I had Janko’s plugin commented out.  I was able to confirm my solution works with no plugin required.  Rather than using the odd/even selectors in jQuery, I have used row ID numbers as you will see in the demo.  To exempt the cell with the link from the anonymous click function, I have added the clickable class to each cell instead.  If you don’t want this extra layer of complexity, just strip out all the parent() business from the JavaScript.

Please help yourself to the code and let me know what you think. View the demo…

P.S. In case you are wondering why I have an empty third row for each record:  This is to preserve the jQuery-based alternating table row highlighting that uses the jQuery even selector.  Since Janko’s solution also relies on this method, it was wiping out my table striping.

Smashing Mag: How to Support IE and Still be Cutting Edge

Smashing Magazine is more for the web “design” and photoshop crowd, but any developers working with GUI/front ends at all (which is most of us) will find tons of great information there.  Chris Blatnik says that it is the GUI that makes or breaks an app (after all, the users never see the code, no matter how great the developer thinks it is).

Their latest post is about supporting IE on your websites while still utilizing the latest web technologies, such as CSS3.

The payoff:

Remember that the purpose of this post is not to teach you how to hack IE or deal with its quirks or even how to achieve effects by resorting to JavaScript. Rather, it is to explain how we can design and build websites knowing that differences will arise between browsers.

You won’t see people rioting over the lack of rounded corners on Twitter or WordPress; they aren’t even upset by it, because those differences don’t fundamentally break the websites. People can still use the websites and have a good experience. In most cases, they won’t even notice it!

16 Tools for Prototyping and Wireframing

As someone who considers himself a developer first and a designer second, I’ve not previously put a lot of thought into using graphical tools (outside of HTML and my existing dev environment) to prototype front-end layouts for customers.

However, there are some major advantages to mocking up with a stand-alone tool. Once I have a business problem to solve, I will generally build the front end forms as I think they should exist, and demo them to the customer. There are two upsides, the customer sees exactly what he/she is getting, and once I start actual development, I’ve already coded the form template(s).

Another upside is that by hand-coding your prototypes, you are really forced to learn HTML, CSS, etc. on a nuts-and-bolts level.

The downside, however, is that this is quite time consuming, and if major changes are required from my original guess, then that’s even more time lost.

Over at Sitepoint.com, Gary Barber discusses 16 tools for prototyping and “wireframing”, which is just another, new, Web 2.0 word for building front-end mock ups. The prices on these various tools range from free to multiple thousands of dollars, and the platforms range from desktop to completely web based.

selected-home

Pencil

The most intriguing of these to me is Pencil, a free Firefox plugin (all platforms supported). My extremely raw first impression is that the tool is fairly rough around the edges, but for mockups you’re not looking for a ton of spit and polish (else customers start obsessing about the details.. “can this color be that color?”).

Finally, at the annual IBM Lotusphere conference this past January, I had the opportunity to sit in on a presentation by Chris Blatnik and Thomas Duff entitled “Getting to WOW… Interface First Design”. These guys had some impressive “out of the box” ideas about interface design, including color pallette selection and involving your your customer in the prototype process using simple construction paper, rulers, etc. Chris’s blog, Interface Matters, includes a wealth of related information for those wanting to become better interface designers.

Add cool, Apple-like reflections to your images

Cow’s Reflection.js allows you to add reflections to images on your webpages. It uses unobtrusive javascript to keep your code clean.

It works in all the major browsers – Internet Explorer 5.5+, Mozilla Firefox 1.5+, Safari, Google Chrome and Opera 9+. On older browsers, it’ll degrade and your visitors won’t notice a thing. Best of all, it’s under 5KB.

This is so simple its almost impossible to screw up.  Step 1) upload reflection.js to your file system. 2) Include in your HTML header using <script></script> tags, 3) add class=”reflect” to any image you want to have a reflection.

Here’s an example:

_0012_front_t

There is going to be a small performance hit as the script processes the image, so I wouldn’t recommend going crazy with this feature inside a web app.  However, for marquee images and static pages, this is a really slick “Web 2.0” addition to any website.  For those developing for a large IE6 installed base, I’d caution against extensive use of this script.  I’ve not tested it, but my guess is with Safari you’d never notice a performance impact.  With Firefox it should be fairly minimal and still worth the trade-off.

And yes, I’m also using this on this site.

PNG transparency fixes for IE6

If you’re a web developer, chances are you’ve grown to hate Internet Explorer 6 due to its inconsistencies with respect to CSS, JavaScript, and standards in general.  One additional annoyance is IE6’s lack of support for PNG transparency.

At my institution, we still have a very large installed base for IE6 (over 70% of our machines), so I cannot get around coding for IE6.  I’ve been able to avoid the issue in the past by just not using PNG images.  But at some point, GIFs won’t cut it, particularly in the realm of application icons (See Fam Fam Fam Silk icon set).

I have employed two separate approaches to address this problem.  The first is a JavaScript “PNG Fix” that the browser will apply to each image on the page.  Essentially the JS script will loop through every PNG, applying the “progid:DXImageTransform” function to each and thereby modifying the opacity.

There are several “fixes” written to do this, all very similar in function.  The one I like the most is from Daniel McDonald at Project Atomic.  Why do I like it?  Its simple (only 25 lines of code) and therefore quite fast.  If you have a lot of PNG files on your pages, you can sometimes see each file get transformed as the script slow-walks down the page.  Speed is of the utmost importance in any web application.  Just include the JS file, a “blank.gif” image, and include a couple of lines in your page header, and you’re done.

The second approach I’ve used to tackle PNG transparency issues in IE6 is really an outcome of the first.  The Project Atomic fix works great, unless your PNG is part of a CSS element such as a background image.

The real issue at hand is that IE6 doesn’t support 24-bit transparency.  It does, however, support 8-bit.  So why not change your 24-bit PNGs into 8-bit?  For an entire application, this could become a huge amount of work for very little value added, hence implementation of the Project Atomic fix. However, for those less common instances of PNGs as background images, I have followed Matthew Capewell’s tutorial to transform the 24-bit PNGs into IE6-compatible 8-bit images.

We’re stuck with IE6 for at least a few more years (When Microsoft finally stops providing XP to PC makers for new machines), good Web Developers should be able to deal with IE6 rather than just ignore it.

Note: The Project Atomic Fix is actually in-use on this site, in case you were wondering.

Fam Fam Fam Silk: Web Application Icons (Free!)

For those that haven’t already found this great set of application icons, I present to you the Fam Fam Fam “Silk” icon set. I’ve been using these for a couple of months and just love the modern look and the fact that over 700 icons means you’re certain to always find the icon you need from the pack.  This keeps your icon set consistent across your application.

From FamFamFam.com:

“Silk” is a smooth, free icon set, containing over 700 16-by-16 pixel icons in strokably-soft PNG format. Containing a large variety of icons, you’re sure to find something that tickles your fancy. And all for a low low price of $0.00. You can’t say fairer than that.

Icon sample: Empty drink glass Icon sample: Hourglass delete Icon sample: Green tag Icon sample: Expand sidebar Icon sample: Tile view Icon sample: Page Icon sample: PHP page Icon sample: Internet Explorer icon Icon sample: DVD Icon sample: Align left Icon sample: Bold text Icon sample: Numeric list Icon sample: Play button Icon sample: Soccer ball

Current version: 1.3.

Another great attribute to this icon set is the price.  Hey, when you work in an academic setting, “FREE” really gets your attention!  There are some licensing details, so I would encourage reading through the documentation once you’ve downloaded the zip file.