Fixed vs Fluid Layouts. Let the Battle Commence.
This post is the passionate offspring of a discussion that began over at David Airey’s site. In reviewing a site, he wrote (almost in passing, I think), that he wasn’t keen on the site’s fluid* layout. As the comments to his post became more impassioned, I thought it was time to write something on the topic.
For those of you who have no idea what I’m talking about, a fixed-width web page is just that - fixed; so, for example, this site has a fixed width of 965px; and if you resize your browser window to anything less than 965px wide, the content does not adjust to accommodate. A fluid design, is one that does fold or resize to accommodate different sizes of browser window. So, now that that’s out of the way, let’s begin our journey:
I think it’s pretty obvious why most choose a fixed-width layout - its easy to control the design and it maintains it’s look, it’s proportions and layout, whatever you throw at it. So, why go with a fluid layout? What’s the rationale behind them? Well, fluid layouts are intrinsically more flexible. Well, I’m forced to agree with that for it’s a truism. Moreover, I often read, “It’s for accessibility”. I’m not quite sure what this means. In fact, I think it means nothing; perhaps it’s just the natural response (one that I used to give - oh, the shame!). Apologists for Fluid layouts would add that their designs respond to resizing one’s browser window. Another post on the Fixed vs Liquid debate had this to say:
The advantage of a liquid design is that the reader will never have to scroll
sideways, regardless of his or her monitor size. When printing you don’t have to worry about any part ending up off-page.
Great! - but so what?
Until the David Airey post, I was Fluid-agnostic, and thought (didn’t really give it much thought), that there are times when a fluid layout is appropriate. It wasn’t until he asked me to show him an example, that I realised I couldn’t find one. I browsed, I clicked, I set off an epic journey to the four corners of the World Wide Web - I returned empty-handed.
So, Vivien of Inspirationbit fame, sent us over to her post 16 Stunning Bits of Liquid Design. Putting my new-found prejudice aside, I clicked on over and visited each of the sites in her list. Don’t get me wrong - some of the designs she lists are stunning, but rather in spite of their fluid layout, not because of it. I couldn’t find a single example that justified the use of a fluid layout.
Here’s an example - the GNC & Partners site - from Inspirationbit’s post:
And here we have it resized, so that we can work on another document (I never resize my browser window, but some do):
I love the design of this site, and I’m not suggesting that they should not use a fluid layout; but do you see my point? I could list dozens more examples, but for fear of turning this post into a novella, I’ll leave them out for now). Yes, we are able to resize our browser window and lo and behold the content contorts, squishes and squashes, performs a little CSS acrobatics and voila! - we still can’t see most of the content (for example the menus in the header). I’m not complaining - I never resize my browser window; I’m just demonstrating that a fluid layout is no better at catering for variable window sizes, than fixed-width ones.
If you wish to cater for that small minority with 800×600 screens, then make a style sheet for them. If, in attempting to cater for all screen resolutions, you employ a fluid layout, then what generally happens is that you finish up with a site that does indeed fit into any screen resolution, but looks poor in all of them; you sacrifice good /consistent design for what?
And neither is a fluid layout any better at catering for those with larger screens. With a resolution of 3500×1500 on your Hi-Def Plasma monitor, any fluid layout turns into road-kill - just a slither of a site, a pancake of a page; and to read the content, you find yourself rolling back and forth across the room, or look like a spectator at the US Open.
However intransigent - cantankerous(?) - I might sound, I do have an open-mind on this topic. If you think you can make a Fluid convert of me, then, by all means try. If I am proven wrong, then I won’t go so far as to eat my mouse or surround the whole post in <strikethrough> tags, but I will admit to it.
I would love to hear what you all have to say on this topic.
13 Comments, Comment or Trackback
Aaron :: miLienzo.com
Johno, firstly let me say that I agree with you for the most part. I don’t really like fluid designs and I don’t use them when creating sites myself.
However, a fluid design IS a requirement for a truly accessible site. This basically means that anyone with a disability should be able to view read your site, but primarily this concerns people who have poor vision or are even completely blind.
It’s not just about people who have small screens, it’s about people who have poor vision and increase the size of the text so they can read it. If you haven’t got a fluid design, this can cause problems.
In this country (UK) it is a legal requirement for public organisations and educational organisations to have truly accessible web sites, and that is why a lot of universities or local authority websites have fluid designs.
May 20th, 2007
johno
Aaron,
you make a valid point re making sites accessible to those with disabilities (e.g. a visual impairment). And I would never intentionally exclude that group. However, are fluid designs the answer? We can permit changes to the font-size for example, without using a truly fluid layout. Or should we perhaps be thinking of alternative ways to serve our pages to the aforementioned group?
Your comment has got me thinking even more about what can be done to make my sites more accessible. I’ve been considering Audio versions of my posts, amongst other things.
I thought this from the Section 508 site was interesting:
It’s the line about developing technologies that caught my eye. I think that approach is the right way forward. If the legislative body in the UK (do you know the name of it, Aaron - for my reference) say that a Fluid site is a requirement for governmental/educational organisations, I’d like to know how they define fluid.
Thanks for your insights, Aaron.
I’d also love to hear from those who do have a disability that affects how they use the Internet, and your take on this topic.
I’m off to take a closer look at the Web Accessibility Initiative (WAI) site.
May 20th, 2007
Aaron :: miLienzo.com
I’m not sure if their is any legislative body that regualtes it, but it is the law. Similar to how all public bodies have to provide their printed literature in brail and minority languages like Welsh and Urdu etc, it is the same rules that apply to the web.
I think the relevant laws are the Disability Discrimination Act 1995, and the Special Educational Needs Disability Act 2001.
I dont think anywhere in the law it will stipulate whether a site needs to be fluid or not, but it probably stipulates that a site should be WAI Priority 2 compliant.
I don’t know what the exact requirements are, but there are other ways to be accessible than a fluid design. For instance, some sites offer a completely alternative version of their site which is just text only.
May 20th, 2007
Aaron :: miLienzo.com
And… and interesting point you make aout technologies, as this highlights the problems with web accessibility.
Take for instance Flash technology, which strictly speaking is not accessible to people with visual impairments. Therefore a Flash site cannot ever be WAI compliant.
However, there are other groups with disabilities, such as people with learning difficulties, who might benefit from highly interactive and visually led Flash websites.
May 20th, 2007
johno
Thanks again, Aaron. Some great points. Interestingly, I validated this site against the WAI and it only failed on some pretty minor (easily remedied) points.
perhaps they already exist, but wouldn’t a browser, or a version of a browser designed for those with disabilities make sense.
I mean, for example, you have FirefoxXX and it announces itself through the User Agent String (UAS) describing the disability of the user (which could be selected through that browser by the user); so, for example, I’m using FirefoxXX, and I can select my disability (visual impairment, for example) in my browser - this info is then sent in the UAS and the web site, if set up for it, can serve the appropriate version of the site.
That way the user does not have fiddle around with controls on the site itself, to make it accessible.
May 21st, 2007
David Airey :: Creative Design ::
Thanks for the mention, Johno.
It’s an interesting debate, and one that I had contemplated creating a post around. Now you’ve done it however, I’ll keep track of the findings here.
Aaron makes a great point about accessibility, although to be honest my knowledge of that aspect leaves something to be desired.
From a purely design-based standpoint, and as I mentioned in passing on my post, I’m a fan of fixed-width websites, and agree with your side of the debate.
May 21st, 2007
inspirationbit
First of all, I’m glad that Johno dedicated a separate post to this discussion. Just like David, I was planning on starting this debate over at my blog, but I’ll gladly contribute here.
Secondly, as I mentioned before, I won’t be trying to convert Johno to join the legions of liquid design fans. I personally don’t think I belong there either. However, I really admire the designers who can achieve the right balance with the design and accessibility without sacrificing with either one.
I had a client who insisted on designing a liquid site for him, mainly because his target audience would be keeping the browser window at a very small size.
Aaron here mentioned that “It’s not just about people who have small screens, it’s about people who have poor vision and increase the size of the text so they can read it. If you haven’t got a fluid design, this can cause problems.”
Actually, to address the 2nd problem it’s enough to design an elastic site, where the layout accommodates the changes with the text size. Check out this website, for instance: http://dotkraft.com/ - it’s not liquid, only elastic.
I wish Christian Montoya, the creator or Liquid&Elastic Design website, would join our discussion and bring his insight to the subject matter.
May 21st, 2007
johno
Thank you, Vivien.
I like the point you make about “Elastic” layouts - thanks for clarifying the distinction between Liquid and Elastic. The dotkraft site works very well - a good example of Elastic. I’ll take a closer look at Liquid & Elastic Design tomorrow (4am here). But at first glance, I noticed that the design is fluid in one direction only. It has a set width and only shrinks when the browser is resized below it; achieved in part through this CSS in their style sheet:
#header .inside, #nav .inside, #page .page-in {
margin:0pt auto;
max-width:62em;
padding:0pt;
width:98%;
}
I don’t think it’s necessary, but as a non-resizer, I like it.
May 21st, 2007
johno
A big thank you to Arrtu in Helsinki for his Stumble and his comments (reproduced here):
I basically agree with this judgement about fluid website layouts. It’s better to accommodate accessibility with other means than fluid design. Javascript does the job as well to resize for smaller screens.
May 25th, 2007
Ben Harper
Please can we get over this notion that things should be fluid and magicly fit every browser window?
Fluid designs suck so hard! This issue is very near and dear to my heart. I support fixed width sites 100%.
If you like to make things look pretty, you know what I mean.
May 30th, 2007
johno
Ben
Thanks for your comment Ben. Like that Orange and Grey on your site.
May 30th, 2007
Ben Harper
yea, sorry for getting a little angry on your blog. but, i really think sites should be fixed width. I am all for accesibility and even offering multiple type sizes within a fixed width layout, which I guess we are now calling elastic.
I am sort of worked up about this issue today as I worked hard to develop this interface for a video game. After the design was approved, I learned that the game would be resizing in the strangest of ways, where the surrounding interface does not resize proportionaly to the game board.
To me, these types of visually inconsistences are really drastic, but I guess not everyone feels that way.
The argument that fluid designs are better for accesibility seems totally bogus to me. If a layout is fixed and stationary, users should have no problems knowing where things are and how the site works. When navigation is fluid, or the layout is fluid, things bounce around and change position. To me, I find this incredibly annoying and unfriendly.
If a site needs to work in multiple platforms or screen sizes, I’d rather it resized once once, through css or other method. But, when things move during the browsing experience, that is intolerable to me.
nice site, glad I stumbled upon it today!
May 30th, 2007
johno
Ben
No need to apologise. Great to see some passion. Hope to see you here again…
May 30th, 2007
Reply to “Fixed vs Fluid Layouts. Let the Battle Commence.”