Both clients and web designers need an answer to the question: How does my site look at different screen resolutions?
Screen resolution refers to the clarity of the text and images displayed on your screen. At higher resolutions, such as 1600 x 1200 pixels, items appear sharper. They also appear smaller so more items can fit on the screen. At lower resolutions, such as 800 x 600 pixels, fewer items fit on the screen, but they appear larger. – Microsoft
There are tools to simulate viewing your design on common monitor sizes. I’ve always relied on the Browser.org compatibility test to also take a peek at various screen sizes. They all you to select one at a time: 640, 800, 840, 1024, 1152, 1280, 1400, 1440, 1600 or 1680 pixel wide. Be aware screen resolutions are getting even larger.
Lately the software takes too long and often never completes — unless you buy priority processing at $29.95/mo. Free requests queue up for 30 minutes. If not processed they expire unless you press the ‘extend’ key in time. For example a simple request for one browser and one monitor size expired without processing after I extended to almost 3 hours.
Naturally I had to find something else when a client said her huge 22″ monitor had a great deal of blank (black background) space. Not very good for an artist’s gallery of original works! I could not simulate on my 17″ monitor. My usual free resources timed out, so I found the ViewLike.us tool. It’s a bit quirky but saves the day.
This online tool lets you check your site in various resolutions. As a client you can do this during development in case you designer overlooks or postpones this important step. As a developer you can use this tool to experiment with fluid page structures. On wider resolutions you may need to set maximums for the content column to aid readability. Who wants a sentence that spans a 20″ monitor?
What’s in the video:
I walk you through the tool for the website DarcyArtist.com, selecting various resolutions. From the tool’s menu when you click on a resolution your choice is rendered but the button is not highlighed in any way. You need to keep tract of which size you selected! Also do NOT key the http:// in the url box — does not work. The software is quite useful and simple. Enjoy this quick video!
If you’d like to see the suggested resolutions for various monitor sizes, try this resolution to monitor size chart. It’s as of 2000 but an interesting comparison.
Be sure to leave a comment on how this tool works for you!