Designing decisions: width

What’s the measure?

In my previous post I wrote about my musings on heading hierarchy.

The next issue I’m contemplating is width (or measure as it is sometime called). People use a range of monitors with different screen resolutions. Users hate scrolling sideways on a page that’s too large, especially if it’s to see important information. Also, not everyone uses their broswer at full screen, particularly mac users. My husband, for example, has his browser narrow enough for a terminal window to sit next to it.

It’s one thing to figure out a grid and determine which elements on your page need margins. It’s quite another to actually assign a measurement to all those elements. Is it points, pixels, ems or percentages? How wide can I go before I annoy people? How narrow can I get before things start getting ugly?

Consider your demographic

I’ve always thought it’s important for your page to still be useful at 800×600, but with large screen sizes and resolutions becoming more popular, it’s good to think about the attractiveness of your page at large resolutions too.

Michael Martin wrote a great post for ProBlogger: The right width for your blog. I always forget to check my stats when trying to make decisions about my blog, but it usually makes the decision easier.

Since January 1^st 1.57% of my visitors used 800×600 screens; over the last month it was a bit less than 1.5%. That’s not really a significant number, but I don’t want to sneeze on 41 visitors either.

Consider your options

I count four options:

• Make your page 760 or 780px wide — it will be fairly narrow on larger screens, but accessible for everyone.
• Make your page for 1024px wide screens, putting the most important info on the left so that it’s easily visible on 800px wide screens.
• Use different style sheets for different resolutions (I thought of this, but didn’t know it was possible until Michael mentioned it in his post).
• Use fluid or elastic (where width depends on font size – click Ctrl+ to see what I mean) layouts — you would still need to set a maximum width, because a wide text column is difficult to read.

Consider the information and opinions available to you

Useful reading on the topic,

• Typesetting practices — just to get your head around all these different measurements.
• The ridiculous discussion about monitor sizes and screen resolutions — a bid for fluid layouts.
• Fixed or fluid width? Elastic! — a demonstration on making an elastic theme.
• Dynamic resolution dependent layouts — very good tutorial on implementing different style sheets for different browser widths.
• Optimal width for 1024px resolution? — if you decide to go fixed, what should you actually fix to?
• Elastic design — an in depth discussion on ems, particularly the pitfalls of ems and how to overcome them.
• Five simple steps to designing grid systems — this series is excellent! Mark Boulton’s site is an excellent resource. My favourite sections were parts 4 and 5, but read all 5 steps, it will make more sense and it’s very informative.
• Ideal line length for content — rather than picking an arbitrary number, consider the best measure for readability.

While I was writing this post I took a break from my own design to redesign one of my husband’s sites (I might write about it when the new site is up and running). I used an elastic layout. All measurements are in ems, even the pictures are scalable (they don’t go wonky within the normal ranges that users would be resizing to). It took a bit of thinking and calculating to get my head around using ems rather than pixels, but I think it’s definitely worth it.

I’d be interested to know which screen resolution your monitor is, and what width you use your browser at.