How to Test Your Web Site on a Smaller Browser Window

Many new computers and laptops sold today include a widescreen monitor with a nice high resolution. For many applications, such as games and movies, having a large widescreen monitor makes the experience much better. Movies were meant for widescreen, and games, well they always look better in a higher resolution.

The one aspect where the widescreen monitors may be more of a pain is in web development. The reason is simple: creating a web site that displays great on many monitor resolutions is not easy. The web site can look good at one resolution and monitor size, but not on another. If you do have a widescreen monitor you can easily test your site with various resolutions with a free application.

Testing Your Web Site on Multiple Resolutions

Just over a year ago I bought a new desktop with a 24″ widescreen monitor. The monitor supports a native resolution of 1920×1080. When I visit web sites at this resolution, they rarely come close to filling up the screen.

I also use my desktop for developing the themes for my blog. With such a high resolution I need to be careful with how wide I make the theme. If I make it too wide, those with lower resolutions would need to scroll left or right to view all of the content.

When I develop a theme I try to size the theme for a 1024×768 resolution. This seems to the the lowest resolution that many of my visitors are using. Each year, however, there are less visitors using this resolution, so in the future this may change. For now, however, I stick with 1024×768.

Now to mimic this resolution on my monitor, I set my browser window to 1024×768 pixels. I do this using a free tool called Sizer.

The Sizer application allows you to resize any window on the screen to a specific size. In my case, I would resize the browser to 1024×768 to see how my theme will look in a window at that size.

While the application has three sizes defined: 640×480, 800×600, and 1024×768, you can easily add your own sizes by right-clicking the Sizer icon in the system tray and selecting “Configure Sizer”.

Any additional size you add to Sizer will show up in its popup menu so you can easily resize the window. To resize the window you simply can use these steps:

1. Position your mouse cursor on the borders of a window until the cursor changes to indicate you can resize the window.
2. Right-click the window border to display Sizer’s popup menu.
   

   

3. Click a window size to resize the window to that size.

If you own a large, high resolution monitor and wish to test your web theme/template on a smaller browser window, you can easily use Sizer to resize the window to any size you wish.