How do you like yours?

A recent post discovered through Smashing Magazine got me thinking about a topic that effects me every day within my line of work. When I started designing websites 2 years ago I was led to believe at the time that sites couldn’t be made any wider than 750px, (780px max) to compensate for people using monitors at 800×600px resolutions. This is accessible - this is caring for our users?

Over time I began to get sick of 750px. I was designing on a 19″ PC with Firefox at 1280×1024px. Why wasn’t everyone else! Annoying people with their 15″ 800×600px resolutions (for example my secondary school). I then began to consider, with no appropriate research, that the majority of people now used 17″ monitors at a resolution of 1024×768px. So I’ve stuck to this for a long time - designing sites anywhere from 800px to 950px wide.

Just for the record - I don’t like variable width sites. It works for shop sites, some galleries and that’s about it. I don’t feel it’s necessary and I hope this post proves this. The article that sparked this post regarding Flexible Layouts, is extremely well written (by Dirk Jesse) and perfectly valid - however it doesn’t change my views on flexi-width layouts.

Stats Time

An up-to-date chart demonstrating the different resolutions used over the past 8 years, courtesy of W3 Schools was featured in the post:

What this graph shows is a typical model of the product life-cycle. One product grows and matures, then as it begins to decline the next product is introduced and begins to grow. If this graph led back 20 years or so the curves would quite possibly represent a mountain range!

What this chart proves is that as of today, 2008, the majority of web users are viewing the online world at a resolution of 1024×768px or higher, with no more than 8% of users at 800×600 or less.

So why should we still consider this small percentage of users? We shouldn’t. Not everyone will be going out over the next 2 years to buy larger monitors, the number of small-res users will never drop to zero, at least not for a very long time. But one of the biggest hurdles with web design is trying to please everyone, but it can’t always be done. I refuse to build sites that will render correctly as low as IE5 because if people are still using that version (heaven knows why?) it’s their own fault.

So what I recommend:

What I do now. I don’t plan to change. If the average monitor resolution is 1024×768px, I will design sites no wider than 1000px. These will render well on virtually all monitor sizes. There is no argument about massive Apple/iMac monitors at high resolutions because Mac users don’t use maximised browser window like on PC’s - there’s simply no need. A website at 950px will look great at anything from 1024px - 1600px wide. I promise.

Don’t forget height:

So far I’ve focused on width. But don’t forget the importance of height when designing sites. If the majority of monitors are displaying at 768px height, and assuming that most people use their browsers maximised, take away the 100-250px or so for navigation and toolbars and we’re left with around 550px of real estate known as ‘the screen’.

This is the web version of a newspapers ‘above the fold’. This is where it’s essential to make an impact - ask any copywriter. Try not to create too big a margin or white space at the top of your site. My personal opinion is to get at least the logo, navigation and a selection of ’splash’ information within the first screen.

The aim is to drag users further into your site and direct them to where you want them to go - whether that be to the checkout, email form or an interesting article; a massive, pointless header can immediately damage that first impression of your site if the viewer has to scroll down to reach content.

On Variable Width…

Use by all means if you can get it right and it’s necessary. Sites like Amazon pull it off well because it serves a purpose. I can’t personally understand why people choose to design variable width - it makes everything harder.

I like to work mathmatically, hence why I’m a fan of fixed width. I don’t work in percentages - I like my sites to be pixel perfect so everything slots in right and renders well across the board.

The site I’m currently working on (hush hush secret project) uses a fixed left column and a variable right with the occasional third column, floated right. It’s not been an easy build and I would still prefer it fixed width but another web design hurdle is pleasing the client.

And sometimes, unfortunately, compromises have to be made!