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 1st 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.
DJ says
Why not go for an elastic design of sorts.
If the web site were a stand-alone application running on your desktop, most people would expect that standard application to be sizeable (as is the browser itself).
Then there is that whole font size issue ;-), units, and how much scalability to allow the user. Whether IE, Firefox, or Opera, the first thing I do on a lot of sites is click on the “font increase size” button. Second, I grab the browser’s corner and pull it to a size that makes reading comfortable.
Be wary of obsolete info/advise on the web when it comes to CSS and web design, among other topics. I bet the ratio of valid to obsolete favors the later 🙁
Checkout:
CSS Mastery by Andy Budd
Transcending CSS by Andy Clarke
http://www.csszengarden.com/
kristarella says
Hi DJ.
Yes, elastic is my preferred method at the moment. However, it can get a bit confusing as soon as you introduce images into the mix. Often the confusion gets fixed quickly, but I have one project that I’m working on where the images – some problems just can’t be fixed. Perhaps when it won’t work I need to take a different tack on the whole thing.
Obsolete advice… yes, I know of one case in particular where an author doesn’t agree with what he wrote before – the post is still there though.
Also, I sometimes find that sites promoting fluid layouts are ugly… maybe I’ve just come across the wrong ones?
I think those two books are on my Amazon wish list… Ahhh perhaps some day!