This sparked a long and heated debate in a number of web design agencies and clients I am working with (or have worked with / for), whether it would be worth just dropping the support for Internet Explorer 6 and ask users to upgrade their browsers so that they can enjoy the website to the fullest.

Coming from a usability, accessibility, SEO and web dev background, I thought it might be a good idea writing why I would recommend supporting (or not supporting) IE6 in the industry I am working for.

Looking at our industry – what made IE6 stay

With the release of Windows XP in October 2001, users were greeted to the new – bundled – version of Internet Explorer 6. Companies, schools and universities planning on buying new hardware tended to use resellers such as Dell to buy a number of same-spec machines at a bulk discount – and with all machines either shipping with XP or Win2000, the reign of IE6 was established.

Some stock-checking and invoicing software would only work with IE6

System admins were able to roll out updates and software easily, as all machines were virtually the same, and keeping control of networks became relatively easy. Additionally, intranet software was bought or developed based on IE6, since every machine came with it this made development and testing a lot quicker and easier.

In November 2005, FireFox 1.5 became the first real free browser on the market to rival IE6 for its ease of use, and coupled with the ability to extend the browser’s capabilities through extensions it became the browser of choice – if you had the ability to choose. You see, the browser (just like 95% of all applications) needed to be installed. This wasn’t a problem on your own personal computer, but when trying to do this in an office environment (or any institution) then things were a bit more difficult: most users were not given administration rights to their machines to prevent abuse or installing malicious software. Most software requests had to go through a number of channels, from procurement (if licensing was involved) to IT (to see how much work was involved and how much time would be required per machine) to head of department (to sign the request off and add additional reasons for the request) to someone a lot higher up to ultimately sign the request off. A simple “Can I have software XYZ” could easily take months to get it approved.

Internet Explorer 7 was released on 18 October 2006

With the arrival of Windows Vista and Server 2008 in October 2006, Microsoft released Internet Explorer 7, 5 years after the release of IE6. At that time, IE7 was only available for Vista and Server 2008 machines, and it was not until October 2007 that IE7 was officially available for XP machines. Companies were once again given the option to roll out IE7 to every machine under their care, however this didn’t happen: rolling out IE7 to all machines in bigger companies or institutions would not only cost a lot of time and – more importantly – money (system admin time, potential upgrade costs, etc), but the software used for business purposes (such as stock management software, accounting or counter software) was built on or running on IE6, most of the time exclusively, and paying for this software to be upgraded was a very expensive option (and sometimes the company that wrote the software did not even exist anymore).

As such, IE6 came to stay with us, and it will probably do so for a long time to come unless Microsoft was to offer free upgrades to companies and allow backwards compatibility of IE6, if only at least for the software and not for the browser use. And I somehow cannot see that happen.

.

Affecting your target audience

Now this was the general “industry” as we have it out there this year. What needs to be considered is how much of that sector fits into your target audience. Every website offers different bits of information, services or products, and each website has a different target audience with different needs or requirements and expectations of the website (if you read my article on information architecture and user testing you will be aware of different user scenarios to test a website with).

The main target audience I am dealing with is the travel and tourism industry. Our target traffic (based on a survey conducted in Jan / Feb 2008 by three of my clients) is coming from:

• Users at work, looking at holiday packages and destinations at work during their breaks – ~ 65%
• Users at home, either planning with the family or reading up on what they found at work – ~35%

Just over two thirds of traffic is coming from people using company / education networks. Depending on your target audience it might be a good idea to look at where your main traffic is coming from to paint your own picture for your market.

.

IE6 today – the stats

Let’s have a look at Google Analytics. These are the June / July stats of a holiday cottage provider based in the UK (we are looking at a slow month):

Web stats from a holiday cottage provider. IE accounts for 71% of the traffic

Interesting picture, almost three quarters of all traffic is coming from Internet Explorer.

Let’s break it down:

22% of IE-using visitors are using IE6. Interstingly, a very small number are still using IE5.x

About 16% of all visitors are using IE6 to browse the website, read more information about the product or destination and make a booking. A fifth of all bookings are made using IE6 – very interesting fact to keep in mind.

.

Debunking some myths about IE6

Now having looked at the stats and a brief history, let’s have a look at some of the most commonly used phrases in the last couple of weeks from my industry:

Myth 1 – No one uses ie6 any more

Looking at the stats above, this simply isn’t true. The website usage of people using IE6 is still significant enough to not ignore it. Again, this depends entirely on your industry, but if you are working in travel / tourism / holiday properties then you really ought to keep that in mind.

Myth 2 – Developing for IE6 is difficult

That entirely depends on what you are planning to do. I have yet to encounter a problem that I could not overcome for IE6. Some websites (such as www.visitpeakdistrict.com for example) have been built by colleagues and myself with no IE stylesheet at all! There are plenty of resources out there to aid you (one of my personal favourite ones being the definitive guide to taming IE6 by Jeff Starr) with developing for IE6, from flickering backgrounds to missing text (usually it is just a width or height-issue anyway), and jQuery and other plugins still work reasonably well for IE6 and degrade gracefully if not.

Myth 3 – IE6 is bad user experience

Whoever said this clearly does not have a grasp of what “user experience” actually means. As a piece of software IE6 “works” (else it would not have passed QA at Microsoft), it allows for bookmarking, browsing, searching, information gathering and even levels for customisation, which I believe is delivering a pretty good user experience.

The user experience this person was talking about is not defined by the browser, it is defined by the experience the website has to offer! It comes back to the points above – if you cannot code properly for IE6 then it is you who is causing this user experience issue.

Myth 4 – No one supports IE6

Wrong. Many support IE6 still to this day, web developers, software companies, and even the most crucial web techniques such as jQuery or Flash support IE6 (hell, Flash doesn’t even support a 64bit plugin properly!).

Myth 5 – it is easy to upgrade your browser

Just because it is easy for you to upgrade doesn’t mean it is for everyone. Put yourself into the position of an office employee working for a big company. This comes back to the history of IE6 I mentioned earlier, upgrading a browser is difficult because:

• The computer you are using may have a very old operating system
• You may not have administrator rights to do so
• You may not be able to justify why you need to have a new browser, and approval may take a long time in a bigger company
• You may not be able to justify the time and costs involved to upgrade all machines with a new browser, let alone a new operating system.
• Software on your machine you are using for day-to-day work may heavily rely on IE6
• You don’t know how to upgrade

.

A lesson in history – when things went wrong (a case study)

A client of mine used this warning once. The result - over 2,000 complaings, 81% drop in traffic

About 2 years ago I was working with my team on a website for a relatively big UK travel company. Because the client wanted new functionality on certain product pages (interactive pricing grid and “add to basket facilities) they decided to make this available only to  certain newer browsers (against my company’s recommendation and to save development time), and set up an error message (see screenshot on the right) when visiting those new pages and asked us to monitor traffic in real-time for these pages and the whole of the website.

About 3h after putting these new pages (and this warning) up the CEO’s office rang to tell us that they received over 2,000 complaints about the new error message and had an over 80% drop in traffic and asked us to quickly take the new pages down and replace them with the old ones – and to plan in time to work on a cross-browser solution.

.

Looking ahead

IE6 is sadly the only browser that will stay with us long after IE9 or maybe even IE10 has been released. Many companies cannot afford the time and money for purchasing new software licenses or changing operating systems because a lot is depending on their current set-up.

IE6 is a problem for many web developers, myself included, and many of us are spending hours, even days, making a website work properly across all browsers. What you need to think about is: who is your target audience, and what computer capabilities do they have? And are you willing to take the plunge and not support IE6 and lose X% in visits and potential custom?

How is your industry affected? Are you still supporting IE6?

.

Wave Toolbar

This one has been mentioned by me before, however it begs for a second mention. Its ability to display a website in various ways to test for DDA compliance (from text-only to website structure and error displaying) makes it a must-have for everyone taking accessibility serious.

Download the WAVE toolbar

Save images

This is an interesting addon as it allows you to download all images of a website to a folder you specify, including the ability to choose size, dimensions and type of images you want to download and to ignore duplicates. You can even download all images from all open tabs if you wish. A very useful addon if you are required to copy a client’s images if there is no backup or the ftp details have been lost.

Download Save Images

Better Gmail 2

Better Gmail 2 is an upgrade of the GreaseMonkey user script-set “Better Gmail”, but this version also works with Gmail’s new interface. If you use Gmail often or even for work then this is a must-have extension!

Download Better Gmail 2

ImageZoom

ImageZoom – as the name suggests – allows you to zoom in, zoom out, fit image to screen or set custom zoom on individual images within a web page. A very useful tools to see the finer details of smaller images for more detail or to spot mistakes during CSS/HTML cutup.

Download ImageZoom

Add Bookmark Here ²

This is probably one of the most useful extensions I found this month and one I am now using regularly on a daily basis (mostly in conjunction with quality links from @mayhemstudios, @imjustcreative, @adbert, @mistygirlph and @Minervity…to mention a few!) In a nutshell, this extension adds a new context menu item in your bookmarks folder called “Add Bookmark here”. No more dragging a link to a folder, no more “Add to bookmarks…” stuff, this one is a life-saver! Try it out, let me know what you think!

Download Add Bookmark here 2

.

Honorable mentions – a useful Thunderbird extension

Attachment Extractor – This is a very useful addon which extracts all attachments from selected messages to then delete, detach or mark-read these emails.Very useful in conjunction with turning your Thunderbird into the ultimate Gmail client.

Download Attachment Extractor here

.

Related links:

• On web development – How to install FireFox 2 next to FireFox 3
• Firefox extensions for usability, accessibility and SEO experts

I was asked by a couple of fellow twitter users to divulge my plugin list, and since I keep track of them myself at times I thought this post would come in handy for everyone.

.

Starting with the basics – the toolkit

With a setup of IE5, IE6, IE7, FF2, FF3, Safari, Opera 8.5, Opera 9.6, Google Chrome and Lynx (on 4 different operating systems) I prefer to keep things in order and easy to maintain and distinguish. That is why I tend to set up my FireFox browsers with Mr Tech’s Toolkit. This toolkit is pretty much a Swiss Army knife, allowing you to install a multitude of extensions (even allowing you to make some older / newer ones compatible with your version!) and editing your Firefox version including the title bar. It is also quite useful when you are installing a number of extensions at once (say when reinstalling your browser from scratch) as it can disable the waiting times and automatically download / install updated versions.

Download MR Tech’s Toolkit

.

…and the usual suspects

Here are three tools you should never work without:

.

Web Developer Toolbar

The Web Developer Toolbar - click to enlarge

The Web Developer Toolbar plugin enables you to check your website’s content with and without styles, scripts or images, it can outline all form and layout elements, you can resize your browser window to any resolution, and – and that is what I use it for mostly – it enables you to validate the website’s HTML and links as well as against Section 508, and the Web Accessibility Initiative’s guidelines.

Download the Web Developer Toolbar

.

Firebug

Firebug in action - click to enlarge

Everyone knows it, everyone loves it. In a nutshell, you can edit live pages on the fly (temporarily and only in your browser of course), be it its html, css or even javascript. A wonderful tool for every developer, and for accessibility purposes it has a lot of options for you to check if scripts cause any problems or if other items can be done in CSS rather than graphically, or if the website you are browsing loads quickly or if any elements cause slow-downs or break.

Downside of the addon is that it is quite resource-hungry, and if the page you are on is using a lot of scripts you can expect either intermittent stand-stills or complete crashes. Then again, this is most likely because of that site being developed really badly in the first place

Download Firebug

N.B. If you are looking for similar fuctionality in Internet Explorer, why not download the Internet Explorer development toolbar from here?

.

ySlow!

ySlow in action - click to enlarge

ySlow is a Firebug addon developed by Yahoo based on its best-practice web performace guidelines. It adds a new tab to Firebug and enables you to see how well the website is performing based on a grade system, followed by suggestions on how you could improve loading times and scripts.

In addition, it also calculates the total size of your web page (for both empty cache and primed cache) and is able to list all the components of that page including load time, size and HTTP response headers.

Download ySlow (requires Firebug to be installed)

.

Usability and Accessibility extensions for Firefox

These are the main tools I am using almost daily. Please note that some plugins may be doing the job of others, however I am used to the way I use certain tools, so I am happy to ignore that fact.

.

Fangs

Screenshot of Fangs - click to enlarge

I was working on a project a couple of years ago where I was helping a charity to make their website accessible for their blind users. Seeing (or rather not seeing) a website in a completely different light made me realise that we take a lot of things for granted these days, and ever since then I wanted to make a difference, pushing website accessibility in every project I am working on. And Fangs helped me a lot.

Fangs creates a textual representation of a web page similar to how the page would be read by a modern screen reader. Fang generates a text-output of your website (saves you listening to a screen reader and having to rewind or forward it), showing you – literally – how your website will be displayed / read using a screen reader. Fangs also displays all headers and links on that page, enabling you to see which links will still require rewording or if some links are clearly not easily to be found.

Download Fangs

.

Firefox Accessibility Extension

Reporting feature - click to enlarge

One of the usual suspects when talking about “web accessibility” over the last couple of years, and the guys over at the Illinois Center for Information Technology Accessibility have done really good work with this one. Be it a quick report of your site (see screenshot to the right), showing up where forms lack labelling or listing all objects and their problems – this extension does quite a bit. Add the ability to validate your site against a number of W3C specifications and you are good to go!

It even has a bit of SEO value as it can list all headings and links (including alt  tags and title tags) at the click of a button, and it allows designers to check their website design for contrast and background imagery.

Download the Firefox Accessibility Extension

.

Wave toolbar

WAVE's error reporting in action - click to enlarge

Next to Fangs I feel that the WAVE toolbar is probably one of the most useful plugins for checking for accessibility issues or omissions. What makes it unique in a way is it can display the website you are testing in a number of different ways:

• Display any errors on your site (such as missing alt-tags, missing labels, incorrect heading orders or hidden content (see screenshot on the right)
• Display structure or order of your div’s, tables and headers
• Easily switch between outline or text-only versions of the site

Especially when working with sites that require DDA ‘A’ or DDA ‘AA’ standards this plugin will come in very handy.

Download the WAVE toolbar

.

SEO extensions for FireFox

I must admit, I am fairly new to search marketing, I have only started really looking into it about 15 months ago, and I am still trying to get my head around a couple of things here and there. Here are a couple of plugins I find very valuable in my day-to-day SEO activity. Again, some of the plugins probably do the same job, so feel free to experiment.

.

SEO for FireFox

SEO for Firefox XRay feature - click to enlarge

SEO for FireFox is a very handy plugin, it was designed to enable search engine marketers to evaluate the value and competitive nature of a market much easier at the press of a few buttons. SEO for Firefox pulls out a lot of data for your site at the click of a button: Page rank, domain age, page links, .edu links, Alexa rating, DMOZ information, whois, links from sites such as del.icio.us or Technorati…all in one quick screen. Sadly, it doesn’t export that data in a handy file, but hopefully a future version will.

Enabling SEO for Firefox enables you to see additional information for each search result in Google, such as PR, Age, links, Alexa rating, DMOZ, etc, which can be quite handy when it comes down to quickly checking your competition for a search phrase.

A few versions ago the guys at SEObook added an XRay (see screenshot to the right) to the extension which displays a lot of useful information such as header links, incoming and outgoing links, meta information, keyword density and the ability to export all links into one csv file.

Download SEO for Firefox

.

Search Status

Search Status and its functions - click to enlarge

Search Status is a tiny plugin at the bottom of your status bar that allows you to see Pager ank, Alexa rank and Compete rank in a handy little progress-bar format. Obviously that is not all, you can check Alexa incoming links, Alexa related links and back links from Google, Yahoo! and MSN. A handy combination!

Additionally, you can check out the robots.txt and sitemap.xml of the site you are looking at. Again, if some of the reporting features such as the Link Report could be exported somehow then the plugin would have even more value, we’ll see what the future holds.

Download Search Status (if that link doesn’t work – like it did for me – here is the direct link to the author’s site)

.

Alexa Sparky

Sparky: traffic trend of a website in a small graph in the status bar

This is a plugin that was only recently recommended to me by my good friend Matt Lewis. Alexa has provided a FireFox plugin that enables you to view the traffic trend of a website you visit in a handy graph format, together with the actual Alexa rank.

Additionally, Alexa Sparky allows you to view related links to this site (where do most users go after visiting this page?) and enables you to search the web for your site and find all links linking to it (though this seems a bit broken on occasion).

Download Alexa Sparky

.

Raven’s SEO Toolbar

The Design Analyzer in action - click to enlarge

One of my latest additions to FireFox is the Raven SEO toolbar. The guys behind Raven SEO Tools have done a great job at integrating a functional toolbar to tie in with their SEO tools suite. The toolbar allows you to analyze a website for backlinks, top keywords based on subject, and a cool ‘Design Analyzer’ (see screenshot to the right). What this does is it checks your site for a semantic structure, for page content, depreciated HTML, inline styling, outgoing links and – my personal favourite – it checks your site in the Lynx browser.

The toolbar also enables you to add link details to the website you are on, meaning you can easily keep track of which links you requested, which ones are active, inactive or declined, and it keeps track of the contact details and original page ranks of the domains you requested or exchanging links with. Handy? Definetly, saves my keeping track of that in Excel!

The two minor downsides of the toolbar I found are that you will need to insert a new Google Analytics tracking code (you cannot take over your own analytics account it seems) and you are unable to check for analytics or scheduled reports through the toolbar itself. Nontheless, the toolbar’s analyze tools are great and work very well, and the link details tool is working exceptionally well.

Download Raven’s SEO toolbar (read more about Raven SEO Tools)

.

Are you using an accessibility, usability or SEO extension that has not been mentioned here? Please share it with us!

.

Related reading:

• On information architecture and user testing – accessibility and usability testing
• On usability and accessibility – please display PDF links properly!
• On link usability – the art of keeping call to actions consistent