If you’re kind of a newb at web or blog design (like we are), this may be a revelation to you: That awesome-looking website that you just spent the last month of your life creating may very well look like crap to half of your visitors. I know, life does occasionally suck. Undoubtedly your mama mentioned that life ain’t always fair, right? Well, this is one of those occasions. They say “variety is the spice of life,” but in this case variety can be a big ol’ pain in the…umm…elbow. In this case, variety means that there are a bunch of variables that can drastically affect the way your website looks to your visitors. A lot of these variables are completely out of your control because these days it’s all about user preference and usability. If your rebel visitors really want to view your website in a postage-stamp sized browser window using a browser you’ve never even heard of, there’s not much you can do about it. Ok, don’t panic. Good news is, there are some easy and free tools you can use to do some cross-browser testing so you can at least know what your users are seeing when they visit your site. Armed with that insight, you can make your best attempt at designing your site to appeal to the vast majority of your users.
Which Browsers are Your Visitors Using?
Unfortunately, all the browsers out there don’t play by the same rules. If I had it my way, everyone – yes – everyone – would come to an agreement on which web browser to use (I vote for Firefox, by the way). But, that’s not likely to happen anytime soon. Since the browser your visitors use can have a big impact on how they see your website, you should know which ones they’re using. Here are a few WordPress plugins that will give you that information (and more) about your visitors:
Now you’re all plugged in and you know which browsers are most often used to view your site. Next step? Find out exactly what these various browsers are showing your visitors. Of course, one way to know for sure is to go download the most popular browsers and view your website in all of them. But you’ll still need some help viewing different versions of Internet Explorer. At the very least, your website should not suck when viewed with the latest versions of Internet Explorer, Firefox, and Google Chrome. You should also (try to) make sure it plays nice in IE6 since a lot of folks still use that headache browser. I know very little about coding CSS and (X)HTML. But from what very little I have learned, I know that older versions of IE have caused many an otherwise-sane coder to throw tantrums, curse the dawn of mankind, and/or curl up in a fetal position.
Note: Researching this post has been really eye-opening. We’ve learned that our site is one of those that looks like crap in old versions of IE. Unfortunately, we don’t have the know-how (or time, or money) to move heaven and earth to make this site look perfect in every browser. We’re patiently waiting for IE6 users to upgrade their IE or download Firefox. If you’re using IE6 right now, check the screenshots below to see what this site is meant to look like In the meantime, we’re trying to figure this out ?*@#!
Free Tools and Resources for Cross Browser Testing
- How it works: Download/Install/Run the program. Choose which version(s) of IE you want to test. Type in the URL of your site. You can also do split-screen views. Below is a screenshot of this site viewed in IE6 (left) and IE8 (right):
- Browsers you can test: Internet Explorer versions 5.5, 6, 7, & 8
- Cost: Free
Notice the problems our site has with IE6:
- Elements don’t align properly. Particularly the images used to create the navigation bar and the sidebar titles
- The right side of our sidebar is getting cut off.
- All of our categories are not showing (this is a BIG usability issue that we weren’t aware of before researching for this post). IE6 users are not seeing the categories Planning, Affiliate Marketing, or Quitters.
- We have hover effects on our category tabs. You can see it on the right side image, when hovering over the Quitters category. The hover effects apparently don’t work in IE6.
- How it works: Download the plugin, then click on the browser you want to test in. Enter the URL and you’re off!
- Browsers you can test: IE (6, 7 & 8), Firefox (2, 3 & 3.5), Safari (3 & 4), Chrome, Opera (9 & 10)
- Cost: Free
- How it works: Nothing to download or install. Just enter your URL and choose which browser(s) you want to test.
- Cost: Free
- How it works: Register for a free account. Sign in. Choose an operating system (Windows XP or OS X) and browser, and enter your URL. Hit the refresh button and you’ll see a screenshot of your site. You can also do a split-screen view. The screenshot below shows our site viewed with two different browsers and operating systems.
- Browsers you can test: Chrome (3.0), IE (6, 7, 8), Firefox (2, 3, 3.5), Safari (3, 4).
- Cost: Free
Last but certainly not least, if all these different desktop browsers don’t turn your brain to mush and completely wreak havoc on your beautiful website design, you can head over to iPhone Tester and see if your website fits nicely in the palm of your visitors’ hands.
As I said, doing research for this post has been an eye-opening experience for us. We have some work to do!
We’d love to hear your feedback, tips, magic tricks…
Have you tested your site in other browsers? How’d it go?