Monthly Archives: November 2011

Informal poll of friends, laptops used more at desks

Posted on by

This is a totally informal poll of friends via Facebook, but I did open it up as a general poll as well

I was curious where people use their laptop computers. I figured the might be used in a more relaxed setting, but it turns out many people use laptops as their primary computers and also on their desks. More people have external monitors than I would have guessed—but that might be because they use their laptops at work. (When I’m at work I’m always using an external one. At home I use one about 1/3rd of the time.)

I’m guessing this computer usage isn’t exactly representative of the general population, but maybe it is representative of Facebook users. Most of my friends on Facebook are in some way involved in the tech industry (which includes artsy people or other non-engineering types), which might further skew the numbers.

  • 40 (26%): At your desk, but WITH an external monitor
  • 36 (24%): At your desk, but no external monitor
  • 26 (17%): On your couch, slouched
  • 14 (9%): On your couch, sitting upright
  • 11 (7%): On your bed, sitting upright

The other answers included some bogus ones.

Page width experiment on mobile (iPhone, iPad): 960 vs 984 vs 1008

Posted on by

I’ve been wondering what’s the best content width for web pages that leads to:

  1. a pleasing font size,
  2. a little whitespace outside the main content area,
  3. 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:

http://www.seqmedia.com/experiments/page_width/

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.

Conclusion

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.