How Wide Should I Make the Website?

How wide should I make the website?

It's an important question to ask when designing a site because it's part of the fundamental architecture that will shape all of the content. We work with many advertising and marketing agencies who look to us for advice regarding design best practices and this question has come up a lot recently.

When 800 x 600 Was King

When I started at Newfangled in 2000, 15 and 17" CRT monitors with maximum resolutions of 800 x 600 pixels were the industry standard. If you worked in the design field (and your company could afford it), you might be one of the lucky few using a 20" monitor with 1280 x 800 pixel resolution. Designing a website for the largest possible audience in those days meant staying within the safe zone of 800 x 600 pixels. And to accommodate a popular browser like Internet Explorer 5, you shaved off another 25-50 pixels to account for the left-side tabs and right-side scroll column.

Eleven years later, I purchased a "low-end" monitor for our Rhode Island office: a 22" wide-screen flat-panel LED with a native resolution of 1920 x 1080. All for less than $200. Even my 5-year old laptop has a larger screen size and higher resolution than my very first CRT monitor.

At the same time that current screen technology has opened up viewing boundaries for websites, mobile devices like tablets and smart phones are forcing designers to think small (or at least differently). For this post, though, I'll focus on laptop and desktop viewing.

Current Standards

In a W3Schools.com 2011 survey of their own site visitors, a vast majority (85%) viewed the site with monitors set higher than 1024 x 768 pixel resolution. And many from that group (40%) were viewing between 1280 and 1366 pixels of screen width.

I've done a quick survey of some popular websites and their minimum pixel widths (the point at which a horizontal scroll bar appears):

The average minimum width of these sites is 975 pixels and all of them can live comfortably within a 1024 pixel-wide browser window. Most of them are set to a fixed width; when you expand the browser window you simply see more background, and if you contract the window below the fixed width, content is cropped. Some exceptions like Amazon, Google and Facebook have partially flexible site designs. Amazon and Google have a variable center column which expands and contacts as you adjust the browser window. Facebook rearranges the viewer's friends status and chat columns to accommodate a wider or narrower browser.

I wish there were a magic number for the perfect site width but there are too many variables to consider. Although the consensus seems to be between 950-1000 pixels, deciding how wide to make a website shouldn't depend just on average screen size. Audience and site content also play a role.

I'm currently redesigning a transit site that contains dozens of multi-columned schedule pages. Since the schedules are the heart of the site, I decided to base the page width on the schedule tables. The final site template is a 12-column page that measures 1200 pixels wide; a bit beyond the average minimum but well within the majority of current screen resolutions. I didn't want to compromise the ability of most viewers to see the entire schedule at a glance.

Although my transit site is a bit of an exception as far as site width, most of the sites I design fall between 960-1100 pixels— and a lot of it depends on site content.

Helpful Tools

One of the handier tools I've found for establishing overall page width and dividing it up into a column grid is Gridulator. You enter the total width of the page and the number of columns and Gridulator does all of the math, providing column and gutter width options as well as downloadable templates for each variation.

Another popular site template is the 960 Grid System. Because the number 960 can be divided 26 different ways, it makes this grid system highly flexible and easy to work with. The website has information about the system, example sites and templates you can download to generate your own version of the grid.