A recent problem has prompted me to write about the best way to determine a new site’s width. It may seem like an easy decision to make (it certainly can be), but a few moments of thought may make you reconsider your first choice. There are four steps:
- Research
- Information architecture consideration
- Visual design consideration
- Final determination
1. Research
Your first step is homework. You want to find the maximum width your site can be in order to maximize the available space without going so large that you lose significant numbers of your audience due to low resolution monitors. The tightrope walk here begins with your own site’s analytics. If this is a new site where none existed before, skip this step or look at the stats, if possible, of another site with similar audience profiles. You can help inform this information by doing some online research to see what display resolution trends exist. As of this writing, 1024×768 or higher seems a safe bet. Your mileage may vary though depending on any unique audience traits (an intranet site where you know everyone’s exact display equipment).
Once you’ve established your maximum browser resolution, you can shave off some pixels to account for browser chrome- all the window borders, scrollbars, etc. The amount of chrome has dwindled down to zero, horizontally, for some browsers like Safari and Firefox on Mac, but others have not. Test multiple platform and browsers to nail down exactly how much room you need to allow for chrome. On top of browser chrome, you may wish to worry about whether people maximize their browser screens. For people will exceptionally large screens, the answer is likely no. Accommodating for this is impossible on a universal level as it’s different for each person out there, but you can shrink down your max size a bit more for this. How much is up to you.
After all of these variables are accounted for, let’s say you settle on 960 pixels as your optimal maximum horizontal width. Keep in mind that the operative word here is “maximum.” This is the limit you set for yourself. Anything inside of it is fair game. Research is used to help you determine the widest possibility. It says nothing about going smaller, but our next steps do so let’s continue.
2. Information Architecture
Ideally, by the time you begin your design phase, your information architecture work is solidified. You know the general needs of the site, what the page elements are on all the major page types and the kinds of content your site will need to support. With hope, you’ll also have enough flexibility for the site to grow and support new types of content as they come (you may already have a list of “phase 2” ideas before phase 1 is launched, for example). Your task now is to use this information to inform how wide the site should be in order to accommodate the elements as best as possible.
Let’s say you have, among other page elements, four blocks of information you need to communicate. Since each of those four blocks are equally important, the plan is to show them horizontally across the page next to one another. You now have a math problem on your hands (it’s easy though): 960 pixels ÷ 4 equal blocks = 240 pixels per block. The page can now be divided into 4 equal columns to house the information in a nice, clean manner. You might say you have the basis for a design grid, but not quite. Let’s factor in design considerations next.
3. Visual Design
Information architecture leads us to a four column structure, but from a design perspective, we may consider it too limiting. There may be pages that need smaller columns widths to house information (maybe a page with thumbnails images, for instance). On the flip side, you don’t want too many columns either or the grid options become so numerous, the entire purpose is defeated. You ideally want flexibility, but not too much.
Let’s consider a grid composed of 10 equal columns with 9 equal gutters between them. Let’s also say we wish to make our gutters 10 pixels wide for a total gutter width of 90px. Subtract that from the 960 pixel max width we’ve already established and we’re left with 870px. Divide that by 10 and we arrive at a grid with 10 columns each 87 pixels wide with a 10 pixel gutter between each for separation. Our 10/9 grid works well. But we have a problem.
From our IA exploration, we know a four column grid is best for the elements on the page. Four doesn’t divide evenly into our 10 column grid which poses a design problem for us. Do we have to go back to he drawing board? Not quite.
4. Final determination
We don’t have to start over, just modify any of the variables so far:
- We can work out a different solution from an IA perspective that doesn’t depend on the grid to be successful
- We can choose a different design grid to work within or
- We need to disprove our research or assumptions about our 960 pixel maximum width
Having just spent a good amount of effort determining our maximum width, we don’t want to revisit it. And let’s say that we’re fully confident that our four block IA solution is the best course of action. That leaves us to find another design grid. So let’s see where that leads us.
We feel a 10 pixel gutter is a solid choice for our needs so we keep that variable intact. We also know that our final grid needs to be divisible by four while still being flexible, but not too flexible. So let’s try an 8 column grid with 7 gutters. The equation will look like this:
(8 columns * 110 pixels each) + (7 gutters * 10 pixels each) = 950px
We notice that as long as the columns and gutters are equal width to one another respectively, there is no acceptable equation where we come out to an even 960 pixels as our research tells us is best. However, since 960 is the MAXIMUM width, we are free to work at any width in between. An eight column grid can be reconfigured by pairing columns together to get a four column structure so our IA needs are met. The 8/7 system, while a bit less flexible than our preferred 10/9 system, still allows many combinations from a design perspective so we determine that it is an acceptable system for design purposes. We could add another pixel to each column for a final width of 958px or one extra pixel to each gutter for a final 957px, but we prefer the roundness of 950 and decide to leave things there.