Troubleshooting Tips for Browser Related Website Issues

Everyone has their favorite web browser these days, and it's easy as a web developer to get so comfortable using one in particular (Google Chrome for me) that you forget to look at how your site looks on all of the other major browsers. If you don't check your site on Chrome, Firefox, Safari, AND Internet Explorer (IE) before handing it off to your customer, though, don't be surprised when you get a call about how a particular page or section looks totally wrong to them.

More times that not, these problems will be seen on IE because of it's quirks in how it handles the latest HTML and CSS. So what do you do when this happens? Well, unfortunately for web developers, some people will probably always use IE, and several of those users will probably be using an out-dated version.

Because of this, saying that your company's website does not support IE at all is not really an option. It is important, however, to determine which older versions of IE you will support. Otherwise, you could be spending hours and hours changing your site to work in a browser that only a very very small percentage of people are actually using to access your sites. At Drive Simplicity, we support IE 8 and newer only. We have monitored the technology that people are using to access our customer's sites using Google Analytics, and there's just not enough people using IE 7 or IE 6 to make it worth the time and money it would take to get the sites looking perfect in these older versions. The image below shows which version of IE new visitors have been using to access one of our sites so far this year.

So, first things first. You will need to find out what browser is being used when the site looks weird. Then, ask what version of this browser they are using. Make getting this information as easy as possible for your customer by giving them step by step instructions on how to obtain this information for their browser. For example, for IE:

1. Open Internet Explorer
2. If you cannot see the main menu options: File, Edit, View, etc. Press the ALT key to display these.
3. Click on Help in the main menu then select About Internet Explorer.
4. Press ALT + PRT SC (print screen) with the about dialog in focus to copy this dialog.
5. Open Paint, right-click on the white area, and select Paste. (You can also press CTRL + V to paste the dialog).
6. Save this image as IE-Version.jpg.
7. Email this image as an attachment to me.

(Note: It is unlikely that they will be using an out-dated version of Firefox, Safari, or Chrome since these browsers update automatically. If they are though, have them download and update to the latest version.)

This is not entirely necessary, but it's usually a good idea to get a screenshot of the problem that your client is seeing too. Most of your customers will probably not use the "correct lingo" when describing the problem, so this helps to make sure that you are looking at the exact same thing. I like usingDropbox for this because if I'm able to convince someone else to install Dropbox using me as a reference, I can get more storage space for free! Plus, it makes sharing screenshots in the future a lot easier. (Note: You could also use Dropbox for obtaining the IE-Version.jpg screenshot above.) Again, make this easy for your customer by providing them with all of the steps to obtain and share the screenshot.

1. Sign up for Dropbox using the link I send you.
2. Open the problem page on your website.
3. Press ALT + PRT SC (print screen) to copy the screen.
4. Open Paint, right-click on the white area, and select Paste. (You can also press CTRL + V to paste the dialog). *Don't ask them to do any cropping or editing because there might be something else on the screen that will help give insight into why they are seeing the problem.
5. Save the image in your Public Dropbox folder as a .jpg, or .png.
6. Browse to that image in the Public folder inside your Dropbox folder, then right-click on the image and select Dropbox | Copy public link.
7. Email me and paste the public link into the body of the email.

Now, if you are lucky, you will be able to open the same browser as the user and see the exact same problems. If the problem is with IE and they are using an older version than you, then using IE 9, you can switch to an older version. To do this, open the IE Developer Tools by pressing F12. Then you can see a Browser Mode drop-down option:

Switch this drop-down to the appropriate version and cross your fingers! If you still cannot see the problem, you may want to make sure they do not have any plugins installed in their browser that are messing the look up. I have seen the Skype plugin do some funny things to phone numbers on a web page.

So, let's pretend that you are lucky and can now see the same problem as the user. If you are pretty new to debugging website issues, honestly, the fastest thing to do is to "turn off" any code that is not important to rendering the part of the page that is in trouble. If you are using some Javascript resources that require their own CSS like Lightbox, then go ahead and remove the link for these for now as well. If it's easier to create a new template with just the important pieces than to comment out existing code, then I definitely say go for it!

Once you have the problem narrowed down, it's time to take advantage of some of the amazing resources that are out there! If you have co-workers or friends that have more experience, then you can definitely ask them for help. They are probably going to be more willing to answer your questions more thoroughly and give you some personalized training than others might be.

However, you might want to do a little more research yourself before getting their help. First you could search for a solution using Google. It's usually helpful to include the browser and version number in your search to get the best results. If you are having this problem, it's very likely that someone else has had it before too, and hopefully they have written about it. You may also want to try posting a question about your problem to StackOverflow. This site is a free Q & A resource for programming. Check out their FAQs on how to get the most out of the site.

I know how frustrating browser related website issues can be! I didn't get into any specific examples, but I can assure you that I have spent my fair share of time debugging things that ended up requiring just a tiny little line of code to change to fix the problem.

The silver lining of these experiences are that when I run across the same problem in the future, I can usually find a solution much more quickly. I say "usually" because my last troubleshooting tip is to make sure to keep a record of the problem and solution somewhere. If you posted the question on a forum somewhere then you are probably already set, but if you solved the problem in house, make sure to keep your notes somewhere so that you can refer back to them later. That way you are not having to go through the same process all over again!

blog comments powered by Disqus