Have Fluid Layouts Fallen Out Of Fashion?
Remember when fluid layouts were all the rage? It seems like lately, more than 90% of the websites I frequent are using fixed layouts. The WordPress Theme Repository has more than twice the number of fixed-width themes than flexible ones. And all the sites I’ve made for clients in the past year have been fixed-width.
For the record, I usually do offer clients fluid-width designs. They choose to go fixed-width, it seems, because it makes them feel more in-control of the finished layout. And in a world of various browsers and various monitors and different resolutions, feeling in-control over something is a good thing.
The thing is: in a world of various browsers and various monitors and different resolutions, can we ever be in-control of precisely how a website is displayed?
It would be wonderful, indeed, if everyone in the world was using wide-screen monitors set at 1920×1080 resolutions and surfing on the same browser, but that’s simply not the case. My father-in-law, a tech-savvy man of 79, doesn’t like wide-screen monitors and refuses to use anything but 800×600. My mother, who insisted on a wide-screen monitor for the sole purpose of playing Farmville full-screen, doesn’t like having to scroll down a page even an inch.
Why, then, this move away from fluid layouts? Shouldn’t they be the answer to all our problems? Here, for example, is a screenshot of a 770-pixel fixed-width website, as seen on my wide-screen monitor:
I recently read about using resolution-specific stylesheets, sort of a “layout for every resolution”, and am curious to try this method out. Then again, wouldn’t it be better to design a rock-solid “hybrid” fixed and fluid layout? It may take more time, yes, but eliminates the need for multiple stylesheets or additional javascript.
I’d love to hear your thoughts on this. How many fluid-width sites have you designed lately?
Want an avatar? Get a gravatar! • You can link to this comment
I’ve found that using media queries to have different fixed layouts has worked well, that way you get the best of both worlds. Typically I have a main layout (960 wide), a medium one (760 wide) and a mobile one (400 wide).
Want an avatar? Get a gravatar! • You can link to this comment
You know what’s also fallen out of style? Running browsers full screen. It’s completely unnecessary for wide-screen systems. All you need is a viewable area just barely over 960px wide and you’re set to view most sites perfectly.
Want an avatar? Get a gravatar! • You can link to this comment
position: absolute;. In order to use cool animations made in jQuery, you have to position your element absolutely, otherwise it will not match up in all browsers.
Want an avatar? Get a gravatar! • You can link to this comment
It just makes it harder to design dynamic sites with fluid layouts.
Plus I prefer fixed width websites. Why add to the development headaches you have when you already spend that worrying about IE6.
Want an avatar? Get a gravatar! • You can link to this comment
The ‘control’ is a big factor, as long as theres no horizontal scroll on 1024*768 res. With cross browser testing you can pretty much cover most bases – people that use 800*600 would expect horizontal scroll by now surely. For wide screens a center aligned 960px fixed layout with and interesting bg (not distracting tho)
Want an avatar? Get a gravatar! • You can link to this comment
I love well-designed fluid layouts. When I have to build a fixed-width layout, I tend to gear it toward 960px wide (or 720px if the client wants it more narrow).
Most of the sites I build have a min-width of 720 or 960px and are made to be fluid for larger screens. This way there is a way to control “how small” a site gets without looking bad. One of the worst things for a fluid site is to be so fluid that it is allowed to be squished too much.