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.
| The BenQ EW2420 uses LED panel combined with VA technology delivers a whole new world of audiovisual entertainment. VA Panel technology enables ultra-wide viewing angle, authentic colors and high contrast image performance. Any point of view makes a perfect view! The BenQ EW2420 brings you big-time, cinema class enjoyment with deeper blacks and up to 11 multimedia connections!
| ||||||||
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”.
Sizer - Configuration
(Click to enlarge)
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:
- Position your mouse cursor on the borders of a window until the cursor changes to indicate you can resize the window.
- Right-click the window border to display Sizer’s popup menu.
Sizer - Resize Menu
(Click to enlarge) - 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.
8 Comments
Choosing the smaller browsers would do the same thing anyways and promote your webpage even it is in a small site. The chance of being read may be slim but worth the try
I remember when we had to build for 800 x 600.
I agree with Paul that 1024 x 768 is still the best width to build for (taking into account the scrollbar width, so it is actually a bit less than that).
You can do lots of tricks with background graphics to make sites viewed on larger resolutions still look like a full page.
Background images can definitely provide a good flow for wider screens. I haven’t seen too many websites that are actually built for widescreen – meaning the page sizes adapt to the screen site.
Well being non-technie this is good info to know. Thank you
Riley
Paul, there are numerous online sites that help one accomplish this task. It has proven a valuable resource, knowing what my sites look like in other resolutions. Especially when designing headers.
Hi Daniel, I use browsershots.org for testing my live blog. The only issue is that I like to develop on my local machine, so I need to resize the browser for my local site quickly and easily.
This looks like a cool tool to test my websites in different resolutions, I usually try to test websites in different browsers after doing a change by didn’t give much thought to window sizes.
While less people seem to be using 1024×768, a good number use that resolution. I usually test my blog on that resolution because I hate web sites where I have to scroll to right or left.