How to Make BrowserShots Even Better
If you're in the business of creating websites, one of the more tedious tasks is testing your website with different combinations of web browsers and operating systems. In many cases, the testing cycle needs to be repeated over and over again until you're blue in the face. Fortunately, there's a really useful online tool, BrowserShots, that makes things easier. While BrowserShots doesn't go so far as to test functionality, it does simplify the the process of ensuring a design looks consistent regardless of browser and that a long is a huge time saver.
The process for using BrowserShots is as follows:
- Go to the BrowserShots site
- Type in a URL
- Select the web browsers of interest
- Click Submit
- Wait a bit and then view your screenshots
As good as the system is, it still put up some roadblocks that have annoyed me ever since using it. The biggest roadblock is that the BrowserShots doesn't remember any of the options I've selected. And in all likelihood you're going to want to test using the same options repeatedly which means constantly checking and unchecking dozens of check boxes and selecting options from the drop-down boxes. Fortunately, I've come up with a quick shortcut too all of this.
Here are the instructions to make streamline BrowserShots:
- Go to BrowserShots.org
- Use your browser's Save As option to save a copy of the page to your hard drive
- Open the HTML file yoe just saved in a text editor
- Search for this code:
action="/"and replace with
- Replace all occurrences of
checked="checked"with a space
- Replace all occurrences of
selected="selected"with with a space
- Go through the source and look for check boxes you want to set. For example, if I wanted FireFox 3.0 on Windows I would change:
<input type="checkbox" name="windows_firefox_3_0" id="id_windows_firefox_3_0" />
<input checked="checked" type="checkbox" name="windows_firefox_3_0" id="id_windows_firefox_3_0" />
- 8. Go through the source and look for drop-down boxes you want to set. For example, if I wanted a screen width of 1024 pixels I would change:
<option value="1024">1024 pixels wide</option>
<option value="1024" selected="selected">1024 pixels wide</option>
- Save your file.
- Load the saved file into a web browser. You should see all of the options you want already selected so you're good to go!
Browser Shots has come in SOOOO handy when checking some of our client's sites for browser compatability. We don't really do a lot of design, so it's more for our information, and then we let the web team know which browsers are showing funky design, and we look really smart, and browser shots did all the work. He He.
Part of why I find BrowserShots so useful is that I have 13 sites I need to check in about 10 browser versions. In addition, each site uses 3 different templates. That makes for about 13 x 10 x 3 = 390 variations I have to review. I'd go bonkers if I had to do that manually :-)
I've only used browser shots a few times when developing our companies website. I've never really found it as useful as everyone claims it is. I will however, print this out and utilize these tips next time I use it. Thanks.