Inspiration for flexible web design

Liquid and elastic web sites don’t have to be ugly or boring. There are plenty of beautiful examples of flexible design to inspire you.

This post was last updated April 2009

Flexible web sites—sites that are liquid or elastic—have the unfair reputation of being ugly and plain. There are certainly lots of flexible sites that fit this stereotype, just as there are tons of ugly fixed-width sites. But flexible design doesn’t have to be unattractive. There are lots of really beautiful, graphically rich liquid and elastic web sites, which are all the more impressive to me because of the extra skill it often takes to pull off these graphic techniques in a flexible environment.

Here are some web design galleries that showcase flexible design:

No Resolution
This is an entire site devoted to showcasing liquid and elastic designs. Unfortunately, you have to register to submit entries, so things have been slow lately. Still, lots of great stuff in the archives, and new additions from time to time.
CSSGlance, liquid layout category
CSSGlance categorizes all entries as fixed-width, liquid, or elastic, which is really nice. They have a pretty good collection of liquid layouts.
CSSGlance, elastic layout category
Only a few things here, but elastic layouts are pretty rare in general, as well as hard to recognize with only a glance.
CSS Drive, liquid layout category
This category seems to have been mostly forgotten about recently, but it does have a good collection of liquid layouts from 2007 and earlier, and new entries do show up occasionally.
Unmatched Style, entries tagged as liquid layout
A very small collection of liquid layouts that is very rarely updated, but I include it here in case it takes off one day. Let’s hope so!

I keep my own collection of designs I find attractive and inspiring in I have a number of liquid layouts saved as inspiration, as well as a few inspiring elastic ones. I’ll point out a few of my favorites:

Did you like this?

16 Responses to “Inspiration for flexible web design”

  1. Lindsey

    Thanks for these great resources! Your awesome session today has inspired me to begin my first liquid site… I think it will be a fun challenge! Thanks!

  2. Zoe Gillenwater

    I’m so glad to hear that, Lindsey! Keep me up to date on how your liquid layout comes along. And submit it to these gallery sites when you’re done. 🙂

  3. Zoe Gillenwater

    aSKer, I know there are a lot more CSS galleries than the ones I listed here, but these are the only ones that specifically highlight flexible (liquid and/or elastic) web sites separately from fixed-width sites. The site you linked to doesn’t do this, so I can’t recommend it as a resource for flexible design inspiration specifically.

  4. Fashion Girl

    I recently came across your blog and have been reading along. I thought I would leave my first comment. I don’t know what to say except that I have enjoyed reading. Nice blog. I will keep visiting this blog very often.

  5. Optimistic Elly

    As an I.S. manager at a popular site, I’ve struggled with this issue for years. IMHO, every designer would like to go liquid within a range. But the problem so many of us run into is cross browser compliance for max-width settings… You sort of run into an ‘all or nothing’ scenario if you want to remain fully x-browser supported. And with many desktops set at 2400px it really gives you a designers nightmare trying to remain liquid to such a broad range…

    So for now, I wholeheartedly applaud the enthusiasts and people spending the time and energy to go liquid, because as you said, “they are all the more impressive to me because of the extra skill it often takes to pull off these graphic techniques…” Seriously, i’ve been doing this for 10 years, and the skill many of these liquid designers have is absolutely fantastic!

    Thanks for the great collection of links, I’ve been gobbling them up and learning lots!

  6. Carl

    I try to design responsive now, due to the increasing demand for mobile compatibility, a lot of the max-width browser discrepancies have hack arounds thankfully. Back when this article was writen it sure was a different story though!
    Here is my website: Dunedin Website Design


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>