[Skip To Content]

Clients

Past Work
Join Our Mailing List

Web Access Strategies

What Resolution Should I Design For?

One of the most frequently asked questions on web design discussion groups and mailing lists is the "size" screen a designer should target. The concern comes, quite naturally, from the fact that there are many different monitor sizes offered in today's computer market. Sizes typically range from 640x480 to 1680x1050, though theoretically the array of possibilities is greater, such as 320x240, typically found on mobile phones, to 2560x1600 found on more recent high-end monitors.

It is no doubt a very complex issue that has many confounded. Do you design for the lowest common denominator in an attempt to get a majority? Do you design for one resolution, thus ignoring all others? What size should that be and, moreover, how do you determine that size? The short answer and one you're bound to read elsewhere is "You should design for all resolutions, not just one". Where these responses fall short, unfortunately, is in their explanations why you should design for all resolutions.

First, we must take into consideration things like global browser resolution settings. Two good resources can be found at:

At the time of this writing, both of these sources state that currently about 28% of users are on monitors set to 800x600 resolution. But total available resolution is only part of what we must be concerned with. The next monkey wrench in the machine is actual size of the user's browser window. This is particularly problematic because the size of the actual window is not always the size of the screen, let alone the available space provided after browser chrome is taken into consideration.

On the Usenet newsgroup alt.www.webmaster, regular poster Toby Inkster announced recently that he has programmed a great little JavaScript snippet with which he's been able to compile some long-term statistics of the actual size of the user's window. What he's found is the following:

"Most people surf with their browser maximized, but it's not an overwhelming majority -- more like about 55%. After that about 30% of people have their browser set at roughly 75%-85% of screen width. A few people (about 5%) have their browser 85%-99% of screen width and the other 10% have their browser at less than 75% width. Interestingly, this didn't vary much based on total screen size"

I think of particular importance is the statement that "...this didn't vary much based on total screen size".

Focusing back on the global browser stats, we see that the lowest common denominator (in total width) is the 800x600 crowd. In truth, there are only about 760 pixels of available width (at full screen), thanks to browser chrome.

Using the percentages that Toby stated above:

  • 55% will have their window at the 760 pixel size
  • 30% will have their browser window 570-646 pixels wide
  • 5% will have their browser window 646-752
  • 10% will have their window set below 570 pixels

What I take out of the stats is that 85% of the 800x600 users will have 570 pixels or higher available screen width. Personally, I view this as the true "lowest common denominator".

It is from this understanding that you must make your decision of "what to design to". This is a dilemma that I don't see a very easy answer to, especially when designing a website which needs to provide a ton of information. So what do you design for? 570 pixels? At that point, we're alienating people with large monitors. After all, they paid good money for their massive resolution, the least we could do is let them use it. The solution is flexible design. The vast array of different monitor sizes & resolution settings, as well as user behavior, says to me that making a fixed-width site is a mistake. Flexible design accommodates everyone and eliminates the need to worry about what resolution to design for.

Designing in this manner requires an understanding of HTML, CSS and web page production that, sadly, most designers don't have. It isn't easy to design a content-heavy, flexible layout, but it can definitely be done.

Comments:

I have to use asp for automatic resize...

Back to blog index

Add Your Comments:

Fields marked with * are required.
 

Contact Us to see how Web Access Strategies can help your organization.