Designing for an "ideal" screen resolution

Take a tour!

Designing for an "ideal" screen resolution

In designing a web site you need to consider what width vs height resolution you're shooting for.  Conventional wisdom says that the two most common  sizes to design for are 800x600 or 1024x768.  Those two sets of numbers refer to actual screen pixel dimensions (and are sort of small,and squareish on many screens these days).  You also have to consider browser chrome (menu bars, scroll bars, status bars, etc...) that will also take up some screen real estate.  So once you have that taken into account you're usually looking at something like 780x370 or 1000x530.  That basically means that if you expect a site of 780px wide to take up most of the left to right space available in the browser (or on the screen) then you only have about 370px of height that will be "guaranteed" to be "above the fold."  Respectively, if you expect 1000px of design to take up most of the space on screen you have 530px of vertical space to work with.

These days, many displays are much wider than they are tall, so those numbers don't quite mean as much as they used to in hard terms, but relatively, you're much more constrained by vertical space than horizontal.  We've usually been designing for the theoretical 1024x768 screen dimensions.  We're designing sites with widths of about 940-1000px depending on how much content we expect to have and how much curtain we'd like to have visible on our theoretical screen.

Guestimating

One thing you can do to get in the ball park is to save your design as a jpg (@ the appropriate resolution! ;) and then open it in your browser.  Make sure that your browser is not scaling the image to fit it all in the window and you should have a reasonable idea of the relative scale of things in your particular browser.  Just remember you can't put too much stock in that because other people will have different sized monitors with different resolutions.  That's why you pick a theoretical baseline that you choose as a reference. 

The "ideal" browser

Since you don't know what screen size your design will be designed on, you can just pick a reasonable "ideal" size, and then do some things to accomodate other sizes.  You figure that browsers/screens of your "ideal" size and bigger will get an "ideal" experience.  That ideal experience means that there will be absolutely no scrolling left to right, and that the critical elements of your design/marketing message can be found above the fold.  Critical elements usually include logo, main navigation, and some type of contact info.  It can also include a sign up form, or rss feed subscription links.

The "less-than-ideal" browser

By designing to your baseline browser you are also implying that browsers/screens smaller than that size will get a "less than ideal" experience.  This probably means at the minimum that some critical content may be below the fold, which may or may not be a big deal depending who you ask.  I think I've seen some research that suggests that users are adept enough at scrolling up and down a page that critical content can easily be located below the fold, especially if the other content on the page is designed in a way as to lead the reader down the page toward that critical content. I think that research applied to things like comment forms more so than navigation, etc...  The other aspect of a "less than ideal" experience is left to right scroll bars.  Users tend to miss left/right scroll bars and it's generally considered bad form to deliver a page that requires them.  If you expect to have a lot of visitors at 800x600, you probably don't want to design a fixed width site @ 1000px.  You could get away with it however, if you were very careful to include only non-critical content in the rightmost portion of your page.  You might make a right column that only include your "most popular" list, and some short cut navigation.  You would want to make sure that anything in the right column could be found (and linked to!) within the main body of your page somewhere on the site.

What do we do?

So our general approach is design for an ideal width of 1024 and to try to get anything else that's really important incorporated into a header of some sort that we usually try to keep to about 200-300px tall so that some of the actual page content can peek up above the fold as well.  Of course this is all assuming a "fixed width" site.  You can do "fluid width" sites that just resize to fill the entire width of the browser, but then you either end up with columns of indeterminate width (which is problematic for making images fit nicely, and can result in unreadably long line lengths), or you end up with an indeterminate number of columns lining up next to each other or stacked on top of one another depending on browser width.

Getting off on the right foot

In order to get your design off to a good start you may want to start from a base template of some sort.  I'm not talking about a pre designed site that you're going to customize, I just mean a document (for your design tool of choice) that already has some dimensions and guidelines set up for easy refrence.  You might start with something like this.  It's a transparent PNG that you could drop into a design as the top layer and be able to turn it on and off for reference.  Of course, if you're designing for a different target resolution, you'd want to design one of your own, sized accordingly.

Basic Starter Template (PNG)

Here's what our home page looks like with that template dropped on top.  Notice that the outer edges of our main content container fall well within the "Max Available Width" area.  This is to ensure that the "buy now" sticker and the image strap will still be fully visible.  Since they violate the boundaries of the main container, the container has to be a little bit smaller to allow the entirety of the violators to be seen on our ideal browser.

Basic Starter Template on aPeel Design

Comments

TGeerts

TGeerts

October 29, 2009 02:05

designing for 1000px width isn’t smart and will give you a vertical scrollbar with longer pages. It’s best to always use about 970-980 max width to avoid a horizontal scrollbar. Besides that, at our design studio, we have created a similar template doc with multiple screensizes, 800×600, 1024×768 and 1280×1024 and also some newer widescreen laptop monitor resolutions. Those are all layered transparant so you can see how your design will work on those resolutions.

Another usefull add-on is to create columns in grid on top of this file. This way, you can quickly mockup/place elements for content placement and followup pages.

Good luck!

cheers,
Tj.