How A Huge Browser Incompatibility Bug Went Unnoticed With Our Online Store

Share On Facebook

My wife and I try to make an effort to update our online store website with fresh content at least once a week. In addition, we constantly put up new products and take down old obsolete products as well. The upshot is that our website gets updated on a fairly regular basis.

It’s rare, but sometimes we also tweak the structure and html of the store to mix things up. And three weeks ago, I rearranged the way a few product categories were displayed which introduced a huge bug that went completely unnoticed.

The funny thing is that orders continued to come in just fine and everything seemed completely normal.

bug

Photo by azrainman

I wasn’t just being careless either. Being a paranoid person at heart, I always do a fair amount of testing every time I make even the most minor of changes.

But I probably wouldn’t have caught this particular bug for a long time unless this customer called and saved the day.

The Customer

We were really lucky that this particular customer decided to call in and place an order despite the fact that our website was broken. I would imagine that most customers who saw this bug would probably have left without saying a word.

Customer: Hello? I’m on your site right now and I can’t seem to locate the product that I want. I’ve shopped here before but ever since you changed the layout, I can’t seem to find a thing!

Me:We apologize for that ma’am. Periodically, we make a few changes to our website to keep things fresh. What can I help you find?

Customer: Well I’m looking for your embroidered shoe bags. You used to have a menu which I could click on, but it has disappeared. Your new layout makes it hard to find anything.

Me: I’m sorry about that, but the menu hasn’t changed at all and I can see the menu just fine. A few changes were made to the store several weeks ago, but they were all very minor and didn’t affect navigation.

Customer:Well I can’t find anything anymore. I’ve shopped here before and I’m telling you that the menu is missing.

Me: That’s really strange and I apologize. I’ll have someone take a closer look at our website right away. In the meantime, we do have your shoe bags in stock and I can just take your order over the phone.

Narrowing Down The Issue

After I got off the phone with the customer, I immediately went through every page of the website but I could not notice anything wrong or different with our online store. I even tried all of the browsers on my PC, IE, Firefox and Chrome.

Normally, I would have brushed this problem off because we get a ton of customers who barely know how to use a computer.

But this particular customer seemed competent so I took this issue a bit more seriously. Ultimately, I decided to call her back and graciously asked her to take a screen shot, post it into Microsoft Word and email it to me.

When I saw the screenshot, I was appalled. Our menu navigation sidebar was in the completely wrong place. Instead of being alongside the products, it was now pushed all the way down below everything on the site. If you didn’t scroll down all the way, you would never be able to see it!

The Bug

Turns out that this customer was using an old version of Internet Explorer and I had hit one of the many Internet Explorer bugs out there! The specific bug that I hit is described at length here.

But in a nutshell, Internet Explorer was adding extra pixels to one of the new sections of html code that I added which made that section bigger than it was supposed to be.

As a result, anything on the right side of the screen got pushed down the screen and made the entire website look broken. Since I do all of my testing on Firefox and Chrome, I never would have noticed this problem at all if this customer had not sent me a screenshot!

Checking The Demographics

I was under the impression that most people out there had stopped using older Internet Explorer versions. After all, I read recently that Adobe and some other software manufacturers were dropping support altogether.

So I decided to check the analytics for my online store and I was pretty shocked. The majority of my customers use Firefox and Chrome, but a full 17% are still stuck on an ancient version of IE! Do these people not perform automatic updates?

Based on this data, it is clear that I still have to test for more browser versions. Unfortunately, I don’t have it installed nor do I want to have it installed on my machine ever! So what can I do?

Browser Compatibility Testing

Fortunately, there are several services out there that can help you test out your site on every web browser known to man. Personally, I now use Browser Shots. You simply enter a URL, check off which browsers you want to test and click on the ‘Go’ button.

Then depending on the number of browsers that you have selected, images will start popping up on the screen immediately that tell you how your website looks on the various browsers.

Don’t click on too many different browsers otherwise the test will take forever. Instead, what I do is select the browsers that make up 95% of my clientele. In my case, it’s IE, Chrome, FireFox and Safari.

Personally, I need to beef up my Safari testing. Because of the iPhone and the increasing popularity of Macs, Safari seems to be gaining market share at a rapid pace.

The Moral

Don’t discount cross browser compatibility even if you are making the most minor of changes. I was just looking through the buglist for IE6 and it is ridiculously long! There is no way that you can possibly learn and account for all of its shortcomings.

Check the analytics for your website and do cross browser testing on the most popular browsers for your site. It’s a pain in the butt, but you could be alienating a significant percentage of your clientèle if you don’t.

If this customer didn’t call, I could have lost 17% of my business just like that!

Ready To Get Serious About Starting An Online Business?


If you are really considering starting your own online business, then you have to check out my free mini course on How To Create A Niche Online Store In 5 Easy Steps.

In this 6 day mini course, I reveal the steps that my wife and I took to earn 100 thousand dollars in the span of just a year. Best of all, it's absolutely free!

Share On Facebook

Similar Posts

Have you read these?

18 thoughts on “How A Huge Browser Incompatibility Bug Went Unnoticed With Our Online Store”

  1. Ugh. IE (in all versions) is such a pain to deal with. As to testing for Safari, I remember reading that it uses the same rendering engine as Google’s Chrome, so hopefully that means you only have to test for one of them.

    1. @Mike
      That’s good to know. Each and every browser has many versions and different bugs associated with each release as well. In general, I think it’s safest to use BrowserShots and go ahead and test everything straight up.

      @Bible
      All legacy software should be banned!

  2. Another great lesson learned Steve. I stopped using IE a few years ago and always forget to check browser compatibility when I am building websites or blogs. Good detective work?

    1. @Steven
      I dropped IE the day Firefox came out:)

      @Casey
      I’m constantly surprised by how nice and helpful customers can be.

  3. Luckily that customer was so nice and called. Thanks for the heads up!

  4. A couple of weeks ago I read Technorati’s rethink on their support for IE6 (http://blog.digg.com/?p=878). As much as we all want to say goodbye to seemingly endless list of workarounds, it seems like it’s here to stay for a bit longer. For my site it’s just over 15% of visitors that are IE6 or IE5.5.

    It’s definitely worth the extra effort of cross-browser testing. Otherwise you really have no idea of the problems your visitors and customers could be having. Your post is a good reminder to keep it in mind.

    1. @Kerrin
      Thanks for the link. I think browser support all depends on your demographics. Clearly, a good portion of our visitors still use IE 6 so we have to continue to test for it. But I would imagine that if you ran a site dedicated to techies or early adopters that you probably wouldn’t need to worry as much.

  5. Sorry for the conflicting information above – I thought it was Technorati but then looked up the link and it was Digg – forgot to correct it though :)

  6. I can totally see how this could easily happen. Like you, I usually test on the newer versions of browsers. Would have happened to me too!

    1. @Carmen
      Thanks Carmen for making me feel better though I’m still kicking myself

  7. Another box model (IE Bug Model) issue. Thats why I still cant ignore IE even if it so tempting. Im using IE tester http://my-debugbar.com/wiki/IETester/HomePage to do the testing in IE versions 5.x to 8.

    Its so nice to know that you got a customer like that. Congratulations Steve. Its a real blessing.

    1. @jay
      Thanks for the tip. Yep, our customers continue to amaze me. I’ll check out your link tonight.

      @Robert
      Wow. This sounds like the perfect tool! I’ll have to go check it out. The disadvantage of browser shots is that it takes a while for the screen shots to pop up on the screen. Being able to do real time side by side testing would be awesome.

  8. I’ve read about these issues time and time again being a designer. I have a treat for you though as you do your testing! check this out for browser testing tool from adobe.

    https://browserlab.adobe.com/index.html (requires an adobe login)

    Lets you do all sorts of side by side testing quickly including IE 6…loads up all the previews in one shot…really well done interface.

    …I’ll just go ahead and say ditto to everyones comments above also.

  9. I know the feeling. It’s a shame browsers like IE are getting so much exposure, but at the end of the day we should just acknowledge this reality and get on with our own business.

  10. I just tell everyone that is visiting using IE that they are in need of a new browser. I know Microsoft is trying to step up their game, but let’s face it, IE will always be the lesser browser that gets any webdesigner in rage mode.

    I still test everything (except IE6) but there is no excuse for using an old browser. Not even for companies that claim their systems won’t work on newer browsers. IE6 is 10 years old and people using it should be banished from the internet. They’ve had enough time to upgrade.

Leave a Reply

Your email address will not be published. Required fields are marked *