The 23rd of Diduary: Did you know that you can use SuperPreview to compare browser renderings?

Today is the twenty-third day of Diduary. You can see links to all of the published articles in the series here.

On Diduary 7th, I told you about how you can run Internet Explorer 6 in Windows 7. However, if you don’t specifically need to USE IE6, but rather just need to make sure that your website renders appropriately, I’ve got a different solution for you: SuperPreview.

If you haven’t seen SuperPreview before, it’s part of Microsoft’s Expression Studio, but it’s also a free download.

The interface incorporates IE6, IE7, IE8, and your local Firefox install as well. Here’s an initial screenshot (click to enlarge):

Once you’ve loaded SuperPreview, you can specify a website in the address bar at the top. You can also choose which browser you want to render that website on the left and right sides. In my next screenshot, you’ll see a rendering of http://msdn.com in both IE8 (left) and IE6 (right). If you look at the enlarged image, you’ll also notice that I highlighted part of the text in the right column (the blue rectangle). It highlights that area in both panes, so that you can easily see where your alignment is off. Check it out:

If that’s not good enough for you, you can also overlay the two renderings over each other. Here’s a screenshot of that view (click to enlarge):

SuperPreview will let you look at your page from many different perspectives, and will even work with local sites you are developing, or if you really want to cry, it will allow you to compare your site to the original image that your designer created.

Check this one out. It’s become invaluable in how I manage looking at my site in several different browsers at once.

2 thoughts on “The 23rd of Diduary: Did you know that you can use SuperPreview to compare browser renderings?

  1. Cool, thanks for this tool.Riga

  2. Women upset everything. When you let them into your life, you find that the woman is driving at one thing and you're driving at another.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s