Are fluid websites worth making anymore? [closed]

Question

I'm making a website now and I am trying to decide if I should make it fluid or not. Fixed width websites are much easier to make and also much easier to make them appear consistent.

To be honest though, I personally prefer looking at fluid websites that stretch to the full width of my monitor. My question comes from the fact that in most modern browsers you can hold control and scroll your mouse wheel to basically resize any website.

So is creating a fluid website worth the trouble?

Answer 1

Fluid design - truly fluid - is hard. Very hard. It's not just a question of page width - do your fonts scale, and does everything scale with them? Ideally:

• Sizes should be defined in em rather than px
• ...and that goes for element sizes, not just fonts!
• Given a change in font size or zoom level, the page elements should be the same size relative to each other

Our main product is fluid, and it's a pain from my point of view as a designer, especially because it involves a lot of user-generated content.

For one thing, images - in a fixed-width site, you can have an image that fills half the width, and looks great. In a fluid site, this image is just as likely to be lost in a sea of whitespace, looking rather lonely.

Life should be easier once border-radius and other CSS3 properties come into play more, but sadly our core audience are government workers, who all, ALL STILL USE IE F@!*ING 6!

---

To answer the question, "is it worth it"? Yes, if you do it right.

Here's a scenario: choose a fixed-width site: your boss displays it to a client on his brand-new, 1920x1600 laptop, then complains to you about "how it all looks small on this guy's screen!"

Answer 2

Up to a point - yes.

There's a certain width, where text begins to become annoying to read if it's too wide. Easy to test if you have a large monitor, just grab notepad and paste some text into it without line breaks.

However, when going down to smaller sizes, being fluid might be a good idea. Mobile phone browsers are more and more capable of displaying "normal" websites just fine, but they are sometimes width-constrained, and as such, benefit if your site can fit in a bit smaller space.

Personally I also like to keep browser on my monitor but only at half of the monitor's width (24"). Sites which scale nicely into that are very good.

I think it's mostly a user convenience case. Not all sites will benefit from being fluid, but I think sites which have lots of text content are the ones that will most benefit from it, at least if they are fluid up to a max width (say 800px or whatever)

Answer 3

You can make it like this.

# Make the main layout fluid and apply 'max-width: 1140px' to it and center it.

By this there won't be 'long lines' of text on bigger screens and proper settlement of web page on smaller ones (excluding 800x*** and lowers).

I have implemented this method in my new projects and it's working like a charm.

a.t.b .. :)

Answer 4

The most important thing is to consider dominant use cases of your web site or application. Do you expect people to use it exclusively on mobile devices? Mobile phones, netbooks, desktops?

Take a look at "Responsive Web Design" by Ethan Marcotte: http://www.alistapart.com/articles/responsive-web-design/

Great article that demonstrates the use of truly fluid layouts using media-queries. Sometimes you need to built out a separate front end for different user-agents, but sometimes media-queries are the perfect tool to service multiple resolutions across different user-agents.

Answer 5

Yes. Page zooming is great but it is primarily used to make text bigger, not to make text fill the viewport. Certainly if the body text is already too wide, zooming down to make it fit will usually make it unreadable.

You need liquid layout if you're going to make the text fit the viewport whether or not it's zoomed.

The point about ‘long lines being hard to read’ is often overstated by designers trying to justify fixed width designs(*), but in reality it doesn't seem to hold quite as strongly on-screen as it did on paper. Of course setting a good leading/line-height is important, and max-width can be used to inhibit the worst excesses of long lines. (Set it in font-relative em units.) You don't get max-width in IE6, but that's not the disaster it once was. (You can fix it with a little bit of JavaScript if you really care about those guys. I don't.)

(* which are indeed less work for highly graphical layouts. But for a simpler layout like, er, StackOverflow's, there isn't really any reason not to go liquid. Tsk @SO, eh!)

Answer 6

I'm gonna go against the majority and say NO. Reasoning: fluid sites like Wikipedia are a nightmare to read on large screens due to their long line length (though its citations make it hard to read at the best of times).

The problem really occurs because there is no mechanism to size text relative to the screen resolution. If you could automatically make text bigger on bigger resolutions, you could stay closer to the 80-odd characters per line that's generally regarded as the best for readability.

There is also the problem of images and other fixed-size elements. You can have large images and let the browser shrink them if necessary, but then you run into other problems like much longer download times, and image quality problems in many browsers.