I was looking over my Google Analytics statistics today and took a look at the breakdown of screen resolutions used by visitors to the site. I noticed that while the majority of visitors use resolutions of either 1024×768 or 1280×1024 some significantly higher resolutions such 1920×1200 were starting to creep into the statistics (and indeed there was one example of an 3360×1050 resolution!).
That provoked me to have a think about the site design. Fog of Eternity is a bit of an anachronism compared to most blog and website design, given that it retains a largely fluid layout in the CSS. This means that the right column is a fixed size but that the main content expands to fit the size of the screen. The ‘Fixed vs Fluid’ debate is a long running one – a quick Google search found blog posts going back to 2001/02 on the issue, but in the last year or two support for fixed width designs has seemed to be pretty solid.
Designing a page with a fixed width allows for a lot more control over the placing of all the various elements of a page, but can also prove problematical if the width is fixed at larger than the size of a browser window, as it means that information to the right side of the page is cut out of the view and brings up the dreaded horizontal scroll bar in the browser (a big no-no in design terms). But on the other hand, a fixed width design can also look odd on high resolution browsers because it may take up only a small part of the browser window and leave a lot of blank space.
But I realised that there were also potentially significant issues in the way that Fog of Eternity is laid out. Possibly not immediately, but certainly something that’s likely to develop in future as screen resolutions continue to increase. Checking the site on different resolutions it seems clear that it generally looks fine up to a screen width of around 1750px, but beyond that the fluid nature means that paragraphs end up looking like single lines, and images often end up being taller than the text content of a blog post, and therefore impinge on the post below it, which looks unattractive. Basically, while the fluid layout has greater flexibility to match any screen view, the increased resolution of displays these days means that it can start to look messy at the highest resolutions.
A poll on how many people maximise their browser window showed that just over half of users do so (and 65% of Windows users). That’s less than I thought but still significant. A maximised window at resolutions higher than 1750px in width is going to make Fog of Eternity look unattractive.
The dilemma is how best to change this. It has long been the standard when drawing up fixed width pages to design them at approximately 750px in width. This is to cater for people with 800×600 screen resolutions (the 50px or so being used to take into account the pixel width of a vertical scroll bar in the browser). I use that width on my “fun” blog Babble and Stuff. But I think it’s clear that to all intents and purposes 800×600 is effectively dead as a resolution. Just over 2% view Fog of Eternity with that resolution, and wider research on the corporate sites I work on show that even in that arena (which often lags behind in technical upgrades) the figure is only around 5% and falling.
So I think the new standard for fixed width sites is to cater for 1024×768 resolutions. A pretty decent marker for this is that the newly designed BBC site is designed at a fixed width of 974px. That being said, assuming that the person who browsed to my site with a screen resolution of 3360px width was maximised, even the BBC site would take up less than a third of their browser window. So catering for those significantly higher resolution options is something that is also worth taking a look at in the long term.
So I guess I’m concluding that these days a fixed width design catering for 1024×768 minimum screen resolution is probably the most effective route to take, but that site designs should also be considering future changes and the best way in which they can cater to screen resolutions which are approaching (and in some cases exceeding) 3000px in width.
6 Comments
In designing and browsing, I’m a huge advocate of fluid width layouts. I understand the argument for fixed width, but I think you generally reach a larger audience with a fluid layout — you’re able to cater to the smaller and larger resolution browsers better than a fixed width.
Have you thought about a hybrid layout, where you have a fluid width, but it has a minimum and/or maximum? You get the best of both worlds — you have your fluid layout, but your website doesn’t turn into one-line paragraphs at high resolutions. Just a thought.
Yes, I think that’s probably the best option overall. What I was clumsily trying to convey when talking about fixed width with flexibility.
That being said, at least with current usage figures for screen resolutions I’m not sure you’d be particularly missing out on audience with a fixed width approach. Rather than a fluid width approach is more effectively “future proofed” as they’re generally easier to scale up than fixed width (at least dependent on the degree of placing and formatting of internal elements).
Thanks for the link Mathew. Actually surprises me that it’s still that much. Even in a corporate environment, where people have less control over the PC set up and it often lags behind, my general experience is that its around 4-5% of usage.
That being said, even at 7% it can presumably only fall, particularly given the increasing universality of LCD monitors with a “native” resolution, the lowest of which I’ve seen is 1024×768. 800×600 is effectively not going to be an option even for people who did want it.
On the fixed/fluid layout, I’ll do some playing around and probably post some comments/tutorial on the subject once I’ve worked out the best option for the site.
I prefer the fixed width layouts myself, as they are easier to work with.
I like the idea of the hybrid layout – as you said best of both worlds.
Here are some interesting statistics – W3Counter
800×600 makes up just over 7% of Screen Resolutions.
Sure, and certainly needs accounting for with new development (although there’s also an argument about focusing accessibility to your specific audience – assuming you have data on that – and I know that this site gets about 2% visitors with 800×600).
Can’t think of a good hybrid layout off the top of my head, but I remember that .NET magazine did a good article/tutorial in their November 07 issue, and having checked that’s now available online.
I totally agree that the number can only fall. But it is something to take into account when designing a site with accessibly in mind.
I think I’m going to have a play around with the hybrid setup. Do you know of any sites where this has been put to good use?
One Trackback
[...] wrote recently about screen resolutions and web design. The new design is a fixed width design at 960px. I thought hard about whether to go for a fixed or [...]