Why should I use fluid web design layout?

A fixed layout design, for example with a width of 960 pixels, when viewed in a mobile with 300px screen should create an horizontal scroll bar right? but it don’t happen. Seems all the mobile browsers automatically scale down the to fit in mobile screen. Please see nbc.com in mobile. If this is the case, why should I use fluid web design layouts; fixed width also seems works fine in mobile browsers? Am I missing anything. Thank you.

A fluid design isn’t really about mobile devices - it’s more about working on any screen size and setup. If your site gives a horizontal scrollbar on any predictable setup (except small screens with pan and zoom), that’s a failure in my book. The whole interface setup is designed to work with pages scrolling vertically, but not horizontally.

So who has a screen narrower than 960px?, you ask. Plenty of people. A lot of tablets, for a start. And with PC and laptop screens getting wider, people are increasingly having two windows open side by side. On a 1600px display, you won’t get 960px in a half width window. Even on a 1920px display, you won’t get 960px in half of it. Why not? Because you need to allow space for the browser chrome and scrollbar.

Ultimately, it comes down to this. Do you want to make a site that works well for everyone, or do you think that some people with a different setup to you aren’t worth spending any effort on?

Thank you stevie. But a browser with 960px fixed width design should produce a horizontal scroll bar when viewed through a small screen mobile, am I right?. But it is not the case, if you view such sites in mobiles. Is this because mobile browser vendors scale down the entire website to fit in available width or is there any technical reason which I am missing. for example see the nbc.com in a mobile, everything fits into the mobile’s screen width. Also please give me an example site which is designed with 1. Fixed layout design 2. Entire site designed with absolute positioning

I accept that some sites are not going to adapt to a small screen. That may be down to the site not having the resources to create an adaptive setup, or it may be down to the content simply not being suitable to be reformatted into a 320px wide single column. With smartphones typically ignoring media="handheld" stylesheets, and responsive design still being relatively new, I accept that there may be a compromise where sites don’t fit onto a mobile screen and I have to pan and zoom. The fact that it is relatively easy to pinch in/out and move around in two dimensions means that this is less of an issue than it is with a traditional computer arrangement.

A 960px fixed width design always produces a horizontal scrollbar on my 1920x1080 computer screen (where my browser gets allocated half the space) - unless I zoom the web site to 90%. I find this particularly annoying and with a few exceptions where I was already involved with the site before they stuffed up their site design with such a stupid too wide fixed width I generally leave such sites never to return.

If you are going to design for fixed width then use an A4 printed sheet as the width you design to. This gives a fixed width for your page of somewhere around 740px. Any fixed width pages wider than that are BROKEN.

You should never design entire sites using absolute positioning. Absolute positioning should only be used where one element needs to be positioned overlapping another element. position:absolute should only ever be applied to elements inside of another element with position:relative (unless the element is being added and animated using JavaScript).

As long as your fixed width design is about 980px or narrower, devices like the iPhone will scale it down to fit the viewport. Any wider than that and you’ll start to get sideways scrolling, unless you set a different width in the viewport meta element. E.g.

<meta name="viewport" content="width=1200">

The obvious downside of trying to fit a wide site inside a small viewport is that it’s microscopic. On some devices, of course, you can zoom in, so all is not lost, but that kind of web experience is not everyone’s cup of tea.

A fluid site is harder to control designwise, but often makes for a better experience—for reasons such as felgall outlined. “Responsive design” is the new trend, which harnesses @media to style layouts differently under different circumstances. In that case, you’d use something more flexible, like this:

<meta name="viewport" content="width=device-width">

That’s certainly my preference, but we’ll see if the responsive design movement keeps going, or whether, in the end, the one-size-fits-all with zoom approach will reassert itself. I know some people who hate responsive layouts and just want to see the same layout on all devices.

ralph.m is correct about viewports. RWD is meant to provide an optimal user experience across all screen sizes. Much focus of optimal at smaller screens is given to the ability to read and navigate the site. Just shrinking the site to fit a viewpoint, as you mentioned in your first post, isn’t RWD. It’s just scaling.

Pure RWD does use fluid layout. As was pointed out above, they are more difficult. A simpler approach is to not use fluid and instead use breakpoints via media queries. This is the adaptive design option, which is still RWD.

To clarify a little what Ralph already said in that for devices like the iphone you need to tell it to stop scaling and allow the layout to adapt to the smaller screen. This is done with the viewport meta tag.


    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>  

This is only applicable if you have built a responsive design (one that will adapt to viewer smaller viewports).

For example say you have a page full of just text and you just have a container that is set to 80% wide. When you close your browsers window to 320px wide the text wraps and flows and still fits nicely in the 320px width without anything sticking out and there are no scrollbars showing. The text is easily readable and the same size as it was when the browser was wide except that now it is confined to the smaller width.

However you now check the page on your iphone (or similar) and you see text that is microscopic and impossible to read. This is because the device assumes the page is 980px wide and then scales that 980px smaller until it fits the devices viewport thus fitting the layout onto the smaller screen in exactly the same format as a desktop at 980px.

When you add the meta tag mentioned above it stops this scaling action and allows the layout to fit the way that it should (i.e. the text will wrap and the layout collapse as small as the design allows). This is fine for fluid/adaptive layouts and just what you want. However for sites that are not mobile optimised they need the device to scale the page otherwise it will be broken and much too wide to fit which is why the option was set as a default.

The question is whether you do nothing and let the device scale your page small and then users have to zoom each section or instead create a more mobile friendly solution with readable text and altered content that fits the smaller screen more easily.

As Ralph said the answer isn’t always clear cut as some people like to see the same site on the mobile as they do on a desktop and not a reduced experience. However the majority of opinion is that you should offer a cleaner and more readable experience on a mobile device than just letting it scale everything to microscopic proportions.