70+ essential resources for creating liquid and elastic layouts

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:

• Inspiration for flexible web design
• The liquid web site motherload

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

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

• Fluid Grid framework
• Fluid Grid System framework
• Fluid 960 Grid System
• aplus elastic grid
• Elastic framework (elastic and liquid)
• Emastic framework (elastic and liquid)
• YUI Grids CSS (liquid)
• YAML framework (elastic and liquid)
• The 1kb CSS Grid can be adapted for liquid layouts (see description halfway through this article)

Articles

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

• Sample of Chapter 1: Understanding Flexible Layouts (PDF, from Flexible Web Design book)
• Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You? (Smashing Magazine)
• CSS Layouts: The Fixed. The Fluid. The Elastic. (Beast-Blog.com)
• Why browser zoom shouldn’t kill flexible layouts
• Elastic layout – wrong term? (AlastairC)
• Accessible layouts (AlastairC)
• Where Have All the Flexible Designs Gone? (Sitepoint)
• Flexible Layouts: Challenge For The Future (Smashing Magazine)
• Elastic Design (A List Apart)
• Fixtorati (Adactio)
• Liquid layouts using CSS – the joy, the pain, the tears (presentation at Web Essentials 05)

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

• Sitepoint’s CSS reference on min-width and max-width
• Add min-width and max-width Support in Internet Explorer 6 (PDF, from Flexible Web Design book)

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:

• The Line Length Misconception (Viget Advance)
• Reading Onscreen: The Effects of Line Length on Performance (usability.gov)
• The Effects of Line Length on Reading Online News (SURL Usability News)
• The Effects of Line Length on Children and Adults’ Online Reading Performance (SURL Usability News)
• Optimal Line Length: Research Supporting How Line Length Affects Usability (webusability.com)
• Reading Text Online (UI Design Newsletter)
• Line-length is not different than any other user preference (CSSing)

Tutorials

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

• Liquid layouts the easy way (Max Design)
• CSS Mastery: Fixed-Width, Liquid, and Elastic Layouts and Faux Columns (excerpt from CSS Mastery on webreference.com)
• Fixed or fluid width? Elastic! (456 Berea Street)
• Creating Elastic Layouts with the em Unit (Community MX)
• The Incredible Em & Elastic Layouts with CSS (Jon Tan)
• Fluid Grids (A List Apart)
• Five simple steps to designing grid systems — Part 5 (on liquid grids, by Mark Boulton)
• CSS Floats to Display Columns in Any Order (Christopher Schmitt)
• Changingman layout (updated) (also a template, from For a Beautiful Web)
• Intricate Fluid Layouts in Three Easy Steps (24 Ways)
• In Search of the Holy Grail (A List Apart)
• Creating Liquid Layouts with Negative Margins (A List Apart)
• The Definitive Guide to Using Negative Margins (Smashing Magazine)
• Get Refreshed: Liquid Layouts With Simpler CSS and Without A Semantic Mess (Mindfly)
• Multi-Column Layouts Climb Out of the Box (A List Apart)
• Fluid elastic design (Boagworld)
• Using the Liquid CSS Layouts in Dreamweaver CS4 (excerpt from Mastering CSS with Dreamweaver CS4 on peachpit.com)
• Flexible equal height columns (SocialGeek)
• Vertical Centering with CSS (Andrew Valums)

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:

• Creating Liquid Faux Columns (Community MX)
• Elastic Faux Columns (Nick Cowie)
• Smart Columns w/ CSS & jQuery (Soh Tanaka)
• Equidistant Objects with CSS (CSS-Tricks)
• Sample of Chapter 9: Creating Flexible Images (PDF, from Flexible Web Design book)
• Foreground images that scale with the layout (pure CSS solution)
• Quick Tip – Resizing Images Based On Browser Window Size (JavaScript solution, from Build Internet!)
• Creating sliding composite images
• CSS effect: space images out to match text height
• Hiding and revealing portions of images
• Stretchy Images with HTML and CSS (Sitepoint)
• Fluid searchbox (outbreak)

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!