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

| 5 replies | Short URL: http://benfra.in/1yb

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:

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.

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:

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.

About The Author

5 Responses to “What is Old IE and designing for the desktop costing us?”

  1. David Thatcher

    Hi Ben
    Thanks again for writing your book, Responsive web design with HTML5 and CSS3, which I still use because it well laid out and clear (to me).

    I am again adjusting the way I do web design this time for the new semantic markup elements in HTML5. I don’t want to use modernizr if I can help it and I just checked some browser usage stats for IE6, 1E7 and IE8 for the month of Aug ’13 for some of the pages I have created.

    Combined usage of those three browsers ranged from 1.9% to 12.7% of visitor total which means sadly I can’t use the new tags without a fix.

    My question to you is:
    Should I use …
    or

    or not?
    Or is this dumb?
    Or should I just concentrate on implementing modernizr correctly which I don’t fully understand?

    I just noticed the code on this very page has a variation of the first format with the footer surrounding the div.

    I just checked this page in IE8 on Windows XP (still a common browser/platform combination) and it looks pretty good except it loses the black background colour for the footer rule
    and maybe more from that rule but it seems to have a good work around.

    I don’t understand role=”” yet.

    Thanks again for your time and I don’t mind if you give me a short answer.

    regards David

    PS Here are the browser usage stats I used as (visits/total visits) and some known demographics for those sites. (demographic)
    IE7 (1/435) , IE8 (12/435) total 3.0%
    IE7 (0/931) , IE8 (18/931) total 1.9%
    IE7 (20/1034), IE8 (13/1034) total 3.2%
    IE7 (0), IE8 (4/101) total 4%
    IE6 (5/2935), IE7 (53/2935), IE8 (167/2935) total 7.6% (investors)
    IE6 (3/4502), IE7 (13/4502), IE8 (200/4502) total 4.7% (18-25y.o )
    IE6 (1/3982), IE7 (17/3982), IE8 (147/3982) total 4.1%
    IE6 (2/3272), IE7 (27/3272), IE8 (178/3272) total 6.3%
    IE6 (5/1710), IE7 (45/1710), IE8 (168/1710) total 12.7% (older)
    IE6,7&8 Total 215/2124 = 10.1% (tourists)
    IE6,7&8 Total 880/7034 = 12.5% (regional Australia not city)

  2. David Thatcher

    Whoops the code didn’t poink through…

    using the footer tag as an example…<footer><div id="footer">…</div></footer>
    <div id="footer"><footer>…</footer></div>

  3. David Thatcher

    Hi again Ben
    In the example above I meant to include the bit where the CSS looks like footer,#footer{…}
    so quite a simply coded answer, or is it?

    Maybe I should use html5shiv? I just tested it and it works on IE8 with just without having to use … only ….
    https://github.com/aFarkas/html5shiv/

    Sorry if you have dealt with this elsewhere but I am trying to find the simplest solution and I can’t believe adding javascripts which change all the time is the simplest way to allow for older browsers.

    Thanks again for your help!

  4. Ben Frain

    Hi David,

    If you are struggling getting your head around Modernizr, this may help: http://benfrain.com/beginner-and-designers-guide-to-using-modernizr-to-solve-cross-browser-challenges/

    However, the HTML5 shiv is actually what Modernizr uses. If you just want support (and by support I simply mean you can use them to wrap content without the layout breaking up in IE6/IE7/IE8) for HTML5 elements like footer, header, section etc then the HTML5shiv alone will suffice.

    Modernizr is useful primarily if you want to fork your code. For example, ‘if you have support for 3danimations do this, otherwise do something else’.

    Pg 120 of the book covers ARIA roles too ;)

  5. David Thatcher

    Thanks Ben for your time to answer my posts which were unsuitable for this page anyway and which I should have taken more time over, sorry about that.
    Please delete them if you feel they are dumb which I do.
    I liked the article and whilst I agree with the sentiment, I feel the reality is that we should design for older browsers because even though they are behind the technology curve they deserve to see the same content as everyone else.
    Same goes for 1. people with disabilities and 2. people who are frightened of the big web brother and turn javascript off.
    Why should they be disadvantaged by re: 1. exclusive coding and hard to implement semantic elements which their screen readers can’t understand and 2. Fear which just maybe justifiable.
    So I have decided after being de-evangalised by Mr. Luke Stevens to not implement the HTML5 ‘semantic’ elements at all and concentrate on proper outlining and accessibility via ARIA roles instead, thanks for your advice.
    Probably my decision was also influenced because I know that a website with a tables based layout and no CSS can still rank well in the search engines so I know that Google doesn’t care about the latest HTML specs…so why should I?

    Microdata yes, WAIG ARIA yes, Semantic elements of HTML5 no.

    These decisions are important and are partly in our (web designers) hands because if we don’t implement changes in the specs then they cannot remain important. .
    If we do what is right for everyone then the browsers and other parties have to follow us and we are contributing to shaping the web the way it started off being and I think it should have continued to be, namely;
    Easily accessible and easy to implement.

×

Comments are closed.

928Days
928 days since this post was last revised. Specific details are likely out of date.
1883 words
MENU