One of the main considerations of designing a web site is the display resolution you plan on using. You’ll need to decide on which resolution is best for your site and your visitors.
Some web sites are designed with a fixed size, meaning they stay the same size regardless of the size of the browser window.
Other sites are designed to scale with the browser, in other words, the website will enlarge or shrink to fit the size of a browser window as it is resized by the user.
Whether your web site scales with the browser or maintains a fixed size it still needs to start with a pre-determined display resolution. Knowing what size to use depends on the current trend in screen sizes. So where does one find that out? I’m glad you asked.
We’ve been using the Browser Display Statistics at W3Schools to get the current display resolution trends.
For computer and internet usage in European countries we use XiTiMonitor. Here is their latest study on the European browser war between IE7 and FF2. There is no display resolution stats here but we wanted to add this in because it’s related, to some extent, and combines well with the W3Schools info. Here are W3Schools browser stats to round of this little segue.
If you know of any other web sites with browsers stats, please do tell.
Looking at the W3Schools Display Resolution chart you can see that 640×480 is a thing of the past, 800×600 is loosing ground fast and 1024×768 and above is the most current.
Building a site at 800×600 will keep all your visitors happy. If you’re not worried about the 14% still using the slowly decreasing resolution of 800×600, then 1024×768 should be your choice. You’ll also have a bit more real estate to work with.
Once you have a screen resolution in mind, you’ll need to find an easy way to size your browser while building your site. You may even start using 800×600 and decide to move up to 1024×768 later on. However your project progresses, having a way to set different screen resolutions will certainly make your life a little easier.
We’ve tried many methods and techniques to set browser windows to different screen sizes. We found a great tool that makes the job of setting and switching to different resolutions quick and simple.
Sizer 3.3 will allow you to set your browser to a preset size. It will also display a tooltip while resizing a window. It’s free to use and a quick download from the Sizer website. Installation is fast and you’ll be using it within minutes.
You’ll find all the info to help you install and start using Sizer on the Sizer web page.
It’s a handy tool for simulating many different screen sizes quickly while building a web site. We’ve also used it to create browser templates in Photoshop. Give it a try.
There’s also a browser based window re-sizer we use from time to time at setmy.browsersize.com. It does a great job. Using a browser based re-sizer involves a two step process. We begin with the browsersize web site and then navigate to the site we want to check, then back to the browsersize site to set a different resolution.
Using the Sizer tool we are able to switch screen sizes while still keeping our site in the browser. This feature has made the process of checking our web sites with different screen resolution a quicker and easier process.
If you’re sizing your windows another way that works well for you, we’d love hear what methods you’re using.
We hope you’ve found this post helpful. Happy resizing!
Summary of links:
W3Schools Browser Stats
European browser war between IE7 and FF2
W3Schools Browser Stats
XiTiMonitor
Sizer 3.3 – Windows resizer tool
Setmy.browsersize – Online windows resizer
Display Resolution
Fatal error: Call to undefined function: digg_this_button() in
/homepages/24/d155300103/htdocs/webdesigninsite/blog/wp-content/themes/clean-blue-20/single.php on line
20