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:
Templates
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:
- Matthew James Taylor’s liquid and elastic layouts
- Layout Gala liquid layouts
- IronMyers liquid layouts
- CSS-Tricks liquid layouts (see “Layout Packs” third on page)
- Dynamic Drive CSS liquid layouts
- ThemeForest’s liquid fully-designed templates
- WordPress flexible themes
