Fluid, Fixed, and 1024 Resolutions
March 6th, 2007 by Michael Gray in Random ThoughtsIf you're new here, you may want to subscribe to my RSS feed. Read my top posts or learn more about Michael Gray. Want more frequent updates follow me on Twitter. Thanks for visiting!
Last week John Scott of V7N redesigned the blog and went to a liquid width from a fixed width. A rather interesting debate followed on the v7n forums.
While design isn’t specifically SEO, it affects page construction, keyword/content prominence, conversions and ultimately ROI so it’s not something an SEO can afford to ignore.
The people defending the fixed width design tended to feel that pages should be render the way they/the designer intended, a point which was defended to the hilt by Laura aka ChickGeek a moderator
I don’t like things shifting around form page to page. I either use a 19″ wit 1280 width or a laptop with 1024 width - that’s a lot of horizontal reading. Another thing is that I like to see the page as the designer had intended it to be seen - no surprises.
In the past three years I went from a 3 monitor display (19″ and two 17″) down to a 17″ widescreen laptop, and most recently down to a 14.1″ tablet PC (running at 1280 resolution). My appreciation for liquid designs has been focused by the experience of changing monitor sizes.
I took a look at liquid and fixed designs last year in Maximizing Profits With Website Design and Layout a three part article. I came to the following conclusions in part III:
Masthead - Just the essentials, smaller is better. Avoid big graphics and other designer tricks and elements just to make an impact
Body - Keep the money items in the prime real estate above the fold and as far left as possible.
Navigation - If it’s in the masthead keep it small, if it’s in the body keep it to the right
Page Width - Are you going to have lots of content, if so go ahead and fill the whole screen, otherwise stick with a fixed width to make it feel longer.
I stand by that with the following exception: Shopping carts generally don’t work as well in liquid layouts. It’s very hard to focus the attention on a buy button that floats.
Liquid designs wrap in funny ways and that makes putting the customers eyeballs where you want them very difficult in many situations. I’d like to look at fixed designs a little more though. Many sites like Search Engine Land for example are going with a 1024 resolution fixed width design. If anyone can get away with assuming their readers have larger/higher resolution monitors it’s sites in the technology/search/electronics/gadget sector. However what about sites that are more mainstream that have made the switch to 1024 like The New York Times?
While the homepage for the NYT is overly complex the inner pages I really like, and are very well laid out look at my markup for example (click to enlarge):
In addition to pushing the design to 1024 they have layered DIV’s, and social media, nice work NYT.
Now most fixed width designs cap at 800 pixels since it guarantees you work everywhere. Let’s say the sidebar is 200 pixels wide. Giving a conservative 75 pixels for padding and margins, that gives you 525 pixels of center content. If you want to wrap around a picture or adsense you’ve got to think small. A 350 pixel picture or adsense block gives you 175 pixels of content (smaller than the sidebar) , which looks horrible. Drop down to a 250 pixel image or adsense block and you’ve got 275 pixels of words to wrap around, much better, however now have a small sub optimal picture size. To make matters worse on a bigger monitor your picture just looks puny and unimpressive.
Using a liquid layout you can go with the bigger picture (350 pixels) and only people on smaller resolutions get the narrow 175 pixels of content, everybody else gets the big picture and the wider content section. However going with a fixed width of 1024 gives you reasonable center screen real estate without the problems of floating/shifting content. The question is has 1024 reached critical mass, and can we safely ignore 800 pixel resolutions?
I don’t think we’re there yet, in fact I think before we get there mobile is going to move in and throw a great big monkey wrench in the works. People who have moved to CSS based designs will be able to adapt quicker with device dependant style sheets, table based precision designers will fall apart and it won’t be pretty.
So let’s hear from you, fluid or fixed, and you can only answer if you say why. Lame cop out answers like “fixed rulez” won’t be tolerated. Additionally if you are a fixed fan I want to know do you go with 800 or 1024?
Sphere It
March 6th, 2007 at 8:59 am
Fluid and there are also plugins for Wordpress to render to PDA.
March 6th, 2007 at 9:00 am
I don’t like the uncertainty of fluid. Call me a control freak if you like but there’s normally a valid reason why I want to position some text or a graphic in a specific spot. I know you can do that within a fluid environment but then you have lots of other factors to contend with.
I looked at screen resolutions recently on a number of my sites and, as you say, the more tech savvy users tend to browse at a higher res. However I’ve also noticed that the number of users browsing some of my non-tech sites at 800 has halved in the last quarter to less than 5% across the board. I’m guessing this is because people upgraded their hardware over the Christmas period.
Can we ignore 800? Personally I think I’d only design for 800 if I knew I was aiming a site at users with either low technical knowledge or poor eyesight
March 6th, 2007 at 9:09 am
Most of the time i’m using fixed-width templates.
Mainly because of the better readability/usablility one can achive with a fixed line-width. I usually go with short line-length for sites targeting children or old people, medium lines for the rest.
Here’s an interesting study: “The Effects of Line Length on Reading Online News”:
http://psychology.wichita.edu/surl/usabilitynews/72/LineLength.htm
Regarding the minimum resolution: It depends on the audience. I tend to use 800 as the lowest common denominator, 1024 and up for audiences interested in technology, design, gadgets, etc.
Tracking screen-/browser-width of the sites visitors also helps a lot in finding an optimal solution.
In addition you can also implement resolution dependent layouts to dynamically serve an appropriate stylesheet for various resolutions.
March 6th, 2007 at 9:18 am
I tend to put designers that argue in favor of fixed width designs into 3 camps:
* Inexperienced
* Incompetent and
* unsuited to web design
Good post.
March 6th, 2007 at 9:36 am
Gonna have to disagree with you here Nick. I used to be a big fan of fluid designs - it’s all I used to use. Nowadays, I’m all about the fixed, 1024. I don’t think 800×600 is worth designing for.. if less than 5% of the people use it, then I’m not missing out on much, and the 1024 design flows much better.
The reason I don’t do fluid anymore is twofold. 1, it just won’t look right on most resolutions. You can’t predict where everything will end up, and I just hate that. 2. If the reader is using a huge monitor and some crazy high resolution, everything will look horrible. Most people don’t like to read an 1800px wide content column - it’s not very easy on the eyes.
March 6th, 2007 at 9:51 am
Leroy, I’ve yet to see a person who has that wide a resolution who leaves all their browser windows maximized, so your argument holds no weight.
Secondly, for all of you arguing about line length, there is such a thing as min width and max width (and yes, you can make IE6 play ball.)
Thirdly, for all you control freaks who have to have things pixel perfect, one of the beauties of the web is that it IS a fluid medium. We’re not working to a sheet of paper that’s 8 1/2 by 11 anymore (YAY!) and if that’s what you need to make your designs effective, maybe you should go back to print work.
If you’re to be an effective designer you need to embrace the medium in which you’re working! The vast majority of my designs are fluid, and yes, it’s more of a challenge to make things interact properly, but it’s also more fun. Fixed width is mostly boring.
March 6th, 2007 at 10:05 am
I disagree with Nick too. Just because it is the ‘cool’ or ‘in’ thing to do, fluid is not for every audience. Like Michael said, shopping carts are one area that fixed designs will outperform fluid, but only competent, experienced people suited to web design would know that.
March 6th, 2007 at 10:11 am
I don’t claim to be a design guru, but when I make this decision on new sites, a few factors come into play:
1. Audience - as you mentioned above, the tech-audience is more likely to have larger screens and higher resolutions than seniors or children.
2. What’s Actually Used: When I survey my sites in Analytics, I find that only 2% of my visitors have a screen resolution of less than 1024X768. Now granted, most of my sites lean more towards tech than seniors cruises, but still.
3. Screen real estate is valuable, either in terms of making as much content visible to the user without them having to scroll, or for advertisings.
Because of these reasons, I lean towards a fluid-width design. It just makes more sense to me - I wouldn’t have purchased a 19″ monitor if I just wanted 13″ of content in the middle of it.
March 6th, 2007 at 10:21 am
I’ve looked at the stats for multiple sites I run and less than 10% of users across all sites are using 800×600. With most newer computers coming with LCD monitors and laptops having them built in, 1024×768 is quickly becoming the new standard, which overall is a good thing. I still like fixed width designs, but I also appreciate a fluid design if done well.
March 6th, 2007 at 10:26 am
> “I’ve yet to see a person who has that wide a resolution who leaves all their browser windows maximized”
I have. I’m not only tracking monitor resolution but also width & height of the browsers viewport on a varitety of sites. 30-50% of users with 1280 and up leave their browsers maximized. I’ve seen a good friend of mine doing the same. He also maximizes every application- or explorer-window. He’s monitors are set up to 1920px width…
I’m building both fixed and fluid layouts - they all have their place. But personally i tend to like fixed width layouts more. I don’t have to resize my browser to get a readable line-length on a fixed-width site. There’s a “right” way of doing fluid layouts, min-/max-width helps a lot, but unfortunately most designers don’t know how to do this.
Btw, the whole “fixed-width vs. fluid-width” debate reminds me strongly about the “ie vs. firefox” and “windows vs. linux” debates. It almost always gets emotional at one point.
Michael, was that your intention to stir up some controversy?
March 6th, 2007 at 10:41 am
I’m a firm believer in designing for your visitors, period. I’ve had this debate many many times myself, and even wrote a post about it here: http://www.anubismarketing.com/web-design/fluid-width-or-fixed-width-the-debate/
My take on the whole thing is that if you’re anywhere near smart enough to have a good stat tracker on your site, you can see the screen resolutions and OS’s of your visitors. If most people are using a 1024 res, then feel free to design a fixed 1024 or make it fluid. If most are using 800, design likewise.
Yes, I know this doesn’t work so well on a new site, so when that happens around, I tend to design fixed 800 and then see what happens. If I can later go wider, or more fluid, the bonus is more screen real estate to play around with ads or what have you.
FWIW - I remember a big switch in my attitude about this whole thing when speaking with someone who built sites in a country where screen resolutions and OS’s and monitors were far less “advanced” than what most modern countries are used to having available. That’s when she and I both conceded to this same belief: Design for your audience.
March 6th, 2007 at 11:18 am
I just took a look across all my sites for the past 100K visitors, and 13.24% are running 800×600.
If it were down around 1%, I think I would change my fixed width sites to 1024, but there’s definitely a long way to go in my book.
March 6th, 2007 at 12:08 pm
There’s a pretty good A List Apart Article that discusses having multiple layouts via CSS, but it’s a lot of work and only worth if you have enough visitors to make it worth the hassle.
I prefer fixed width because then it looks good in most situations and whitespace is the only thing that becomes variable.
I like sites that place main content in the 800px range, then put ads (or other not-as-meaty content) outside so that they are seen by larger resolution screens - if the user has one).
My blog uses floats to accomodate spreading out elements if your screen is large enough, which is an option as well.
March 6th, 2007 at 1:12 pm
I use the max-width property in css. So the design is fluid, up to 1280px. I find any test longer than that on my widescreen monitor makes it difficult to skim through.
March 6th, 2007 at 4:09 pm
No real answer, yet. Everything’s a patch-over at best. Been this way forever. Here’s my favorite pipe-wrench-in-the-works: are you scaling your graphics and pix as well? (it can be done) No? Well, your 125px160p tile is only slightly bigger than a flyspeck on hi-res monitors.
http://www.google.com/search?hl=en&safe=off&c2coff=1&q=%22resolution+creep%22+rcjordan
March 6th, 2007 at 9:46 pm
I love comments by people like Nick Wilson because they can be lumped into just one category - clueless.
There are good reasons for using fluid designs and there are good reasons for using fixed designs and to claim one is better than the other is simply to show how inflexible you really are.
March 7th, 2007 at 12:49 am
Technically I’m running fluid, but the layout and graphics is designed to fit only at a minimum of 1024.
Why?
Based upon data spat out from the visitor info section of various tools… I’ve never had a visitor with a monitor size less than 1024.
But, I let it stay fluid so that visitors with larger real estate don’t get forced looking at this narrow box in the middle that can get hard to read.
March 7th, 2007 at 9:50 am
fixed on 1024
My posts are still readable on 800×600
But seriously who still uses that resolution?
March 7th, 2007 at 11:53 am
Reading a liquid design at 1600+ res is horrible. We do a hybrid - a liquid design that stretches for 800 to 1280 resolutions. Much better
March 7th, 2007 at 5:23 pm
My stats roughly tie in with Jestep’s, at somewhere approaching 15% of visitors still being on 800px. Personally, I don’t want to make life difficult for about 1 in 7 of my visitors.
As a web user, I hate narrow, fixed width layouts that look like a narrow ribbon down the left or centre of my monitor, so it’s got to be a hybrid layout - either using min and max width or javascript.
If more people understood that web pages are to be viewed by users on *their* terms, (what about your fixed width layout if a user is visually impaired and needs to increase the text size?) the web would work better. Or should we all just publish PDFs?
March 11th, 2007 at 7:07 pm
It depends…ideally, fluid. I optimize the design for 1024, make sure it is acceptable at 800, and set max-width to 1200, working on the assumption that those who use such a high resolution are more likely to be tech-savvy, and therefore running Firefox or IE7 (which finally supports max-width!).
Why? Maximum flexibility. One client, for example, has heavy international traffic with about 15% still using 800×600 settings. Also, a fluid width gives the user more control over how to use their screen real estate. Finally, mobile browsers are extremely incosistent in their implementation of CSS media types, so if there is any prospect of needing to go mobile, it’s easier to adjust.
If