How to Check a Website in Different Resolution

If you are a webmaster or own a blog or a website, you might have tried testing it different screen sizes or resolutions. If not, then I must say that it is generally a good idea to see how your website looks in different screen resolutions, especially if you are using a responsive design, so that you can be sure that it is looking good under different resolutions.

You all must be familiar with the fact that it is extremely important to optimize your website or blog for different browsers. And as the number of mobile users who use their smartphone to surf the internet are increasing day by day chances are that in near future a large portion of users will browse your blog through mobile devices and tablets.

So how can you optimize your website for so many different devices?? And forget about optimizing how can you even find out how your website looks on these devices.

Common Resolutions to Check

Here are some of the more common screen resolutions I've encountered on my sites lately. Your site's mileage may vary, since it probably caters to a different audience. thesitewizard.com tends to have a lot more technically-savvy visitors, resulting in a number of people using the higher resolution screens.

  1. 800x600
  2. 1024x768
  3. 1280x800
  4. 1400x900
  5. 1680x1050

There are of course other resolutions. For example, some monitors come with a 1280x1024 resolution while others have a default resolution of 1920x1200. I've also omitted 640x480 from the list since few people appear to use such monitors nowadays.

How to Test Your Website in Different Resolution

There are tools available that will help you test your responsive design across all popular screen resolutions (or devices) from one place. You can use one of these service :

  • mattkersley.com/responsive – You can use this tool to quickly test your site layout against standard screen widths (or breakpoints). The source code is available on Github and you can thus expand it as per your requirements.
  • quirktools.com/screenfly – This is my favorite tool for two reasons – it supports a much larger number of screen resolutions (including TVs) and second, Screenfly sends proper user agent strings while requesting web pages for different devices. Thus you get the best of both worlds (see notes).
  • responsinator.com – Another nicely-done tool to help you understand how your responsive site will look on the most popular devices in various orientations. It can replicate the iPhone, iPad, Kindle and Android smartphones.

Conclusion

Checking your site under different screen resolutions allow you to make sure that your site is usable under the conditions that visitors to your site may be facing when loading your site. Using the Sizer utility, testing such varied situations becomes extremely easy for the webmaster.