There are two questions that web designers argue about a lot and even though most of the time they decide for themselves which way to go, they still have doubts about which option is the right one.

  1. What minimal screen resolution we should keep in mind when designing a website?
  2. Should we go with a Liquid (or fluid) design or a Fixed-width one?

As I said, every designer has his own opinion on these topics. I usually design with 800×600 resolution in mind, thus trying to get my main website content to be below 760px. I think that even though 1024×768 is becoming a more common screen resolution for most web users, many people still prefer to set their monitors to 800×600, or they like having several different application windows open at the same time, thus minimizing their browser window as much as possible. I often have multiple windows tiled up on my screen.

On the other hand, I do admit that it’s a bit trickier to work with liquid designs, especially because Internet Explorer doesn’t support min-width property in CSS, however I do think that many users would appreciate the flexibility of a fluid design. You should definitely read “Fixed vs Liquid vs Elastic” article written by Autistic Cuckoo. It explains both Pros and Cons for each format, but of course, in the end it’s up to you to decide which one works best for your project and your site’s target audience.

One of the common complaints I’ve heard from designers is that fluid designs don’t look as nice as the fixed-width designs. Well, take a look at these 16 websites (mainly blogs) with the liquid design, and decide for yourself.

  1. Very beautiful weblog by designer Lisa Sabin-Wilson, who’s in the process of writing a book – WordPress for Dummies. You can shrink down her website window to about 500px and it still looks and works well.
    lisa
  2. Try resizing Bartelme Design‘s website, and you’ll see that it is possible to have a nice fluid design even with 4 columns (in this case the first column stays fixed).
    bartelme
  3. When you resize a three-column website like How Deep is the Ocean the last two columns will drop down, keeping the main content area prominent.
    howdeepistheocean
  4. Mondern Life website has a very simple liquid design, but it has a classic feel to it.
    modernlife
  5. Dizzain.com has been featured in many CSS galleries, and for a reason – very sleek and stylish example of a fluid site.
    dizzain
  6. Even part of a header is fluid on Simon Wiffen’s weblog. One of the rare sites that I was able to shrink down to almost 300px and it was still nicely viewable.
    simon
  7. Webrush73 has more of a hybrid design, where only the right column of the site is totally fluid. But it does make the entire site to be liquid, doesn’t it?
    webrush
  8. ILoveJackDaniels.com has an unusual liquid style – the main centred content area can be resized down to a specific minimum and it goes up only to a certain maximum, the rest is a blank space.
    jackdaniels
  9. Fortress Studio site spreads on the entire browser window with a liquid main content area and a fixed right column.
    fortress
  10. GNV&Partners is an Italian web design studio that created many pretty popular websites on the internet (check out their portfolio). Very classy look.
    gnv
  11. Chris Williams Design features a three-column layout where each of the columns is fluid.
    chriswilliams
  12. The Watchmaker Project is designed with a fixed image on the left, fluid middle content area and the fixed right column, plus a flexible top navigation.
    thewatchmakerproject
  13. The Man in Blue is characterized with a nice centred layout where the width can be limitlessly expanded, while constrained to a certain minimum.
    maininblue
  14. Jason Santa Maria‘s website is aligned to the left but the liquid main content area fills up almost an entire browser, leaving a little bit of blank space next to the right column.
    jasonsantamaria
  15. Box of Chocolates website presents a liquid two-column layout, where both columns proportionally expand and shrink when resizing the browser window.
    chocolates
  16. When I first looked at uwMike website, I thought that it has a fixed layout, but then I noticed its fluid design that is so delicately invisible.
    uwMike

If you like to see more websites with a fluid design, check out the CSS Liquid Design gallery. Although I did notice that some of their featured sites are not fluid at all.

I tried to choose websites that present different layout possibilities for designing a liquid site, so hopefully they’ve inspired you to consider implementing fluid design in your own projects.

Recent Bits
Related Bits
Best Inspiration Bits in 2007
CSS Galleries With a Focused Inspiration
8 WorthWhile Weekly Bits: 4-10 March, 2007
8 Bits From The Past
Group Project: Source Of Inspiration
Graphic Designer’s Snapshots of Inspiration
Web Design Dissected Into 8 Bits
Musings on Blogging
Comment Bits

24 Insightful Bits in response to “Spark Your Imagination with 16 Stunning Bits of Liquid Design”

  1. Hi – thought I’d stop by and say thanks for the mention! I’m not sure I ever tried viewing my site at 500px – but its good to know that it works :)

    Nice article!

  2. Good article! Excellent designs as well, but I’m not sure they looked as good when the pixels go down. I much rather would have the main content of the site to align to the left so it visible in entirety at 500px or more rather than having everything squashed in so little space. If the visitor want to see the secondary content, sidebars etc they can simply scroll across.

    Also there is a hack for minimum width in IE 6, search “Jello CSS Designs”.

  3. ibit

    Thanks for stopping by, Lisa. Good luck with your book.

    Thanks for the advice on IE min width hack, Stavanger. Re: content alignment. I guess it depends on what the site’s designer think is important. If I want to prominently display by navigation or news, etc, then I might place it in a fixed column on the left, leaving the fluid main content next to it. But from users point of view, I agree with you.

  4. Some of the websites in that gallery are not fluid because they are elastic… the gallery is called “Liquid Designs & Elastic” after all.

  5. ibit

    My apologies, Montoya. Since I was concentrating on Liquid sites only, I missed your point that some of them are elastic.

  6. Nice examples!

  7. my personal favorites:
    1.colors of bartelme
    2.royalness and simplicity of modern-life-is-rubbish

  8. ibit

    Thanks, Law Vibe.

  9. ibit

    Thanks Umair. You know what? For some reason, Akismet identified your comment as a spam. It’s good I noticed your post among the spam and recovered it.

  10. Thanks for the compliment! The aim, with my design, was to set limits on size to help line lengths stay within reasonable limits, to keep the site nice and readable. I hope it’s worked! :)

  11. ibit

    It did work very nicely, Dave. I also like the colour scheme of your site very much.

  12. Thanks for including my site among such excellent company. The motivation for the fluidity really started in the “Photographs” section. I wanted to have the pictures expand or contract based on the screen size. That decision informed the rest of the design.

  13. ibit

    You’re very welcome, Eric. Thanks for shedding light on your motivation for designing your site as fluid.

  14. I love that bartelme site. It looks awesome!

  15. Jess

    Nice article and examples! Some of those sites are really organized and neat.

  16. Nice collection! Very useful to see what other web designers do to solve some problems connected with liquid / fluid design. Thanks.

  17. vivien

    Welcome to my blog, tobto. Glad you liked the post.

  18. Thanks for flagging the post up, Vivien.

    Has the Bartelme site updated though? I think it has.

    Regardless, I’m a fan of Lisa (your first mention) and the Italian GNV too.

  19. Vivien

    yes, David, looks like Bartelme’s site has been changed, it’s not liquid anymore.

Pingbacks and Trackbacks

  1. Liquid Designs » Liquid Inspiration Roundup

    [...] Bit has a great round-up of examples from various websites in this gallery: Spark Your Imagination with 16 Stunning Bits of Liquid Design. It would be cool to see more articles down the road where people share their favorite examples and [...]

  2. CSS Galleries With a Focused Inspiration » Inspiration Bit

    [...] Bit Knowledge comes from an inspiration – one bit at a time « Spark Your Imagination with 16 Stunning Bits of Liquid Design 8 WorthWhile Weekly Bits: 11-18 March, 2007 [...]

  3. · Hey-Girl.Org ·

    [...] into it. It takes a fair bit of CSS but the concept is simple and works deliciously. Find some inspiration, and then get onto the [...]

  4. teztech.com » Web Page Layouts: Flow (fluid/liquid) vs. Fixed

    [...] These things make sense to me on a technical basis and I like the aesthetics and usability of these kinds of sites. However, they don’t always lead to the most pleasing look for some [...]

  5. Best Inspiration Bits in 2007 » Inspiration Bit

    [...] Spark Your Imagination with 16 Stunning Bits of Liquid Design [...]

Selected Bits

PopularBits

RecommendedBits

FavouriteBits

PersonalBits

Hi, I'm Vivien. Thanks for visiting my Inspiration Bit. I often find myself scouring the internet looking for either answers to many questions I have or websites that inspire me, sites that I can learn from. On what topics you might ask — any topics that interest me, anything from web design to typography and art, from blogging to entrepreneurship, from programming to open source.
read more…
When I'm not blogging, I design web sites, teach, play with my daughter and try to balance family, work, friends and a somewhat active social life on