Blogging and All that Malarkey Stuff & Nonsense

Malarkey is Andy Clarke, a creative designer with a passion for accessibility and web standards. This is his personal website.

Fixed or fluid, you decide

I struggle with letting go of fixed-width layouts. But recent discussions and a re-read of WAI guidelines has made me realise that no matter what Bobby says, I am not doing enough to make my designs accessible by sticking to fixed widths.

In a recent conversation with Swedish web accessibility advocate Tommy Olsson, Tommy impressed on me again the importance of fluid, rather than the more commonly used fixed-width design techniques that I and so many others designers favour. In a discussion over at Accessify Forum, I made the statement,

I think the issue should be more about accommodating browser resolutions than fluidity. In the real world, we have to design for style and this sometimes (not always) requires a fixed width.

Tommy (no doubt grinding his teeth ;)) replied that,

You're consciously sacrificing accessibility for aesthetics. For some devices it's a major hindrance. Unless you satisfy all Priority 2 checkpoints, you can't claim more than A.

Bobby's false assurances

The guidelines are very clear on the subject;

3.4 Use relative rather than absolute units in markup language attribute values and style sheet property values. For example, in CSS, use 'em' or percentage lengths rather than 'pt' or 'cm', which are absolute units.

Running pages like this this through the Bobby validator therefore gives us the false impression that the site achieves a AAA rating, because the fixed widths are stipulated in an external CSS file, which Bobby does not interrogate.

Struggling to let go

I struggle very hard with letting go of fixed-widths and I am also sometimes guilty of convincing myself that a fixed-width is 'OK' because it 'suits the content of the site' better than fluid. Tommy would no doubt argue with me that the content should be considered in the context of the 'viewer's' environment, and that imposing a width in a design will always disadvantage somebody.

I want to agree with this, but old habits die really hard. So I thought I'd look at two current design projects, experiment with fixed vs fluid and see what happened. I am quite honestly surprised at what I discovered.

Redweb Sentry

The first design is a simple 'teaser' page, a temporary stage while we develop a complete web site. The layout is simple and the content fairly minimal, not enough to give too much away, but (hopefully) enough to get Mr. Google interested.

Redweb Sentry at different resolutions (gif 75Kb)

My original design was set to 600px wide. I was surprised that even with minimal content, the layout suited a fluid layout rather well and would require only a little CSS and image trickery to work. Even at 1152px, with plenty of white space, text lines are not overly long.

Empire Hotel

The other design that I am working on is for a luxury hotel. This design is more complex in it's structure and I began by thinking that a fluid layout would never work as I wanted to keep a tight control over the positioning of page elements.

Empire Hotel at different resolutions (gif 110Kb)

Again my original design was fixed, this time to 770px. Again the design adapts rather well to fluid layout, although gaps between images do increase rather more than I would like and I would probably stick with a fixed-width side bar. (Is this still in contradiction of the guidelines?).

What should I do?

Overall I am surprised that the voices in my head shouting "fixed, fixed, fixed" are probably wrong in these two cases.

What do you think? Should I stick with fixed or stay up all night converting them to fluid layouts?

Replies

  1. #1 On July 16, 2004 02:01 AM Jason Santa Maria said:

    Fluid! Let the user make it smaller if they want. The point is, your sites adapt well. Give them the flexibility and the option to choose. Millions of people buy stuff from Amazon everyday, which isn't to say its a design marvel, but fluid doesn't scare people away. Have faith in your users.

  2. #2 On July 16, 2004 03:21 AM Joe Clark said:

    Wait till Tommy learns that px is a relative unit.

  3. #3 On July 16, 2004 04:00 AM Dave S. said:

    "You're consciously sacrificing accessibility for aesthetics."

    Is Tommy paying for the site? I dare say he might find his priorities disharmonious with your client's.

    "Unless you satisfy all Priority 2 checkpoints, you can't claim more than A."

    There's nothing wrong with A.

  4. #4 On July 16, 2004 04:21 AM Fernando Dunn II said:

    I'm pretty new to css design, but two things come to mind when mentioning "other devices." One is the estimation of the actual devices viewing the site. The other is the thought of using alternate style sheets.

    Even with that said, I see no problem with using fluidity for the two designs you've mentioned. For your Empire Hotel design (which I think is looking awesome), the background adds to the luxurious feel of the site, so it'd be nice to have a good portion of it showing. For the first design it looks just as effective both ways.

    So I say go for it.

  5. #5 On July 16, 2004 05:19 AM Simon Jessey said:

    On the whole, I prefer to see designers take a little bit of time to make a fluid layout work. Fixed-width designs are probably easier for the graphically-minded folk, but fluid designs empower the user.

    Incidentally, both the Redweb Sentry and Empire Hotel designs are gorgeous, fixed or fluid. The quality of all your work is impressive.

  6. #6 On July 16, 2004 07:09 AM Andrew Green said:

    Unfortunately, I fear a fixed width sidebar would be just as much a problem as having the whole thing fixed-width. The guidelines suggest (to me) that no absolute units should be used whatsoever -- except, probably, in terms of defining the width and height of images.

  7. #7 On July 16, 2004 07:14 AM Jan Korbel said:

    It is possibble to take good from both with littli javascript and changing stylesheets.

    On our website www.hotpotato.cz we created small "customize menu" on the right side from the main menu.

    This lets the user to zoom the pages or just to make bigger fonts. All just with using different stylesheet.

    This is achieved with strong using of relative widht values so for the zoom effect you only need to raise the body font-size value.

    Fixed or fluid? Both!

  8. #8 On July 16, 2004 07:36 AM Justin French said:

    I have no problem with fluid at all (long text line lengths are easily overcome), but I genuinely detest the look of non-fluid images in a fluid layout.

    It's not n issue in RedWeb above (due to the non-square images in the columns), but it *is* a problem in Empire (where square shaped images only fill part of the column width).

    I know there are ways around fixed width images (scaling them to fit, cropping them to fit, etc), but I just don't like the trade-offs they represent (extra mark-up, loss of image quality, larger files than needed in most cases, etc).

  9. #9 On July 16, 2004 10:05 AM Tommy Olsson said:

    Joe, you might be surprised to learn that I am aware that px is relative (to the viewing distance). For the purposes of accessibilty, though, it is fixed, because browsers usually don't contain a menu option for changing the pixel size. Interpreting px to be a relative unit in order to pass checkpoint 3.4 defeats the purpose of that checkpoint, wouldn't you say?

    Dave, no I'm not paying for the site. Andy asked for an accessibility review and I offered my opinions. I didn't say that Andy did something wrong by using a fixed-width layout, I just pointed out that he couldn't claim AAA compliancy, which he did. A is fine. AA is even better. AAA is a utopia.

    A fixed-width in pixels is more of a usability issue. Liquid designs have their own usability problems due to the lack of good CSS support in some very common browsers. These are easier to remedy (make the browser window narrower) then those of a fixed-width layout (buy a larger monitor), though.

    I haven't found a perfect, cross-browser compliant layout model, and I don't think I will in the foreseeable future. I think a liquid/elastic hybrid is the most accessible alternative, but it's not perfect either.

    Some beautiful, but complicated, designs are probably not possible to create with anything but fixed width. That's fine by me.

  10. #10 On July 16, 2004 11:43 AM Jeremy Keith said:

    Andy, it's very brave of you to come right out and admit the reasons why you'd prefer to use fixed-width designs. It's all about control and how much control you're willing to hand over to the user. Too often, I've heard designers reject liquid designs for spurious reasons when in fact, I believe, the real issue is nearly always one of control.

    So bravo.

    Dave Shea responds to Tommy Olsson's point ("You're consciously sacrificing accessibility for aesthetics.") with:
    "Is Tommy paying for the site? I dare say he might find his priorities disharmonious with your client's."

    This highlight's a fundamental disconnect with how we view the job of building web sites. While it's true that you are building the web site for the client (in the sense that you are exchanging a service for money), the site is going to be *used* by someone completely different. Unless you're building for a one-person intranet, the client is not the user. Web sites aren't like paintings that we create for someone to put up on their own wall to be looked at: they are created for the world to use.

    Tommy Olsson was taking the standpoint of the end user of the site. That's the correct standpoint to take. The question of who's paying for the site is *not* the last word. If we only ever strive to answer the question "what does the client want?" instead of "what does the user want?" then all we're interested in is the money and we're just prostituting ourselves.

    Of course, it's entirely possible to do both. That's what we should be attempting to achieve with every site we make.

    On the specific subject of fluid layouts, Jason Santa Maria speaks words of wisdom: "Have faith in your users".

    In my experience, the more you try to contstrain the way that someone can view your site, the more likely it becomes that you're going to piss people off. They may not be the majority but they still deserve respect.

    Jan Korbel's point about offering a JavaScript widget to switch between fluid and fixed is good one. I came up with something like this just the other day: a simple DOM event to update the "width" style on the body tag:

    function setBodyWidth(body_width) {

    document.getElementsByTagName('body')[0].style.width = body_width;

    }

    As long as your starting point is a liquid layout, it's really, really easy to snap it into a fixed width. If you combine the width-resizing with setting a cookie then every user gets the site as they want it, fixed or fluid.

    Here's some handy tips on liquid layout from fellow Brit Packer Richard Rutter:
    https://webstandardsgroup.org/features/richard-rutter.cfm#liquid

  11. #11 On July 16, 2004 01:21 PM Tony said:

    Fluid. Go with the fluid. It's tough for the layouts, but as you've already proven in your screenshots, it's do-able.

    Giving more power and control to the end user is, in the end, a good thing. Sure it's a challenge to give up some of that control, but challenges are good, eh?

  12. #12 On July 16, 2004 03:16 PM Robert Wellock said:

    I can assure you Tommy knows that the pixel is a relative unit but pixels are relative to the viewing device thus not quite in the same class as the 'em' unit that is equal to the computed value of the 'font-size' property of the element on which it is used but you'd know that already as Tommy added.

    Obviously the following is an improvement - Candidate Recommendation only - on the errors in the CSS-2 regarding lengths: https://www.w3.org/TR/2004/CR-CSS21-20040225/syndata.html#length-units

    Also if anybody had cared to properly cite and appropriately reference the quotations then you'd realise Tommy's comments have been partly taken out of context...

    I assume: https://www.accessifyforum.com/viewtopic.php?t=1482 entitled (Empire Hotel (And All That Malarkey) is the closet topic or am I mistaken.

    Since one could do with some enlighten on that one since I cannot find either of those two quotes in full. If you use a "blockquote" element it would help if you used the "cite" attribute, or if you quote parts then use the correct convention of the dots to show it's a fragment and not a full paragraph, or sentence or "block quote".

    Those are just sensible suggestions otherwise you wouldn't have had such ill-bred comments from Joe or Dave.

  13. #13 On July 16, 2004 04:47 PM Guy said:

    I've always thought Tantek knows a thing or two about this sort of stuff. His site is fluid: https://tantek.com/log and (currently) has no graphics at all. There would be little point in making his site fixed-width because it doesn't really have a design. I bet it looks great in most text devices.

    Stop Design used to be liquid and then it went fixed: https://www.stopdesign.com/log/2003/12/15/fixedorliquid.html, Simplebits used to be liquid and then went fixed. Both these people are clearly graphic designers who need control over their site's look and feel. Both of these sites also looked just as good with a liquid layout (and perhaps better). I think fixed width means that you don't have to worry too much about the layout breaking in the various browsers. The trade off is that you assume that most of the people viewing your site will have at least 800px res or something. I think a lot of designers like to look at their own work and have it appeal to them. I like the idea of offering two style sheets - 1 liquid and one fixed. But the default should perhaps be liquid? Sorry for meandering all over the place!

  14. #14 On July 16, 2004 09:34 PM Malarkey said:

    Hi guys, interesting reaction and very helpful comments indeed.

    @ Robert Wellock: I'm sure that Tommy knows me well enough by now to realise that his opinions on accessibility command my utmost respect. Among the regulars at Accessify, few give their time and knowledge as freely at Tommy and for that we should all be grateful. His comments (and mine) were not taken out of context and as I said at the start, the important thing is that they (and Tommy) made me rethink my whole approach for design. Once again I can only be immensley grateful to him.

    Throughout today I have continued to ponder this subject (more to follow). Dave Shea made two points that I feel need to be elaborated on.

    In asking who was paying the bill, Dave opened the issue that at the end-of-the-day, it is our clients (not their users) who pay our bills. Sometimes (but not in this case) the job can involve a fine balancing act. While I agree (almost) totally with Jeremy Keith when he said, "Unless you're building for a one-person intranet, the client is not the user", sometimes you 'gotta do what you gotta do'. Sometimes my job involves balancing what I know to be right (for users) and what is in the client brief.

    Dave's second point, "There's nothing wrong with A" is also important. Recent discussions have made me realise that striving for the best accessibility I can is about practical, pragmatic decisions, not about measuring my 'man-hood' against a Bobby rating.

  15. #15 On July 16, 2004 09:51 PM Scrivs said:

    I have always been of the opinion that the content should dictate whether or not you go liquid or fixed. Looking at the comps of the sites you are working on, it seems they would work well in either layout.

    I only have a problem with liquid sites when there is very little content to fill the page so what I get is just a couple lines of words with nothing else but 95% of whitespace to fill the screen.

    In regards to who is paying the bills, yes the client is paying the bills, but they are trusting your expertise in making the right decision.

  16. #16 On July 18, 2004 10:14 PM Paul Nattress said:

    You may be interested in a similar discussion on this subject over at Webmasterworld - https://www.webmasterworld.com/forum83/4029.htm (posts by "Natto" are mine by the way).

  17. #17 On July 19, 2004 10:25 AM Andrew said:

    Designing fluid is a good challenge that all web designers should relish if they want a real challenge!

    Personally I do very simple designs anyway, and that's a philosophy that fits very well with nice fluid sites. But I've seen fluid done in a very design intensive way.

    I always thought it was a shame SImplebits went fixed :(

  18. #18 On July 19, 2004 01:30 PM dik said:

    I find it interseting that discussions of accesability rarley cover the fundementals of typography.

    400+ years of the written word has evolved certain specific guidelines to aid legability - one such rule being line lengths of type.

    Yes, liquid layouts may help in the viewing of pages on smaller platforms - but in reality are users likley to undertake the task of reading content in such a bastardized state?

    Like any design, if it enhances and supports the ideas then yes, by all means use a liquid layout - using as yet another badge to show your techincal merit is self centric to say the least.

  19. #19 On July 19, 2004 03:42 PM Andy Budd said:

    The old "Fixed vs Fluid" chestnut again huh. Here is the problem as I see it.

    1. Long lines of text can be difficult to read.

    2. On large monitors, if a fluid page has little content, it can look very bitty. Users can resize the window although it's more common for windows users to always have their browser screens maximised.

    3. On smaller displays (640x480 and lower) many fixed width design require horizontal scrolling which can be a real usability/accessibility issue.

    4. On smaller displays even fluid layouts can be problematic. For instance a 3 col layout displayed on a mobile phone would be almost impossible to read.

    So what's the solution. Well for me the ideal solution is two-fold and dependent (to an extent) on browser manufacturers.

    Firstly if max width was better supported then we could have a fluid design for medium sized screens that scales up to a fixed width design to larger windows.

    Secondly the browsers on mobile devices need to start supporting the handheld media type. Then we can build stylesheets specifically for very small displays.

  20. #20 On July 20, 2004 11:56 AM Paul Nattress said:

    Andy has hit the nail on the head there. Support for max width and the handheld media type would allow for a good solution to this problem.

  21. #21 On July 20, 2004 12:31 PM Fishmonster said:

    "I am Spartacus" ...I have to stand up with Malarkey and at least admit that I hate the idea of relinquishing the fixed width. I started my design career back in 1984 and definitely pre-web, everything was print based and everything had a fixed width. I guess have just kept a tight and freakish control on this format ever since...BUT....I know I have to change...dammit!

  22. #22 On July 20, 2004 04:15 PM Colly said:

    How influential has the blog format been here? When I began building sites I only knew how to make them fluid (with tables - blimey, them were't days). Learning CSS, I kept things fluid still. Now, with almost everyone having a fixed-width blog, this format seems to be most prevolent.

    We make many sites for the community and voluntary sector, and clients insist we go fixed-width (we don't always listen to them though) as this view is often backed up in user-testing by us and them. Users often echo some of the points Andy Budd raises a few comments above - consistently citing long sentences on fluid layouts as unreadable. If a client sees one of our fixed-width sites, they wail "Oooh, want one of those please."

    I agree again with Mr. Budd that with better support for max-width, we could hit some middle-ground. Imagine designing an 800px width that expanded to a max of 1200px (just because you could).

    In the meantime, at least we have the choice of fluid or fixed. My cup is obviously half-full today...

  23. #23 On July 20, 2004 11:49 PM Malarkey said:


    Hi guys,

    I've reached a decision... fluid for Redweb, fixed for Empire Hotel. It's been a real help to get advice from you guys (and "hello" to Dave S, (first-time caller, ladies and gentlemen ;) ))

    I'm gonna post the results of some fluid/elastic hybrid experiments in a day or two.

    Thanks again.

  24. #24 On July 21, 2004 09:54 AM James said:

    IMHO paragraphs of text that get longer based on screen width just get too difficult to read. I don't think that fluid layouts "empower" the user - in my experience a lot of people who have large monitors don't even realise that the resolution can be changed, or even that the browser window can be resized!

    I do think it has a lot to do with the amount of content that a site has to offer - I agree with Scrivs on this one! My personal view is that columns should be sized using ems, as the width of the column should be directly related to the text it contains. Scaling up the text avoids line length changing, retaining readability.

    I have to change the browser size on countless sites that I visit as the line length is too long on my 18" TFT monitor and consequently the message of the site gets too hard to read. This is frustrating.

    And finaly on another note - "we design for the client not the end user" - yes we do, but the client should know what the end user wants. However, back in the real world....................

  25. #25 On July 21, 2004 01:27 PM Phunky said:

    a great little read this, i my self would love all my design to be fluid, but you just cant get away with it.

    I would like to know the reason why its important to have a fluid site? i mean wouldnt it be more important that the site just expands well with the increase of text size?

    i really dont see how having a fluid site is more accessible to a fixed site on say a small palm piolet, the fluid one wud be squashed and the content all over the place. Yet the fix would require some side and horz scrolling.

    What about using min-width on a fluid design? so you could set the min-width it folds down too but yet still expands? would that mean it could not be AAA ?

    Even tho IE dont support Min-width it something ive started to looking too...

  26. #26 On July 22, 2004 05:10 PM Paul Nattress said:

    Just thought I'd throw this in...

    If you use CSS for layout and specify your column widths using ems then they will resize along with the text when the user changes the font size.

    The technique I'm using at the moment involves specifying the text size in the body element to be 65% - this brings the default text size down to 10px. So, 220px is now 22em - making the transition from a Photoshop visual to HTML a bit easier.

  27. #27 On July 22, 2004 09:43 PM Jim Amos said:

    Fluid layouts generally scare the hell out of me. On many occasions I have woken up in the middle of the night shivering from night terrors due to these flexible behemoths.

    The main issues for me are the funky line-widths and the lack of control over floated elements. I am very graphically minded so I feel like I need ultimate control over the aesthetics. Millions of users all around the world probably hate me. But until we have some of the solutions mentioned already I don't feel like I have much of a choise.

    As for site owners, yes, they predominantly say 'make it fixed!'

    I realize this comment is extrememly late, I just got back from my week-long retreat at the 'Fear of Fluid layouts' institute of America. I'm still recovering from the electroconvulsive therapy.

  28. #28 On July 22, 2004 11:07 PM Malarkey said:

    @ Jim: It's a journey Jim... like the one from Swindon to some place named after an 70's Triumph motor car (I had one, it was green).

  29. #29 On July 23, 2004 12:06 AM Jim Amos said:

    lol, for a while there I had no idea what you were going on about. I think you should buy yourself a new one:

    https://www.desperateseller.co.uk/make/Triumph/toledo/toledo.html

    btw how much does it cost to be in the Brit pack? Is Damon Albarn still your leader?

  30. #30 On July 25, 2004 09:53 PM superblaster said:

    Christ - the Triumph Toledo! I'd forgotten all about those..............

  31. #31 On July 29, 2004 06:32 AM Michael Almond said:

    You are the first person who has offered a reasonable solution. The fluid people don't seem to understand that by making a site fluid, they are making a decision or choice that affect the user as well. They say "empower the user"... How I am empowered if I don't want the site I am visiting to shift and change? I am a user and it drives me nuts.
    Thank god some people are starting to understand that compromise it a possibility too.

    I am both a Web Designer and a user. What " fluid" people don't seem to understand is that by making a site fluid only, they are making a decision or choice that affects the user's preference as well. They say "empower the user"... How I am empowered if I don't want the site I am visiting to shift and change?

    I think it is the solution that makes sense to all users because there are those of us, myself included, who find it very difficult to find our place in text we are reading if we make even a small change to the size of the browser. It drives my crazy and other than not leaving the browser size alone (not empowered, that you) I have no way of preventing this.

    Open your minds people and stop being so extreme as to not be willing to compromise. I am, I am working on fluid sites even though I hate them.
    Thanks


    It occurred to me that the only way you to give users control their own preference is by letting them choose between fixed and fluid as well.