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:
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!
Stunning CSS3: A Project-based Guide to the Latest in CSS
Flexible Web Design: Creating Liquid and Elastic Layouts with CSS
42 Comments
You can follow the comments for this post through the comments RSS feed.
1
Tweets that mention zomigi.com » 70+ essential resources for creating liquid and elastic layouts -- Topsy.com wrote on January 26, 2010, at 3:57 am:
[...] This post was mentioned on Twitter by DeborahEdwards-Onoro, Clive Walker and Zoe M. Gillenwater, Zoe M. Gillenwater. Zoe M. Gillenwater said: @missuseless You've inspired me to finally write a blog post linking to lots of great flexible design resources. HTH! http://bit.ly/53pePG [...]
2
uberVU - social comments wrote on January 31, 2010, at 2:47 am:
Social comments and analytics for this post…
This post was mentioned on Twitter by zomigi: @missuseless You’ve inspired me to finally write a blog post linking to lots of great flexible design resources. HTH! http://bit.ly/53pePG...
3
Twitted by fabiochaves wrote on February 03, 2010, at 6:03 am:
[...] This post was Twitted by fabiochaves [...]
4
zomigi.com » 70+ essential resources for creating liquid and elastic layouts « Netcrema – creme de la social news via digg + delicious + stumpleupon + reddit wrote on February 03, 2010, at 6:41 am:
[...] zomigi.com » 70+ essential resources for creating liquid and elastic layoutszomigi.com [...]
5
zomigi.com » 70+ essential resources for creating liquid and elastic layouts » Web Design wrote on February 03, 2010, at 7:34 am:
[...] zomigi.com » 70+ essential resources for creating liquid and elastic layouts [...]
6
zomigi.com » 70+ essential resources for creating liquid and elastic layouts : Popular Links : eConsultant wrote on February 03, 2010, at 7:34 am:
[...] more: zomigi.com » 70+ essential resources for creating liquid and elastic layouts 27 January 2010 | Uncategorized | Trackback | del.icio.us | Stumble it! | View Count : 0 Next [...]
7
Twitted by zyrd wrote on February 03, 2010, at 10:25 am:
[...] This post was Twitted by zyrd [...]
8
Most Tweeted Articles by Windows7 Experts wrote on February 04, 2010, at 6:34 am:
[...] vSphere PowerCLI Blog: 5 PowerCLI how-to videos for your viewing pleasure. 2 Likes zomigi.com » 70+ essential resources for creating liquid and elastic layouts 2 Likes FeedCount-Like Google Analytics Counter Free Web Resources Everyday – [...]
9
70+ essential resources for creating liquid and elastic layouts wrote on February 05, 2010, at 5:16 am:
[...] Read the original post: 70+ essential resources for creating liquid and elastic layouts [...]
10
links for 2010-02-14 « Ex Orbite wrote on February 15, 2010, at 2:04 am:
[...] zomigi.com » 70+ essential resources for creating liquid and elastic layouts (tags: css webdesign layout resources design web inspiration ui ux) [...]
11
Modern CSS Layouts, Part 2: The Essential Techniques | i know idea wrote on May 06, 2010, at 9:40 am:
[...] 70+ essential resources for creating liquid and elastic layouts (zomigi.com) [...]
12
Modern CSS Layouts, Part 2: The Essential Techniques | Web Design Cool wrote on May 06, 2010, at 9:45 am:
[...] 70+ essential resources for creating liquid and elastic layouts (zomigi.com) [...]
13
Modern CSS Layouts, Part 2: The Essential Techniques - Programming Blog wrote on May 06, 2010, at 2:01 pm:
[...] 70+ essential resources for creating liquid and elastic layouts (zomigi.com) [...]
14
Modern CSS Layouts, Part 2: The Essential Techniques | webdunyam.net wrote on May 06, 2010, at 5:18 pm:
[...] 70+ essential resources for creating liquid and elastic layouts (zomigi.com) [...]
15
Modern CSS Layouts, Part 2: The Essential Techniques | Creative Man Studio wrote on May 07, 2010, at 2:11 pm:
[...] [...]
16
Modern CSS Layouts, Part 2: The Essential Techniques | Designer Net wrote on May 10, 2010, at 6:06 pm:
[...] [...]
17
Modern CSS Layouts, Part 2: The Essential Techniques wrote on May 14, 2010, at 8:27 pm:
[...] 70+ essential resources for creating liquid and elastic layouts (zomigi.com) [...]
18
Modern CSS Layouts, Part 2: The Essential Techniques - Smashing Magazine wrote on May 16, 2010, at 11:06 am:
[...] [...]
19
zomigi.com » CSS Summit 2010 slides and resources wrote on July 28, 2010, at 5:36 pm:
[...] 70+ essential resources for creating liquid and elastic layouts [...]
20
zomigi.com » Web Directions USA slides and resources wrote on September 23, 2010, at 9:47 am:
[...] 70+ essential resources for creating liquid and elastic layouts [...]
21
zomigi.com » Adobe MAX slides and resources wrote on October 26, 2010, at 6:41 pm:
[...] 70+ essential resources for creating liquid and elastic layouts [...]
22
diseño paginas web wrote on November 22, 2010, at 3:33 pm:
This post was mentioned on Twitter by zomigi: @missuseless You’ve inspired me to finally write a blog post linking to lots of great flexible design resources.
23
Cristian wrote on December 06, 2010, at 9:53 am:
You can have a look as well at Flexi CSS Layouts – a Dreamweaver Extension that help you create Css layouts in Dreamweaver without coding.
24
alquiler departamentos miami wrote on December 13, 2010, at 8:36 pm:
This post was mentioned on Twitter by DeborahEdwards-Onoro, Clive Walker and Zoe M. Gillenwater, Zoe M. Gillenwater.
25
paisajismo wrote on December 21, 2010, at 2:25 pm:
This post was Twitted by zyrd
26
Getting Started With Responsive Web Design - Smashing Magazine wrote on January 12, 2011, at 11:32 am:
[...] [...]
27
Getting Started With Responsive Web Design | The best Tutorials wrote on January 12, 2011, at 11:38 am:
[...] For more information on creating fluid websites, be sure to look at the book “Flexible Web Design: Creating Liquid and Elastic Layouts with CSS” by Zoe Mickley Gillenwater, and download the sample chapter “Creating Flexible Images.” In addition, Zoe provides the following extensive list of tutorials, resources, inspiration and best practices on creating flexible grids and layouts: “Essential Resources for Creating Liquid and Elastic Layouts.” [...]
28
Responsive Web Design: What It Is and How To Use It | Programming Blog wrote on January 12, 2011, at 6:17 pm:
[...] For more information on creating fluid websites, be sure to look at the book “Flexible Web Design: Creating Liquid and Elastic Layouts with CSS” by Zoe Mickley Gillenwater, and download the sample chapter “Creating Flexible Images.” In addition, Zoe provides the following extensive list of tutorials, resources, inspiration and best practices on creating flexible grids and layouts: “Essential Resources for Creating Liquid and Elastic Layouts.” [...]
29
Responsive Web Design: What It Is and How To Use It | Remake Wordpress Theme wrote on January 14, 2011, at 1:06 am:
[...] For more information on creating fluid websites, be sure to look at the book “Flexible Web Design: Creating Liquid and Elastic Layouts with CSS” by Zoe Mickley Gillenwater, and download the sample chapter “Creating Flexible Images.” In addition, Zoe provides the following extensive list of tutorials, resources, inspiration and best practices on creating flexible grids and layouts: “Essential Resources for Creating Liquid and Elastic Layouts.” [...]
30
Web round up #11: The best responsive web design examples and resources | Mayfield Digital Blog wrote on January 15, 2011, at 9:01 pm:
[...] with an elegant way to serve up appropriately sized image files depending on the context.70+ Essential resources for creating liquid and elastic layouts: Another great resource from Zoe GillenwaterMedia queries:Sitepoint media queries reference: A [...]
31
zomigi.com » CSS3 book launch event wrote on January 25, 2011, at 10:39 am:
[...] 70+ essential resources for creating liquid and elastic layouts [...]
32
zomigi.com » Examples of flexible layouts with CSS3 media queries wrote on January 26, 2011, at 3:08 pm:
[...] creating effective, attractive, flexible layouts that adapt to the user’s screen size has always been possible, media queries add another [...]
33
alquiler departamento Miami wrote on February 14, 2011, at 9:46 pm:
Dreamweaver Extension that help you create Css layouts in Dreamweaver without coding.
34
Responsive Web Design?? ???? ??? ????? (1) wrote on March 31, 2011, at 3:54 am:
[...] Flexible Images.” ???? ??? ????? ? ??. ?? ??? “Essential Resources for Creating Liquid and Elastic Layouts.”?? ??? ???? ????? ??? ???? ??, [...]
35
caida del cabello wrote on April 26, 2011, at 9:02 pm:
wooow what can i say, one of the best posts about resources!, i check some of those links, and the tips on the them looks very creative!
36
Responsive Web Design: What It Is and How To Use It | Sejix Technologies Blog wrote on July 12, 2011, at 3:56 am:
[...] For more information on creating fluid websites, be sure to look at the book “Flexible Web Design: Creating Liquid and Elastic Layouts with CSS” by Zoe Mickley Gillenwater, and download the sample chapter “Creating Flexible Images.” In addition, Zoe provides the following extensive list of tutorials, resources, inspiration and best practices on creating flexible grids and layouts: “Essential Resources for Creating Liquid and Elastic Layouts.” [...]
37
Test Usability wrote on July 25, 2011, at 6:50 am:
Nice post….I have bookmarked it for future reference….
38
Responsive Design ??? wrote on August 25, 2011, at 8:01 am:
[...] For more information on creating fluid websites, be sure to look at the book “Flexible Web Design: Creating Liquid and Elastic Layouts with CSS” by Zoe Mickley Gillenwater, and download the sample chapter “Creating Flexible Images.” In addition, Zoe provides the following extensive list of tutorials, resources, inspiration and best practices on creating flexible grids and layouts: “Essential Resources for Creating Liquid and Elastic Layouts.” [...]
39
Artiklar om responsive web design och flytande grids « Henrik Tornberg wrote on November 18, 2011, at 5:12 am:
[...] Kapitel från boken Flexible Web Design (Zoe Mickley Gillenwater) + Tips på 70 länkar om ”flexibel webdesign” [...]
40
??????Web???????? | Hisun UED wrote on November 29, 2011, at 3:29 pm:
[...] ?????????????Zoe Mickley Gillenwater????Flexible Web Design: Creating Liquid and Elastic Layouts with CSS???????????“????????”????Zoe???“Essential Resources for Creating Liquid and Elastic Layouts.”??????????????????????????????????? [...]
41
Awesome Responsive Designs and Resources wrote on December 23, 2011, at 10:04 am:
[...] 70+ Essential resources for creating liquid and elastic layouts [...]
42
Responsive Web Design: What It Is and How To Use It | home wrote on January 20, 2012, at 7:15 am:
[...] For more information on creating fluid websites, be sure to look at the book “Flexible Web Design: Creating Liquid and Elastic Layouts with CSS” by Zoe Mickley Gillenwater, and download the sample chapter “Creating Flexible Images.” In addition, Zoe provides the following extensive list of tutorials, resources, inspiration and best practices on creating flexible grids and layouts: “Essential Resources for Creating Liquid and Elastic Layouts.” [...]