Responsive web design is easy with fluid layouts

Posted in on 23 January 2012

So, I have been thinking a lot about responsive web design recently. I’ve been reading about some CSS frameworks and recoding some of my core files so they can adapt to any grid system that I choose to use. As a result, I’ve decided to use fluid or elastic layouts or hybrid layouts wherever possible from now on.

More: This blog post describing fluid, elastic layouts is what started me using a fluid, elastic layout on some sites. Hat tip to Ed Merritt for the article! I posted about Going Fluid Elastic at that time.

Now, we all know that there’s no perfect layout method because whether it is fixed, fluid, elastic or a hybrid layout, they all have pros and cons. However, I’m increasingly thinking that the advantages of a fluid, or fluid, elastic layout with a max-width set in ems, far outweigh any disadvantages. Particularly when you take responsive web design into account.

You might disagree and feel that fixed width layouts give you more ‘design control’ but consider this. With a fluid layout, you already have a responsive layout. You just need to tweak it slightly for the very smallest screen widths and you’re done! Of course, you need to think about this from the start but, believe me, a responsive layout comes very easily when you think fluid or fluid/elastic.

I may be late to the fluid, elastic party, and this may all be blindingly obvious to some of you, but I like to take my time on these things!

Flexible Web Design by Zoe Mickley Gillenwater describes how to build fluid and elastic CSS layouts. It’s a great read! Buy from Amazon.com · Amazon.co.uk

More: Here’s a Smashing Magazine post describing Fixed vs Fluid vs Elastic Layouts

Related Posts

Comments

  1. Ian Lunn 23 January 2012, 11:21 1

    I agree. I think once you have the fluid layout, media queries allow you to get that “design control” back.

Textile Help
Stop looking at my bottom