How Does My Design Look on Different Monitors?

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.

Video: How to use ViewLike.us to verify your design on different monitors

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!

Additional Notes

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.

chart by Seth Hill (partial snapshot)

Be sure to leave a comment on how this tool works for you!

Get BPWebNews delivered by email


If you found this post useful, leave a comment and share your thoughts with others.
Get future posts in your RSS feed or by email.


2 Comments

  1. It’s been a long time since we exchanged comments! May be we should start again! This post will be pretty useful when I design websites for my client. Check how the design looks on different monitors!!! I should check mine as well! Thanks for sharing the information buddy!

    • Hi Mukund!
      Nice to see you. The plugin is quite useful and I hope you use it. Agree, we should visit each other’s blogs more often! Thanks for commenting.

Comments are closed.