What is Old IE and designing for the desktop costing us?

Thanks to the web standards movement we can build our sites using W3C compliant code, safe in the knowledge that, design wise, all modern, standards compliant browsers (such as Firefox, Chrome, Safari and Opera) will render things similarly. However, checking the same design in Internet Explorer can make a grown coder weep; it often means the start of the tiring ‘IE fixes’ stage we all loathe. For IE8 and below, this is usually a frustrating cycle of applying a fix and then testing it, applying another fix and then testing it and on the process goes Ad nauseum. Whilst IE9 has made strides in standards compliance, and work there is often minimal to bring it (mostly) in line with other modern browsers, should we even bother to patch things up for any old (IE9 and below) version of Internet Explorer?

Is this browser worthy of your time?

Imagine you’re working on a project with the usual time and budget constraints. When it comes to checking the design, I mention a browser that currently enjoys just 14% worldwide market share (15% in the US, 14% in Australia and only 11% Europe). You’ll probably need to boot another system or virtual machine to check it and interact with it too. Oh, and did I mention that not only will you have to add additional markup just to apply some presentational fixes, you’ll also need to make images for all your corners and background gradients if you want the design to render comparably to Chrome, Safari or Firefox? Would you bother to specifically check and amend the design for this browser? Maybe if it’s market share was growing but that browser is Internet Explorer 8! (source: http://gs.statcounter.com/#browser_version-ww-monthly-201203-201204). What’s more, according to StatCounter Global Stats, all versions of Internet Explorer now account for only 34.81% of global browser usage.

But wait, I’ve read that Internet Explorer has over 50% market share

According to a different source, Net Market Share, worldwide desktop browser usage statistics (the above included both desktop and mobile) for March 2012 show Internet Explorer (all versions) enjoying 54% share of the market. (source: http://marketshare.hitslink.com/browser-market-share.aspx?qprid=0&qpcustomd=0&qptimeframe=M&qpsp=158&qpnp=1). However, when factoring in mobile browsers too, the figure drops to 49.83%. But that’s still some difference from the 34.81% figure at StatCounter Global Stats.

Lies, damned lies, and statistics

It’s worth remembering that statistical browser share data is still only a sliver of the true usage of browsers worldwide. Furthermore, data varies by source because of the confines of each organizations testing methodology. The two sources of data I’m using here (Net Share and StatCounter) do things very differently. According to the website for each:

• StatCounter’s Global Stats (http://gs.statcounter.com/faq#methodology:

Our tracking code is installed on more than 3 million sites globally. (These sites cover various activities and geographic locations.) Every month, we record billions of hits to these sites. For each hit, we analyse the browser/operating system used and we establish if the hit is from a mobile device.

• Net Market Share (http://netmarketshare.com/faq.aspx#Methodology):

We collect data from the browsers of site visitors to our exclusive on-demand network of HitsLink Analytics and SharePost clients. The network includes over 40,000 websites, and spans the globe. We ‘count’ unique visitors to our network sites, and only count one unique visit to each network site per day. This is part of our quality control process to prevent fraud, and ensure the most accurate portrayal of Internet usage market share.

So it’s easy to understand why they’re each getting differing results for seemingly the same set of variables; one’s essential measuring page hits and the other unique users.

What is important: trends

Despite the disparity, whichever statistics are considered, the trends are moving in the same direction. The kindest figures to IE are Net Market Share’s. Even using their desktop browser share figures, IE6 and IE7’s share is so low as to be virtually inconsequential. IE8 on the other hand went from 32.96% in May 2011 to 25.4% in March 2012. StatCounter’s Global Stats meanwhile puts the same test results as 29.06% in May 2011 and just 16% in March 2012. What about the website you are working on? Has there been an increase or decrease of IE usage over the last year? I think we can say with some certainty that Old IE is (mercifully) dying. But is it taking you with it?

The cost of (Old) Internet Explorer

How long, development wise, do you spend fixing up things for IE? 10%, 20%, perhaps even more of a projects allocated time if it’s IE8 and below? Some factors in providing parity for those versions of IE:

• Additional markup needed (typically conditional comments)
• IE specific CSS styles/hacks needed to eradicate layout bugs
• Non validating MS Filters needed within CSS to fix PNG opacity
• Need to create images for where CSS3 support is lacking (shadows, gradients etc)
• no HTML5 form attribute support (polyfill needed)

The upshot is a more bloated code base that is more difficult to write, less maintainable and slower.

Sadly however, I’m not advocating that we all forget about checking things in IE just so we can put our feet up instead. Rather I’m saying that’s development time that could be far better spent elsewhere…

Desktop Vs mobile?

Some common headlines:

• PC Market Records Modest Gains During Fourth Quarter of 2010
• In Q4 2010 sales of smartphones outstripped PC’s
• In 2010, Morgan Stanley research estimated that mobile internet usage will outstrip desktop
• Worldwide Smartphone Shipments Increase 87.2% Year Over Year
• In Q4 2011 sales of smart-phones outstripped PC’s

However you look at the statistics or analyze the figures, it’s irrefutable; usage of desktop systems is declining year-on-year. Usage of mobile devices is expanding at hitherto unseen rates. StatCounter Global Stats for the past year (March 2011 to March 2012) shows desktop usage starting at 95.3% and ending at 91.01%. Mobile meanwhile went from 4.7% to 8.99%. But you don’t need data and reports to tell you this…

Will your next PC/Mac purchase be a desktop?

If you’ve been computing for some time, I’ll bet you used to have a tower system? A nice PC rig or maybe a Mac Pro or PowerMac G5. How about now, still using one? Nowadays most of us have at least one portable and a smart-phone. Even the computers we use at home are changing. Have you ditched a desktop or even a laptop for for an iPad? Or thinking of doing it? Guess what, lots of other people are too (it took just three days for 3MM of the new iPad, released on March 16th 2012, to be sold); these are the next wave of Internet capable devices so let’s support them. Why dedicate our effort, skills and development time trying to patch up the shortcomings of an ailing platform when a new one is emerging and growing at incredible rates?

Wouldn’t you rather build for the next generation?

Consider the time you’re currently spending dealing with IE. How about using that time to specifically enhance for iOS? Or mobile/touch devices in general? Or even making your content just a little more accessible for screen readers? You may not want to implement a fully responsive web design for every project but the considerations for for the ever growing raft of disparate devices is becoming impossible to ignore. Perhaps by not spending time specifically fixing aesthetic issues with Internet Explorer, it would be possible to:

• adapt navigation (perhaps even layout) for differing viewports
• spend more time concentrating on content
• use CSS3 features to ditch swathes of difficult to maintain and slow images
• present alternate button/UX elements to accommodate fingers (rather than mice pointers)
• include simple parts of WAI-ARIA like ‘landmark roles’

But the client wants it to look the same in IE

In this case, I recommend trying to make the client understand that by not attempting to achieve visual parity in IE they can:

• Provide a better experience for the largest growing market of Internet users.
• Enjoy the cleanest, fastest, and most maintainable code base that will look good on future standards compatible browsers.
• Have design elements built using CSS3 rather than images. That means on-screen elements will render far better on the high-resolution screens of the future (current HD devices include the ‘retina’ based iPhone 4/4S and new iPad).

Ultimately, shouldn’t we be advising our clients to stop looking backward and start looking forward?

Testing tools

Shifting focus in this way can seem difficult and it’s not always easy to embrace change, especially when we’re used to working in a certain way. For example, we’re used to using tools like IETester, Browsershots and BrowserLab when we need to patch up IE and check designs across browsers. Whilst this in itself can be a pain, surely, testing multiple mobile devices is just as problematic? It can be, but tools like Adobe Shadow (using the Weinre project) allow a number of real physical devices to be interconnected. Refresh the browser window on one and it automatically refreshes on the others. This takes a lot of the repetition and guesswork away; provided you have the physical devices to test it on. There’s also excellent ways to leverage Google Chrome’s development tools. It’s possible to connect an Android phone via USB and debug from your laptop/desktop. More tools for cross-device testing are inevitable, be ready to embrace them.

Can we ignore IE?

Can we really just ignore IE? As ever in web development, the answer is ‘it depends’. Certainly, unless there is a compelling reason to do so (for example if you’re making something for an institution forced to use IE7 internally) there seems little point addressing purely aesthetic issues in IE 6 and 7. That really is a waste of development time that could almost certainly be better used elsewhere. Many smart people have already come up with possible solutions for dealing with Old IE. For example, Andy Clark favoured serving up a ‘Universal IE6’ style sheet for IE6 back in 2009. It provides basic (nice) typography but little else. Perhaps the time has come to adopt the same principle for IE8 and below? And then leave IE9 (and it’s mobile brethren) to fend for itself?

Want that feature in OldIE? Sorry, it’s a paid upgrade…

An alternative; specifically negotiate and budget in the cost of Old IE development with clients from the outset. As IE usage is so evidently declining, make coding specifically for any version of Old IE a paid addition to basic standards compliant code for all other modern browsers? I’m not advocating charging to tweak the odd thing but if a design is particularly complex and liable to be problematic in IE8 (and hopefully, you’ll have the experience to know that from the outset), it may be worth making provision for this when pricing a job. That way the client can decide where to use their money: old desktop browsers, or the next wave of Internet capable devices (or both)!

Conclusion

In my own experience, if a client can understand the problems and implications of dealing with the varied foibles and shortcomings of Internet Explorer compared with the benefits of building a site today for the growing trend of Internet users (typically HTML5 and CSS3 capable devices with varied canvas sizes), the choice of where to spend development time is simple. The upshot is a more pleasurable development experience for you and a more maintainable and future-proof product for the client.