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 del.icio.us. 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:
SimpleBits(sadly, no longer elastic)- Dizzain (liquid)
- Castello di Bolgheri (liquid)
- Sozidatel (liquid)
- Simon Wiffen (liquid)
- Clearleft (liquid)
- Biola Undergrad (liquid)
- RateMyArea (liquid and elastic)
- iA (elastic)
12 Comments
You can follow the comments for this post through the comments RSS feed.
1
Lindsey wrote on June 11, 2008, at 7:39 pm:
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 wrote on June 12, 2008, at 3:51 pm:
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
Liquid Design « Carcak’s Weblog wrote on July 03, 2008, at 3:53 pm:
[...] MAIN PAGE: http://zomigi.com/blog/inspiration-for-flexible-web-design/ [...]
4
aSKer wrote on July 25, 2008, at 5:48 am:
I might add http://css.wearethebuzz.com which is currently the most frequently updated CSS gallery with a new design added every 4 hours!
5
Zoe Gillenwater wrote on September 10, 2008, at 1:10 pm:
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.
6
zomigi.com » Updated flexible design inspiration wrote on April 22, 2009, at 10:49 pm:
[...] just updated my post on sites to explore for liquid and elastic web design inspiration. Web sites are constantly being redesigned and added to, of course, so I intend to keep updating [...]
7
zomigi.com » The liquid web site motherload wrote on July 16, 2009, at 4:03 pm:
[...] are featuring and gather ideas for solving problems in my own work. I should have mentioned in my flexible web design inspiration post that a great place to find liquid and elastic sites is within the portfolios of agencies or [...]
8
Web Site Design Companies New York wrote on July 30, 2009, at 7:13 am:
Good info. Thanks for sharing this sources.
9
zomigi.com » 70+ essential resources for creating liquid and elastic layouts wrote on January 25, 2010, at 4:06 pm:
[...] Inspiration for flexible web design [...]
10
Web Design Toronto wrote on May 18, 2010, at 4:30 am:
Great information & thanks for sharing it
11
web design wrote on June 15, 2010, at 9:13 am:
article very good
12
Fashion Girl wrote on July 10, 2010, at 1:47 am:
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.
=============
Mark01