Graywolf has started a worthwhile series titled Maximizing Profits With Website Design and Layout which I’ll be following closely. The first in the series tackles the eternal debate of web designers over wether liquid width or static width designs are better.
This is a question I have pondered over the past few months also as I’ve considered new blogs. To this point I’ve mostly gone with static width blogs (with a couple of exceptions) but what do you prefer and why?
I’ve tinkered with liquid layouts, because I do see it as the way forward, but it certainly seems more difficult to acheive good results than when you explicitly know the dimensions you’re working with. Indeed, I’ve just returned to a fixed layout on one of my sites that I designed with a liquid layout originally, because I feel it gives me greater control over the look and feel, especially when it comes to fitting in ads.
One thing I’ve been thinking about in the past is using any extra screen real-estate for those viewing on large monitors for displaying more ads, although I guess some people would see that as discriminating those with big screens.
For example, if you have a site with a fixed width of 900px, and someone with a screen width of 1200px comes along, why not add an extra skyscraper ad into the space remaining, using a bit of javascript to detect their resolution? Perhaps opening a can of worms with that sort of tactic, but it’s just a thought.
Not to seem harsh, but I sorta equate this to a “fluff vs. substance” debate. Maybe I’m slightly more sensitive to this given that I know that a number of my regular visitors are elderly folks who run at less than optimal screen resolution or with the browser font size bumped up a notch or two. Especially with that demographic as part of my target audience, one size definitely does not fit all.
Rob Lewis – interesting idea… I can just see the responses to this one though, especially those of us with large one (screens that is)
Rob O’Daniel – good point. I hadn’t even considered that (shame on me). I think it’s valid but I’m not sure how many would argue from that perspective.
Will be interested to read what others have to say when I get up in the morning. In the mean time – I’m off to bed (static queen size – although it’d be nice to have a liquid one that blows out to King occassionally – sorry…blabbering now)
I think it depends on your target audience. I was just digging through the stats on one of my busier sites (~10K unique visitors per day) and 39.82% of the visitors were using 800×600 resolution.
The problem I see with liquid formats is that the design tends to fall apart at either smaller or larger resolutions.
At small resolutions, elements in liquid layouts tend to start overlapping over as they dribble across each other to fit into limited spaces.
To me, personally, nothing is more irritating is seeing a liquid page at my laptop’s resolution of 1400×1050 that is two lines of text 17″ long. It just doesn’t scan properly.
I use a fixed width to mimic a book page’s width. It just scans more easily, and then you can be assured that your monetization elements will be viewed by all visitors.
Who cares if someone with a 42″ plasma monitor gets 12″ of whitespace on either side – it looks a helluva lot better than 600 words of text in a single horizontal line and a vertical contextual ad unit overlapping the logo.
I’ve flip-flopped on this issue several times. However once I started working with a very large monitor I’ve come to really appreciate fixed width layouts. With a large display text becomes difficult to read if paragraphs stretch from one side of the screen to another. Narrower columns of text are easier to read…. there is a reason newspapers are setup with lots of narrow columns.
For non-blog sites that don’t have lots of text (like perhaps a photographer’s website) I still prefer liquid sites. However for sites where the majority of content is text I prefer fixed with so the text doesn’t stretch too wide on big monitors. With about 10% of my readers still using 800×600 displays I keep the width to ensure usability for them.
Think it is a bit of all mentioned above… combined with current developments in techniques. I think that in a very near future, a technique like this one, that is mainly for photos and pictures, might be implemented in the whole website, letting the user easily decide on what suits him or her best.
Besides, when all works out well, all browsers should work equally well with AJAX and other userfriendliness-improving protocols.
Personally… I stick to fixed for the moment, as in that way you kinda know what the visitor is actually seeing… and that for me is the most important.
Fixed over fluid any day; especially for text-based websites (blogs). However, sometimes a mix is necessary for photo-based sites where a larger “stage” is preferred. I rarely make fluid designs throughout on any website, even when requested by the client.
I have to admit – fixed-width designs are a bit of a pet hate for me. I’ve got 1400 pixels of width here, and I want to use it all if I choose to. If I *want* it narrower, I’ll resize the window myself.
One of the nice points about switching to Drupal for me was that it defaults to variable width – it’s not easy to *find* decent variable width designs for WordPress.
Liquid all the way.
Fixed is for webmasters who are too lazy to create and test a good design (which is myself sometimes) and users who are too lazy to resize their 19″ cinema display.
Giving Users a Choice = Good Webmastering
One thing to keep in mind, use a minmium width CSS code to keep the page from becoming too small (or a maximum to stop it from breaking in extremely large monitors).
I’m in the middle of revising my site, and am going with a liquid layout in the hopes that users are willing to resize the screen to suit their needs.
On text, however, I’m becoming dogmatic. Too many sites out there believe that fixed 5-point type is the way to attract readers. (For comparison, check out a newspaper. Most are in the 10-11 point range).
I’m not close to legally blind. I need glasses, but not the ones that look like coke-bottle ends. But they are weak enough that no matter how good the site, if I can’t scale it, I’m not reading it.
I am with Michael on this one. I hate fixed-width designs. I have a large monitor at a resolution that I like for a reason. I hate that most blogs have huge amount of unused real-eastate on either side.
ADDITION: I know the min-width/max-width CSS is not obeyed by IE, but it is still a good idea because your average IE user is mostly likely not going to have the latest super-sized mega display. The people who do have large displays are also the people most likely to use firefox.
Depends a lot. Some are fixed width, some liquid, some left-justified, some centered.
Where there’s a lot of text, and not much visual going on, I’ve tended to go fluid-centered, like blue fish network hub site – there’s a lot of info, and feed, and not much graphical content, so it makes sense to let people read it as wide as they’ve got their browser window (but it does need to fit in small spaces too)
For other blogs, I’ve gone with fixed width because I think it makes the content look better.
Your Website Designs Impact On Ad Placement And Performance
What impact does your website design have on your advertising performance? It has a whole lot to do with it and I’ll show you why. First off let’s tackle the actual size of your website. Size has a double meaning…
We use both on our different sites.
My question is “Do you think that fixed width earns more than liquid? Or vice versa? ”
I am not sure yet, and we are testing it with a couple of sites.
Why not both?
I skin my site so I have a bunch of fixed width layouts and some that aren’t. Everyone’s happy. Well, except for the people who don’t know what a skin is or just don’t see the link to change. I still get complaints from them.
As a former web developer and later project manager in Ad Agencies my experience is this:
Layout breaks up only on design focused sites; for example promotional microsites or image heavy sites. Sites that are targetted at delivering large amounts of content ARE vastly more efficient with a variable width. If the layout of a page is bothersome at a large resolution the solution is a simple browser resize.
Sites should ALWAYS. Read again ALWAYS be designed with the lowest common denominator in mind. This is something that the uber-computer-savvy often forget, assuming that the majority of users are on two 1280.1024 monitors or run resolutions above 1024 pixels wide.
Having said that most of my sites are of fixed width except one. The fixed width sites are that way to preserve tight design requirements, the variable width site presents large amounts fo text.
Side Note: If you have a data intensive site, try to include a print this page function.
Liquid Vs. Fixed Width Design
I say let the content determine the design. Large amounts of text such as articles usually dictate a fixed width design while large amounts of dynamic content chunks like you see in online shopping carts tend to lean towards liquid designs.
I reckon it’s another one for a blog by blog basis.
The established principles of usability should govern and they include readability. Visitors don’t like reading more than X number of words per line, and they aren’t mad on acres of white space either.
On sites where I have a large readership I go with Liquid within min and max parameters – especially for text. We have to pay attention to the Lowest Common Denominator. We all know sites look not great when rendered too wide or too narrow but it’s our job to give the visitors the best experience they can have, regardless of our own screens.
With Web 2.0 and fashion, Type is getting bigger, and increasingly more users alter their browsers so they get to choose what size text, and sometimes images, are. I myself – when in leisure mode – view News and Entertainment sites on Opera at 150% from a non working distance. Absolute fixed widths mess with the choice of me – the user.
I’ve got to take issue with this comment because its not a matter of being lazy but a matter of skill, and although in the old days I had liquid sites, with blogging its a lot harder to get your blog to work well with liquid templates and looking good as well. For the 98% of us its far easier, simpler and more practical to go fixed, if it was easier more people would go liquid.
At first I loved the new liquid tech but I came to the same conclusion, on big screens it was a pain to read and on small screens things get all mixed up. I’ve reverted to fixed width.
I would love to have a good working liquid design. Right now I am testing http://the-singers.com with 3 column (outside fixed and center liquid). It’s what I want and prefer. It seems to have a few wp2.0 things in it though, and didn’t translate well on my wp1.5.2. sites that I have yet to upgrade..
I have another blog (but there’s been no posts on this blog) for my father-in-law’s business at http://CorydonClock.com/blog/ .. I always liked that template, because you can ‘toggle’ away the right and left columns to make the center text full screen wide. With some CSS tweaking .. I always thought I could manage to make this into a better liquid type of design.
I personally use 1152 x 864 screen, but when I started I tried to design or modify my designs so it would look good on 800 x 600. Over time, it was a good plan, because my statistics are also showing a substantial amount of readers using this resolution. This includes my parents. However, when I went to my parents computer, not only is their screen set for 800×600, they use extra large text and the window menus are extra large. You still have to scroll side to side to see a simple 400 px wide picture! I don’t get it. I think that’s why I now prefer the liquid method – to just fit the screen viewing it.
Also: there was a couple mentions of comparing blog designs to newspaper layouts .. I just can’t see how that can be compared at all, it’s like apples and pancakes. I think I would prefer more spaces horizontally between paragraphs, than spaces vertically inbetween columns.
Once the guys at Microsoft teach their new browser simulation called “Internet Explorer” some CSS or most internet user get rid of the simulation and use a real browser it would be much easier because one could use liquid design with fixed width for better readability.
However, I hardly know anyone who has a screen width of more than 1280 pixel and uses the browser fullscreen as standard. They all have various windows parallel. And resizing the browser shouldn’t be a mayor problem.
But I have to admit, fixed design can be a lot easier for design, at least until you are getting used to liquid design.
However, with a growing number of mobile devices I think the future could result in a growing number of smaller screen resolutions. that can be a real problem…
Regards,
Holger
[…] Darren Rowse the “ProBlogger” raised a question — liquid or static blog layouts? I kinda agree with Chris’ comment here that liquid layout is more difficult to master than fixed width (give me “flex” attribute in XUL!!), however I do not think it is webmasters are necessarily lazy if fixed width design is implemented. In fact, many good “pixel perfect” design has to rely on fixed width layout, where placing your element at that precious position is crucial. They usually came from desktop publishing background, when your A4 is always 210mm by 297mm. […]
Rob said:
Sites should ALWAYS. Read again ALWAYS be designed with the lowest common denominator in mind. This is something that the uber-computer-savvy often forget, assuming that the majority of users are on two 1280.1024 monitors or run resolutions above 1024 pixels wide.
In spirit I agree with this, but practically I don’t worry too much about people with resolutions below 800×600 anymore, although my sites are generally liquid. When people get really hardcore and say you should *always* do this or that, I wonder if their site works for minitel phones from France or Imax screens :)
The best answer anyone can give is to know your audience as much as possible, and then work out the best trade-off between your business goals, your readers technology and abilities and your particular contents needs.
There is no single answer here.
Regarding: “comparing blog designs to newspaper layouts .. I just can’t see how that can be compared at all, it’s like apples and pancakes.”
The factor being compared is line-length. The downfall of fluid layouts (don’t like “liquid” personally) is that they may extend the line length too far. The reason for the comparison to newspapers is because there IS an optimal line length. Reading text that extends too far has bee proven to be more difficult. There is a body of usability research on this for the computer case.
However, a fluid or elastic layout can stretch multiple content pods, not just the main pod, which is usually the culprit of the long line length – having a fixed left nav bar and sidebar but expanding content area. Argiung that all fluid designs are like this isn’t accurate, even though they are common.
Personally, I like fluid designs, but find them difficult to implement well in CSS. The ideal design does not collapse on itself but may float or wrap secondary elements as necessitated by the browser size.
Here is a great resource for for this topic: http://www.positioniseverything.net/articles/onetruelayout/
I’m always tetering with this decision when I design web sites. In my first web designs, I used liquid. then, i found that fixed is a whole lot easier to deal with. you get more consistent results and your web site testing sessions are not doubled.
Liquid designs are definitely more difficult. I have two blogs that are liquid and two that are fixed. The two liquid layouts are intended for an audience with 1024 X 768 or greater. Below that resolution the sidebar looks a little too squished or even drops below the other div. Even for the two fixed-layout blogs, my stats show a majority at 1024 x 768 or greater, so I might redo them, as well. With CSS you can use percentages that stretch nicely. Most people don’t know how to resize text in their browser and they won’t find your style switcher button, either. Make the font a little bigger and hardly anyone will ever complain, but make it too small and you will get complaints.
Holch said: “However, I hardly know anyone who has a screen width of more than 1280 pixel and uses the browser fullscreen as standard. They all have various windows parallel.”
I was actually wondering about this the other day. I almost never run more than one thing on my screen at once. Right now I am on my laptop with 1024×768, but I also run single and dual 19″ monitors on my desktops. The only time I ever have two windows visible is if I need to copy something out of the one. I guess I am weird.
I might have missed it, but it’s interesting that very few bloggers ever talk about readability, or the lack thereof, in liquid design.
I know that print and the internet are different. But when it comes to longer blog posts, the human eye already has trouble with text blocks wider than 5 physical inches. In fact, most people prefer the width of a paperback novel, whose text block is about 3.5 inches – for a very good reason. A liquid design always forces me to narrow the browser width.
What’s more, the eye needs a certain amount of “leading” (space between lines) to follow a large block of text without getting tired or bored. The amount of leading should be proportional to the width of the text block. This does not happen in current liquid designs.
If your visitors aren’t coming back, and you tend to have long posts, this might be why. I’m not saying that all of my blogs are easily readable, but I’m trying – mainly by not using liquid design whenever possible.
Great topic. I am a web developer for a B2B oriented site and currently use a variable width site. Why? Because my site has to present data content to the user (listings of titles, reports, etc). I can show more information horizontally across the page, for say a grid view. I just optimize the page so it looks good at a minimal res of 800 pixels wide. Many business folks in our industry are use to viewing data like a spreadsheet.
But I will admit its more difficult to work with variable width layout when you start getting involved in the design of layout with images, ads etc. Currently our marketing dept wants to spruce things up, and I am finding it difficult to implement new design elements and keep things looking good and balanced when the page is resized (expanded). A fix width is definitely better the more you start requiring a specific design or layout of elements in your page.
I’ve noticed this evolution over the years as some big content sites like CNET have migrated from a variable width to a more fixed width layout. The bigger and more commercial CNET became, the more vibrant and design oriented the site became. With so many design elements, they switched to a more fix width layout because they need precise control over the look.
I may switch to fix width and use variable width for data listings etc. A blend in my situation is probaly best.
There is another good reason to use fixed width in preference to fluid…. how many times have you printed from a website and lost the right side of the content? ….. If your blog (or I suppose any website) is heavy on text then my own view is that fixed width is better for efficient reading AND PRINTING. Of course, this does not apply if you don’t expect anyone to print your articles!
For example, there are some clean default templates on Blogger, just right for lots of text, but they are fluid. You can easily convert them to fixed width using the method in this article:
http://blogger-templates-directory.blogspot.com/2004/09/fixed-width-webpage-hack-for-blog.html
Cheers
quicklode
Have you explained about how can we fit our blogger layout which fits the mobile screens. As a new blogger I would like to know if you have already written some post about it.