views:

184

answers:

2

What is technical difference between Fluid vs liquid vs elastic vs Flexible css layouts?

Are these all same or different technically?

Is fluid layout better for both mobiles and computer user?

I think there are only two properties to make fluid layout "em" and "%".

And we already use "em" for font even in fixed width layouts. What are other things we need to do to make site flexible? Which part should be flexible and which would be better as fixed? Or we should make whole thing flexible?

+1  A: 

They are all pretty much the same. If you want to get really picky, I guess you could say that elastic has a maximum width, whereas fluid might continue to increase in width as long as the window is widened. But generally, they are interchangeble.

Nate B
Who has given this naming convention? :)
metal-gear-solid
It just evolved from common usage, there's not really a definitive answer for this sort of thing.
Nate B
+1  A: 

I suggest you to read some articles about this subject. Smashing magazine has a great post about it, to see which one is right for you. They have some definitions about these layouts and I believe they are very accurate:

Fixed:

A fixed website layout has a wrapper that is a fixed width, and the components inside it have either percentage widths or fixed widths. The important thing is that the container (wrapper) element is set to not move. No matter what screen resolution the visitor has, he or she will see the same width as other visitors.

Fluid:

In a fluid website layout, also referred to as a liquid layout, the majority of the components inside have percentage widths, and thus adjust to the user’s screen resolution.

Elastic:

There is a third option when working with Web page layouts. An elastic design is sometimes preferred by designers because it mixes the two other main layout types. It works by sizing all elements with em’s. The quote below explains exactly what an em is and why it can be beneficial.

The pros and cons in the article are very concise too, with examples and further researching.

If you choose to use "fluidic" layouts, read their article about the subject as well.

GmonC