What tool can I use to test my web app in different resolutions?

Question

Back in the past,

i found a third party webpage that was able to capture and save images of my website in different resolutions and browsers. Of course i have no more that bookmark...

So is there any webpage or application where i can see how my webpage looks like in different resolution?

And here are the resolutions i would like to check for..

1. 1024x768    24.56%  
2. 1280x800    22.06%  
3. 1280x1024   13.42%  
4. 1366x768    7.10%  
5. 1440x900    6.68% 

Answer 1

Perhaps you're thinking of http://browsershots.org/ ?

Answer 2

If you want to check various resolutions and browsers, then BrowserShots may have been what you came across before, give it a look.

Answer 3

For viewing which percentage of people sees how much of your web page:

http://browsersize.googlelabs.com/

Also: Web Developer plugin for Firefox (Resize menu).

Answer 4

Chrome Extension and Firefox add-on to resize your browser to various standard resolution sizes...

Answer 5

Note that the screen resolution of the computer running the browser is only half of the truth. If the browser isn't maximized, it will be a lot smaller than the resolution you see there, and on non-Windows operating systems (Mac OS X, Linux) it's a lot more common to run applications non maximized.

It's simply best to make sure that your site is viewable in anything from small windows (just resize your browser down) to large.

Answer 6

There are many utils available for watching your website in different resolutions.

Some are installed on PC, some are online services like these:

Adobes "render browser" - you'll need to create a free Adobe account:

http://browserlab.adobe.com

Nice, but not free if you want it fast as I recall it:

http://browsershots.org/

Google - shows what part of your website is visible based on statistics from Google: http://browsersize.googlelabs.com/

But as far as I know, todays most commonly design resolution is 1024x768, eventhough the height isnt that important because of the popular scrollwheel on most mice/pads.

If you design to design for this resolution there is a lot of design help in the "growing standard" called 960 grid, which is based upon how many professional designers build a design.

You always make an invisible "grid" and then you use the cells to arrange the contents. Much like the old "table" system, but much more focused on professional designs.

Regarding your question, the % you list, seems like you would have most use of the "Google" link above.

Lastly, always remember to test how your website looks with the most used browsers. For me those 4 will be:

1. Internet Explorer (latest and previous version, use more than one computer to test if you cant do a double installation of it)

2. Mozilla Firefox (latest and perhaps previous.. but they make less changes in the render, so latest would be ok)

3. Google Chrome (awesome debugging tools too, and a very stable browser)

4. Safari (so you make sure that you support MacOSX)

Thats my opinion.

Answer 7

Scroll down to the bottom of this page and click on the doctype.com link. Those guys have a product that will let you know what it looks like on all browsers, os, resolutions etc.

Answer 8

The Multibrowserviewer is a great (paid for) tool for multi browser support, I know it's not free, bt worth looking into even just for the trial period.