The liquid web site motherload

Check out Nomensa’s portfolio for great examples of liquid site designs.

I feel like a kid in a candy store. A nerdy kid. Because I’ve hit the liquid web site motherload: Nomensa’s portfolio.

Nomensa is a web agency specializing in accessibility and usability. Their own site is a nice example of a liquid design, and I’ve had it bookmarked for a while, but I finally got a chance to check out the sites in their portfolio. There are dozens and dozens of them, and almost all of them are liquid. (They also have a few elastic ones, and a few fixed-width.) Unfortunately, Nomensa doesn’t provide links to all of their work, but only a select few as case studies. But, you can google the names of the non-case-study clients, and you’ll find that most of these sites are liquid as well.

Now, I grant you, many of the sites are not terribly stylish. But they still are really useful to look at to get ideas for how to handle content and layout in liquid layouts. You could easily use the same techniques they’re using with a bit more spit and polish added.

Here are a few of the most well done liquid sites from Nomensa’s portfolio:

Barcham Online
The header using seven images of tree foliage that expand and contract to fill the available space is very clever and attractive. Also check out the feature boxes on the home page and the thumbnail gallery under Our Trees. It’s notable that this is an e-commerce site, which you don’t often see liquid.
Broads Authority
I’m not in love with the overall look and feel of this site, but I appreciate the unique layout of the home page. The main image on the home page that has a text box below, which moves down as the text in the adjacent columns grows, revealing more of the image above, is very well done.
Preston City Council
Another unique home page layout and neat use of “variable cropping” on the main photo. Be sure to check out the Gallery under Get Involved, as well as all the little feature boxes and things on the inner pages.
Macmillan Cancer Support
This site is notable for the large amount of information that it organizes into liquid rounded corner boxes throughout the site, without everything becoming chaotic and unbalanced at different viewport widths.
Business Startup Community
Again, not a very attractive site, but I’m bookmarking it simply for the treatment of the three tabs on the inner sections of the site.

I’ll be sure to stop by Nomensa’s portfolio periodically to see what new work they 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 designers who themselves have liquid or elastic sites. Nomensa is now on this list for me.

Did you like this?

4 Responses to “The liquid web site motherload”

  1. Alastair Campbell

    Thanks for links Zoe πŸ™‚

    We always do liquid designs, but we aren’t always responsible for the front-end code. We offer a variety of services, and not all the projects involve us doing the front-end.

    Thankfully, the ones you picked out above use our code, although the last two are looked after by other people. (I think we did the homepage for Macmillan, not the rest of the site.)

    It’s just a shame some of the more complex ones aren’t available anymore, but by all means keep an eye on our portfolio, we’ve a few new sites coming out soon. πŸ™‚

    • Zoe Gillenwater

      I definitely will keep an eye on your portfolio. (I would love it, though, if there were live links to all the stuff where you did the design or code. Save me time googling.) Thanks for doing such good work. πŸ™‚


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>