101: Screen Resolution

101 is an ongoing effort to answer commonly asked questions related to the web design.

One of the most common comments we get in the design process involves screen resolution. Although most computer users understand that there are different screen sizes, many still don’t realize that there are various screen resolutions that can be set by preference.

Put simply, the resolution of a screen is the number of pixels (little colored squares) that fit on a screen. The measurement is written in two numbers: width x height. The higher the resolution, the more pixels there are on the screen, which means a higher quality display. A higher resolution will display images and typefaces more clearly and crisply.

What does it all mean to you?

The most important point to understand with resolution is that an image, video or website will display differently on one resolution than another. This makes things especially complicated for websites because the designer can’t possibly design and maintain a separate experience for every possible resolution.

In the past there were only a couple of standard resolutions to deal with, so you would commonly see a message on a splash page (welcome screen) that would tell you the best resolution to use. These days, there are many common resolutions with a very wide range of sizes.

According to Wikipedia the common resolution usage breaks down like this.

Resolution	% of Internet Users
Higher than 1024×768	57%
1024×768	36%
800×600	4%
Lower than 800×600	< 1%
Unknown	3%

So what do we do?

The standard approach to screen resolution is to design for the most common resolution. These days (as seen above), that resolution is 1024×768. This means that the designer will “optimize” the site to fit easily within the common resolution size. Because white space will exist to the side(s) of the design on higher resolutions, various design techniques can be implemented. A creative background can often make a layout look at home on many different resolutions (see http://wetlandsalberta.com, http://scholarshipandmore.org, http://rothandramberg.com).

The two following images show the lift site on two common screen resolutions.

The Lift site layout at 1400×900 resolution.
No title available

The Lift site layout at 1024×768 resolution.
No title available

Questions? Comments? Chime in below.

Posted by Micah on April 20, 2009 | Comments (6)

Some comments...

All good points. I have to wonder why “liquid” layouts (layouts based on percentage) have fallen out of popularity. with the CSS styles min-width and min-height it’s possible, with a little additional work, to design a site that looks good on 1024×768 but effienctly utilizes space on larger resolutions.

SL
SL says:May 06, 2009
on the note of using 1024 wouldnt it be best to size down to 800 wide. i know alot of people running wide screen monitors really like it when they can easily have two pages up and with windows 7 having the new option of draging a window to the side and resizing to half makes 1024 seem anoying for future web development when most people will be using 22’+ wide monitors.
caleb says:May 19, 2009
“i know alot of people running wide screen monitors…”

I think that’s an interesting point, but it’s really still an issue of most common practice. Some people may like having two sites up, but that’s going to be an edge case. It’s still best to design the best experience for the highest number of users.
Micah says:May 21, 2009
This is a great explanation of screen resolution for clients. I design for 1024×768 as well. I find that liquid layouts look a little too 1998, and can look particularly bad on high resolutions with the content spread out across the screen. Designing for 800×600 is too limiting. 1024×768 gives the designer more canvas space to create a decent design with.
Whitespark says:June 08, 2009
On the note about liquid layouts, I find that they can be extremely compelling when done well, but the two biggest issues are: 1) Some content doesn’t scale – photos, videos, etc. So a scaleable design needs a very different approach to artwork and content and not all projects are a fit. 2) Basic line length and readability can be compromised. When someone can make a column of text 7–800px wide, the basic mechanics of the eye work against you to make tracking from one line of text to the next very difficult. This is the reason newspapers use narrow columns. Totally agree with you on your approach!
PaulB says:June 09, 2009
@PAULB – I found a link earlier this month in reference to what you were speaking about, I think it might actually be a javascript&css hack, where the image is loaded at a larger size, then shrunk to the size it needs to to fit in a layout – was pretty neat.

I think min/max width/height should be used more, and I’m going to make a conscious effort to incorporate it into my designs – just makes sense.
Michael says:August 12, 2009

Name:
Email address:
URL:
Comment:
If you enter anything in this field your comment will be treated as spam:

Lift Interactive