I’ve been wondering what’s the best content width for web pages that leads to:
- a pleasing font size,
- a little whitespace outside the main content area,
- easy to design
I have been using 960.gs for quite a while now in its default state of 960 pixels wide with a 940-pixel content area. (That translates to 12 columns at 60px wide with a 20px gutter between them, 10px margin on the outer two columns.) I like this because it feels comfortable and in Photoshop (which I use the most for web design) holding down SHIFT plus a keyboard arrow moves in increments of 10. Also, math is fairly easy to calculate.
960 is so passé
Then, not to long ago, a friend said I should be using 980 because it was more modern and even Facebook was using 980. I remember the argument for 960 being that it gave enough room for the scroll bar, but I guess 980 + 30 = 1010, which is still under the 1024px width that a lot of devices have. And especially now with Macs not having visible scroll bars it seems to figure you could go for almost 1024 wide and be OK, right?
A Real Experiment
I decided to do a little experiment. I used the custom grid system generator to generate 3 stylesheets: 960px wide, 984px, and 1008px. The usable content area in each is 20px less than the width since I kept the gutters the same at 20px. Here are the actual pages:
I looked at the test pages on an iPhone and an iPad, and sampled both portrait mode and landscape modes. In any case the websites were all mostly viewable, though the 1008px width one seemed to cause a little bleeding off the right edge of the screen. I’d actually say that while the 984px version is very readable, I think I still prefer the 960—especially on the tiny iPhone. I’m a fan of whitespace and 960px seems to continue to afford that.
Now, I totally realize that with the iPhone you can use the page hint to control things, but even still I think I’m preferring the 960px grid with the 940px viewable area. It feels comfortable and it still means it’s easy to make comps in Photoshop due to everything being an increment of 10.
So, what’s right? I don’t have a scientific answer, but 960px still does the job. Computer browser resolutions are all over the place. And for smartphones you might as well use some responsive web design techniques because even at 960px the text is too small to read.
Just for fun, I walked around the web and sampled content sizes for desktop/laptop browsers:
- Facebook: 980px
- Twitter: 920px (though the landing page’s master container is 1000px)
- Groupon: 950px
- StackOverflow: 960px
- CNN: 980px
- BBC: 976px
- ESPN: 924px
- Apple: 980px
- Google Chrome Web Store: 1200px (ultrawide mode), 960px (normal mode)
- Rotten Tomatoes: 1010px
- YouTube: 970px
- Mozilla.org: 940px
Update: Nov 15
This morning I put in the meta viewport tag on the three pages and went through the exercise again. Result: the page is displayed with the exact width being 960, 984, or 1008, with no background peeking out and no content being cut off. All text in all three widths was very readable on the iPad—iPhone just needs a different stylesheet.
My conclusion still stands: all three widths seem about equal in terms of legibility, so it is easier to pick the grid system that works best with my design tools.