Test Your Site Like a Pro–Part 2: Minimizing Site Bugs

by Matt Montaruli on February 2, 2012

You’ve fixed all of the bugs on your client’s production site, as described in part 1 of this article. Exhale…crisis averted. Now, how do we learn from our mistakes to prevent embarrassing bugs from appearing on a live site in the future?

Use an online development server

Feel free to develop with XAMP, MAMP or Webrick. However, these tools should not be used to test a site right before launching into production.

Instead, once you’re ready to start testing, use your hosting provider and set up a subdomain (ie: dev.yourname.com). Upload your files there, and test on a number of browsers and platforms. All of your files are stored online, so you can easily jump on any computer and test. You can also edit these files from any computer that allows FTP access.

Test on multiple browsers

If you practice progressive enhancement, there will be few surprises. You may avoid surprises if you know most of the existing browser bugs.

Start by testing Firefox, Chrome and Opera. Occasionally these browsers render margins differently (by about 1 pixel). This won’t always make a difference, but sometimes this can break a layout.

Next, test on IE 9/8. These are the recent versions of IE, so if the rendering is off in these versions, it will likely be off in earlier versions as well.

Move on to IE 7, and then finally, every Web Developer’s favorite browser, IE 6. Microsoft has ended support for IE 6, so it would be a poor use of your time to try to perfect the appearance of your site in IE 6 (unless, of course this is stipulated in your contract). Make it look presentable, but don’t expect it to be perfect…the browser is 10 years old.

Test on multiple platforms

This is almost as important as testing in different browsers, if not equally as important.

Fonts may render differently, or not at all, colors could be off on various monitors, JavaScript could be disabled, people could be viewing from mobile devices, etc…

You’ll want to make sure your font stacks are in order, and that your site’s design is bulletproof. Remember that many people are viewing your site on a number of different platforms and resolutions.

This step includes testing on tablets and smartphones. If something appears awkward on these platforms, worst case you can always use media queries to fix.

Your site won’t look perfectly on all devices and browsers, but keeping this mindset will be very useful in minimizing the variance of rendering between different platforms.

Be comfortable with appearance differences

Make peace with the fact that your site will render differently on various browsers and platforms. Margins might appear slightly different, smaller resolutions will break lines of text where you didn’t expect and older browsers don’t support newer technology.

What’s important is that your site is easy to use and looks attractive in each browser. Who cares if one browser adds an extra pixel to a margin, so long as it doesn’t break the layout?

Please let us know in the comments below if you have any effective and/or time saving suggestions for testing and development.