70+ essential resources for creating liquid and elastic layouts

Check out these great online resources on creating liquid/fluid and elastic layouts, including sources for design inspiration, downloadable templates, frameworks, articles and tutorials.

I often get asked for my recommendations of resources to learn how to create liquid/fluid and elastic layouts. My first answer is, of course, my own book Flexible Web Design: Creating Liquid and Elastic Layouts with CSS. Hey, is it so bad to be proud of your work? It’s the only book out there entirely devoted to designing and building flexible web sites, and the dozens of layout techniques it covers can also be applied to fixed-width design. But I’ll shut up about my book now; if you’re not the book-buying type, here are over 70 online resources to get you started creating attractive and robust flexible web pages.

Design inspiration

It’s always helpful to look at existing liquid and elastic sites to get inspiration for how to design your own. I’ve pulled together several sources of flexible design inspiration in a couple former blog posts on my site:


Even if you don’t read my book, you can download the example and exercise files from the book’s companion site. They essentially give you several liquid and elastic layout templates or starter pages that you can use to build your own liquid and elastic sites.

Here are some other layout templates:

Here are some frameworks and grid systems that allow you to make liquid and/or elastic layouts:


Here are some general articles on the what and why of flexible layouts:

Understanding min-width and max-width is essential to working with flexible layouts:

Understanding line lengths is also essential. Although popular belief is that there’s a narrow band of line lengths that are ideal for everyone’s reading comfort, the (limited) research that’s been done on on-screen reading suggests that there is a much larger range of effective line lengths, and that there is a difference between preference and efficacy. Age, disability, reading level, native language, leading, and other factors can all impact which line lengths are most effective for specific individuals in specific situations. See these articles for details:


Here are tutorials on creating multiple-column liquid and elastic layouts:

Creating successful flexible pages is about more than just the layout; you have to make sure the content inside the layout can be flexible too. Here are tutorials on making content, backgrounds, and other effects work with flexible layouts:

This should keep you busy for a while, no? I hope this will be the start of some lovely liquid and elastic designs for you, folks! Drop me a line if you have one you want to show off; I love seeing other people’s great work.

Digg this article if you enjoyed it. Thanks!

Did you like this?

61 Responses to “70+ essential resources for creating liquid and elastic layouts”

Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>