Newfangled works with independent agencies to lead development web platforms for their clients.

Newfangled works with independent agencies to lead development web platforms for their clients.

How wide, how high?

at 3:00 pm

Many of our clients wonder what the average screen size and resolution is for web users, and if they should determine the page width, whether it's a fixed or liquid layout, or whether the page auto-centers with this average in mind. This is a question we get a lot, and one that can't be definitively answered given all the variables. However, we can make some recommendations.

The w3 Schools website uses its logs to show the growing trend toward higher screen resolution, and another site shows the average screen resolution by worldwide region. I'd say that at this point the average is going to be in the 1024x768 territory, with the vertical resolution varying the most given how many different laptops there are out there. Given this average, I usually recommend that the designs for websites are somewhere between 800 and 1000 pixels wide. Other factors, like the industry for which a site is intended, may influence the number as well. For instance, a site created with visual designers in mind will likely assume it's viewers are on the cutting edge of things and be more willing to go with a wider design.

As far as fixed width versus "liquid" layouts, I would strongly recommend designing for a fixed width. This will give the client the most control over how their website appears, especially if it uses graphical elements significantly rather than styling the site completely with CSS. If graphical elements are used in a liquid layout, the client will never be able to fully control where those elements end up across the many possible screen resolutions out there. For balance, though, usability guru Jakob Nielsen recommends liquid layouts, though I think he doesn't really address the graphical control issue I mentioned above. When it comes to vertical resolution, many of our clients become concerned about content falling below the "fold," which I ranted about considerably in a previous blog post.

Lastly, since I recommend a fixed width layout, I would also recommend having the site auto-center in the browser. This way, a user with a much larger than average screen resolution will evenly disperse the extra space on either side of the web-page rather than having double the empty space on the right.

Are there other issues that should be taken into account?





Comments

Nomad Exile | November 7, 2009 4:39 PM
You recommend that people center their web pages so that users with high resolutions don't have a double space at one side of the page, but this page itself does not follow that advice. Practice what you preach!
Christopher Butler | November 8, 2009 8:28 AM
@Nomad Exile,

You're right- we're in the process of redesigning our site right now. It will be centered. We've been needing to do this for a very long time.

Chris
Jerry Dowel | March 27, 2010 5:02 PM
w3 Schools admit their stats are distorted because they're logs are not made up from average users. It would be more accurate to say the average w3 visitor has these resolutions.

The average user IS NOT a w3 visitor.

You can go by PC sales but then just because a user has a machine capable of x resolution doesn't mean they use it (mine goes up to 1680 but I usually run it lower than that for the sake of comfort.

I've met very many people who run lower than their spec will allow. Usually they don't even know it can go higher. You'd be amazed how often someone will install a game that sets the resolution lower and they just leave it.

As for fluid designs, yes it's a unique capability of the medium but we could do with out it - I don't know any graphic designers who would choose fluid over static given their own preference. It's horrid.

↑ top