Fluid and fantastic

The voices my head whisper "Go fixed, go fixed...", so to save me from the sanitorium, I'm turning to you to suggest fluid and fantastic examples.

I've been doing a lot of thinking about fluid layout design over recent weeks and have made it my goal to attempt fluid (or fluid/elastic hybrid) layouts with each new design. And you know what? It's a damn site harder than I thought it would be.

At each new problem, the voices in my head whisper "Go fixed, go fixed...". "No dammit!" I reply, "Away with you and your pixel width malarkey!"

So I turned to CSS Vault, Web Standards Awards and CSS Beauty for some help and inspiration, and while some fluid layouts grace those pages, most (like mine) are fixed and centered.

So I thought I'd ask you, dear readers, to help by suggesting sites that you think are fluid and fantastic. I'd love to see what you come up with. (PS: URLs are automatically converted into links in comments.)

Replies

1. #1 On July 28, 2004 11:35 AM Darice de Cuba said:

   Mezzoblue is all fluid but the right column. The website adjust nicely when you make the browser smaller or bigger. This one should be a nice inspiration to do a fluid design.

2. #2 On July 28, 2004 12:45 PM Matthias Viehweger said:

   hehe, the previous stopdesign...

   But honestly: fluid AND fantastic? This happens rarely as there are only few fluid out there. The percentage good/bad is equal to the fixed section...

   However, www.designdojo.ca is great.

3. #3 On July 28, 2004 12:58 PM Tommy Olsson said:

   Yes, fluid is hard. But fixed is also hard. You can stop IE/Win users from 'ruining' your layout (if you don't care about accessibility) by setting the font size in pixels, but a fixed-width layout is not a pretty sight after tapping Ctrl++ a few times in Mozilla.

   Things would be a lot easier if we could ignore IE. Good browsers support min-width and max-width, making fluid or fluid/elastic much easier. For IE, I think the only real-world options are elastic or HTC.

4. #4 On July 28, 2004 12:58 PM James said:

   Hi,

   (This is my first comment here, hello all)

   I don't know whether you'd count the design as "fantastic" but the main text area on my site is fluid.

   It seems to work well on all the screens I have access to (12", 15", 17"), but I've no idea how it would fair on bigger screens?

5. #5 On July 28, 2004 01:00 PM Tony Crockford said:

   Here's one I built earlier, gets a bit weird at very large or very small windows, but pretty fluid:

   https://www.torbytes.co.uk

   it's soon to be handed over for client maintenance, so may not work as intended in a few months ;o(

   currently working on a redesign of my own site - https://www.boldfish.co.uk

   it flows all the way from 640x480 and up and even manages to flow well with IE text sizes (as far as i've tested)

   fantastic? I doubt it though - that's a few iterations down the design path...

6. #6 On July 28, 2004 01:02 PM Tim Parkin said:

   It's not finished and it's very 'minimal' but it's pretty flexible and also works in netscape 4.7 (as if anyone cares anymore) https://www.pythonworld.com

7. #7 On July 28, 2004 01:26 PM Jason Santa Maria said:

   I am full of fluidy goodness :D

   https://www.jasonsantamaria.com

   as is:
   https://www.meyerweb.com/
   https://www.iconfactory.com/
   https://www.philadelphiaindependent.net/public/calendar.html

8. #8 On July 28, 2004 01:28 PM Ryan Brill said:

   Here's are a few pretty darned good fluid sites:

   https://www.jasonsantamaria.com/
   https://www.sidesh0w.com/
   https://www.mezzoblue.com/ (already been mentioned, but yeah)
   https://www.digital-web.com/

9. #9 On July 28, 2004 01:33 PM Malarkey said:

   Keep 'em comin', keep 'em comin'...

   (How come no one has noticed the Dave S gag yet?)

10. #10 On July 28, 2004 02:16 PM paul haine said:

    Mezzoblue appears to be more fluid in IE than other browsers...in both Opera and Firefox the main text content appears to have a fixed width, whilst it's container is still fluid. I assume that this is supposed to happen :)

11. #11 On July 28, 2004 03:35 PM Laura said:

    I don't think I'd call them fantastic, but I've got two fluid sites at https://imaginaryworld.net/ and https://creativelibrarian.com/ .

12. #12 On July 28, 2004 04:34 PM Jan Korbel said:

    Strange, you made me think about our designs, which one is fluid and I realized (to my suprise) that none. BUT as much as possible I try to use relative lengths so when you have larger screen you can sort of zoom the website with enlarging the font as on Bluecom.

13. #13 On July 28, 2004 04:35 PM Jan Korbel said:

    Sorry, URL got out somehow...
    https://www.bluecom.cz

14. #14 On July 28, 2004 04:40 PM Jon Hicks said:

    Its a shame it isn't live anymore, but a previous design of Playground Blues was a fantastic fluid design. So were Stopdesign and Dunstans site (he had some very clever float things going in the book section), but they've all gone the way of fixed.

    Basically Jasons is the one good one out there I think.

15. #15 On July 28, 2004 05:11 PM Ethan said:

    I think Richard Rutter's and Jeremy Keith's sites are some of the most readable flex-width designs out there:

    https://www.clagnut.com/
    https://adactio.com/journal/

    As for outright impressive design, there's always the ever-fluid https://www.cinnamon.nl/ and https://www.spazowham.com/

16. #16 On July 28, 2004 05:26 PM Richard Rutter said:

    Thank you Ethan. Concertina padding to the fore!

    (if that didn't make sense to you, see this: https://www.clagnut.com/blog/269/ )

17. #17 On July 28, 2004 05:57 PM Ethan said:

    Made perfect sense, Richard -- that post's a favorite of mine. :)

18. #18 On July 28, 2004 08:23 PM Carlos Porto said:

    Here's another fluid site:

    https://www.fatratpress.com/

    I think fluid is a do-able anywhere, but as always it depends on the client and If you can convince them with a great fluid (re)design.

19. #19 On July 29, 2004 01:11 AM Jeremy Keith said:

    Thanks for the props, Ethan.

    Most of the themes I have for my site are fluid, but some work better than others for legibility at high resolutions:

    https://adactio.com/journal/?skin=default
    https://adactio.com/journal/?skin=seaside
    https://adactio.com/journal/?skin=adactizilla
    https://adactio.com/journal/?skin=sci-fi
    https://adactio.com/journal/?skin=renaissance

    and the brand new:

    https://adactio.com/journal/?skin=hirnlego

    Here are some other sites I've designed that use fluid layouts:

    https://www.inpartnership.net/
    https://www.g2blue.co.uk/
    https://www.brightonbloggers.com/
    https://www.thesession.org/

    I'm not sure whether any of them would necessarily qualify as fantastic though.

20. #20 On July 29, 2004 01:41 AM Malarkey said:

    Wow! What a day... thanks (so far) guys...

    @ Jeremy Keith: Thanks for opening your portfolio ;) I can't believe the number of Brighton Bloggers! I must remember to bookmark 'The World is full of Pisswits' (https://hotspits.blogspot.com/ )

    I think that in Wales there is only me, Phil Baines (Hi Phil) and a sheep from Anglesey called Colin.

    @ Ethan: Hi
    @ Jon Hicks: Good holiday mate?
    @ Mr. Rutter: When are we gonna have that natter?
    @ Jason: How is your *&%$^()* project going? ;)

    There are loads of good links there and some that I hadn't seen before. I want to do some complicated 'multi-column in a column' experiments, anyone know of any commercial sites doing that?

21. #21 On July 29, 2004 07:10 AM Tom said:

    Paul, Mezzoblue appears fixed in the real browsers because it has a max-width.

    Dave decided not to use that IE max-width fix at svenote.com (I don't remember the exact url)

22. #22 On July 29, 2004 10:26 AM Phunky said:

    Well im gonna keep an eye on your findings, as i too are now moving for the Pixel Pixies to the Em Emprores!

    Not finding it a hard move at the moment, but im sure that will soon change!!

    /me thinks im gonna have to redo my blog asap!

23. #23 On July 29, 2004 11:33 AM Jason Santa Maria said:

    Malarkey: soon soon :D

24. #24 On July 29, 2004 01:00 PM Ethan said:

    @Malarkey: Hi --- pleasure to meet you. :)

25. #25 On July 29, 2004 08:20 PM Steve said:

    This is a question regarding fluid layouts. I tried to deveop a site using absolute positioning and a fluid layout. It was okay in Firefox, buy awful in IE6. Big John, at PositionisEverything, mentions that specifying a width solved lots of problems. I haven't read anything about this problem before. Is there a fix for it?

26. #26 On July 29, 2004 09:28 PM Clint said:

    I just re-launched my site as a 4 column, fluid width design. It works well in 800 X 600 and up in all browsers except for IE 6 for PC where it is broken but readable.

    While it might look crappy in the smallest and largest sized 10% of viewers, I'm happy knowing that it will lokk good in the other 80%. You can't make everyone happy.

27. #27 On July 29, 2004 10:10 PM Malarkey said:

    @ Clint: That is a great looking site and a great example of the sort of thing I was looking for. Shame about the IE issues. What problems did you run into and why is IE spoiling the party? I'm gonna delve a little deeper... ;)

    @ Steve: Sorry mate, Big John is a god so carry on reading his stuff and perhaps posting a question to CSS Discuss (www.css-discuss.net ) might get you the answers you're looking for.

28. #28 On July 29, 2004 10:44 PM Clint said:

    @ Malarkey : The three "copy" divs won't line up across the page.
    Each block of copy is wrapped in it's own div with a width of 33% and then all three are wrapped in another div with a margin-left of 200px to make room for the picture and header. Space between columns is established through margins of 6% on p, h2, and ul tags so no box-model hack should be needed.
    But IE botches the widths, making each column too wide and pushing the last column below the other two. If you come up with any ideas, that'd be great because I'm fed up.

29. #29 On July 30, 2004 11:47 AM Mike Pepper said:

    er-hum.

30. #30 On July 30, 2004 02:24 PM Cody Lindley said:

    I think the some of the best examples have been changed. Sites like Simple bits and Stopdesign all moved to static.

    I based my personal site off the former fluid layout of Stopdesign.

    www.codylindley.com

31. #31 On August 2, 2004 11:42 AM Jake Liddell said:

    One of the problems of fluid sites with only a little text is that the text gets all mushed up when the page gets too narrow.

    My fix for this was to use min-width for nice behaving browsers, and some javascript that some clever person designed, to implement the same in IE. Stick the javascript in an IE only css file, and your pages will even still 'validate' and will stay readable unless javascript is switched off.

    Another problem with fluid is that pages get very long and thin on really big screens.

    Again, I have used min-height on nicely behaving browsers, and height on ie. Height seems to behave on IE just like min-height does on other modern browsers (not being less than a value, but expanding if the content requires it). But you have to put the height declaration into the IE-specific css file, because if the content is more than the height, others will either hide the overflow, or let it overrun out of the box.

    Using this, I can make fluid sites that don't look too weird when the user either makes the page very thin or very wide.

    Cheers,
    Jake.

32. #32 On August 5, 2004 12:26 PM David said:

    This is not fantastic, but it’s fluid
    https://inelmec.unileon.es

33. #33 On August 10, 2004 11:15 PM Ritz said:

    https://creativecommons.org/

    That's a pretty fantastic fluid site!

34. #34 On August 12, 2004 03:30 PM Jim said:

    One thing I think looks good on fluid layouts, but which hasn't really been talked about is floated elements in fluid text. You have to be careful they don't 'stack up' or otherwise mess up the page, but I like the effect when the page is resized.

    I'm just starting off with web design, but see this page I did for a small buisines:

    https://www.masmodels.com/about_me.en.html
    (btw, it looks a bit different in IE, where [if IE] hides some of the formatting it couldn't handle)

    I'm almost always in favour of flud designs, I run a 1600-wide monitor, and typically browse either one page on the whole screen, or konqueror split into two panes. Displaying pages at 800 and 1600 puts me near both extremes, and I really apreciate sites that look good no matter how I'm browsing. Seeing "best at 1024*768" bugs me almost as much as "best in Internet explorer"

35. #35 On August 13, 2004 01:33 AM Marti said:

    @ Clint (comment 28):

    I've found that complicated floated layouts are a problem for IE when divs that wrap an array of floated divs have any margin value declared whatsoever (apart from margin: 0 [ zero]). Thus, if you can possibly avoid the margin-left: 200px on the div you're using to wrap the three floated divs, it might help (yeah I know, tentative-sounding advice, not providing an all-round solution, but having similarly wrestled lately with a site that's not yet live, I can at least attest to the weirdness of IE and floats...).

    
    P.S.
    @ Tom (comment 21):

    I'm using Svend Tofte's max-width hack for IE (as seen at www.svendtofte.com ) and so far, in conjunction with a straightforward max-width declaration for compliant browsers, it's workin' a treat...