About fluid and fixed width layouts

Just in the last few days the old debate about fixed vs. fluid width in website layouts has surfaced again for some reason. I don’t think we will ever come to a consensus on the issue, so there isn’t much use in sharing my point of view. But a bit of debating can be fun, so I’ll do it anyway.

Regular visitors will know that I recently redesigned this site. Before the redesign the site had a fixed width layout. Now the layout is neither fixed nor fluid, but elastic. I always wanted to use a flexible width of some kind, but never took the time to implement it until now. But why did I leave the fixed width format?

First, if you haven’t read the posts I was referring to, here they are: Fixed fashion (Jeremy Keith), Internet as the medium (Rob Mientjes), and Fixed Versus Liquid: The Beat(ing) Goes On (Molly Holzschlag). Done? Good. Welcome back.

I finally took the time to redesign, that’s the major reason. Another reason is that I know much more about CSS now than when i created the first version of the old design over two years ago. Back then I couldn’t get a fluid width to work the way I wanted, so fixed width it was. After all, a fluid width layout is more difficult to get right than a fixed width one. Especially when you take Internet Explorer into account. Nothing new about that.

A common argument against fluid layouts is that lines can become so long that readability is decreased. Yeah, well that depends on how wide you make your browser window, doesn’t it? I just don’t get why some people are so hell-bent on letting their browser window fill the entire screen. I think that “maximise me”-button thing in every Windows app is to blame for that. It’s just a little bit too convenient. Would you still push it if you had a 30”Apple Cinema Display with a resolution of 2560 by 1600 pixels? Really? Of course not. You’d probably be using that monitor with a Mac, and extremely few Mac users have the maximise bug.

Ok, so the next argument is that many people using the web are computer illiterate and won’t know how, or even that it’s possible, to change the size of their Windows windows. Let’s assume that’s true; now, how many of said computer illiterates are using monitors large enough for that to actually become a problem? Would you say that it’s common for people who do not know that they can resize their browser window to be using a screen resolution of 1600 by 1200 pixels or larger?

I’ll leave that as something to think about. I don’t know the answer, and it doesn’t really matter. If someone is using a tool the wrong way, they need to learn how to use it right. Maybe we should start adding a little bit of JavaScript into our sites, letting people with overly wide window sizes know that it actually is possible to make their windows narrower. No, I don’t really mean that. I think.

Ok then, I’m often willing to compromise, so the current 456 Berea Street layout is fluid and has a maximum width to prevent lines from becoming too long. But setting a maximum width in pixels can cause the opposite problem of having no maximum width: when you increase text size a lot, lines can become too short to read comfortably. I got around that by specifying max-width in ems, which lets it increase and decrease with text size.

Oh, and then there is Internet Explorer. A reasonable guess is that nearly all of the inexperienced users for whom not having a maximum width would be a real problem they cannot deal with are using some version of Internet Explorer for Windows. And that browser does not support max-width.

Fortunately it does have the proprietary expressions extension to CSS. Using expressions it’s possible to give the layout a maximum width even in Internet Explorer. But in pixels, not ems. I don’t know if a width expression can be made to work with ems, and I’m not spending the time to find out.

Internet Explorer for the Mac, then, does not support expressions either. I was close to dropping CSS support for it, but decided to let it come along for a final ride. Without a maximum width. At first I used an ugly CSS hack to feed it a fixed width. That has since been removed. One less hack in my CSS file. And very, very few will notice.

So there you have it. Elastic width for modern browsers, fluid width with a max-width for IE/Win, and fully fluid width for IE/Mac and everyone else.

Looks like I need to add a little bit of clarification here, since I’ve exaggerated some points a bit in this post.

Yes, line lengths are important. No, I do not think it’s a good idea to start using JavaScript sniffers to throw up alerts for people with wide browser windows. Yes, fixed width can be a good choice in some cases. Just don’t make it too wide, which is something I’ve been seeing more of.

Posted on April 18, 2005 in Web General

Comments

  1. An interesting sidebar that hasn’t really been explored (at least not that I know of) is the designer/user tradeoff. How does fixed vs. liquid affect the designer and the user?

    Surely, the user will browse the way the user wants to browse. Period. So, does that mean the designer's opinion is the most correct? But wait, then the user commplains when the site isn't built to their liking. Where does one draw the line?

  2. I think you are correct on that Win/IE users always go with the maximized window. They do not know anything else. That is why I do not think fluid layout works. The lines always get too long for those users, and then they blame the designer :D I do not think most users thinks the site is too wide or not, they just think the it is more or less hard to read some websites. Making a fluid layout like you have done is a good mix between fluid and fixed. I like that.

  3. April 18, 2005 by Juan

    One issue I think you are forgetting is accessibility: research says that some 60% of us may benefit from some sort of accessibility. Simple ability to resize the screen is important. If screen sizes are getting bigger and windows are maximized, font sizes may be increased. While I don’t have numbers, a major UK site was recently redesigned, and the number of complaints about not fitting into the screen with larger font sizes was incredible…

    Elastic is a good in-between, in my opinion and I am pleased to see it on your site. Works nicely.

  4. You could offer a sensible equivalent to the em width, by using (desired max width in em)*16, which will roughly correspond to your em width for the default font size. If the user then changes his/her font size, the design may become less optimal, but IE doesn’t really have a large enough flexibility font-size wise for that to become a real problem.

  5. Wait a minute. Do you get what you say? Essentially it is: “make sites fluid to fit any browser width, and then force users to make browser narrow for said sites to look good and be possible to read”.

    This is the same fixed-width design only in advanced-masochistic version.

    I can tell why I do maximize my browser (any application, in fact) - so it is the only thing that gets my attention at the moment. No other windows, text processors, etc. etc. sticking from behind.

    And given resolution high enough any fluid/elastic site will break up. Can you imagine site with logo at left side and search box at the right side some 70cm apart and still looking good?

    You don’t get why users have browsers maximized, I don’t get why this idea of site taking all available space seems so right. I don’t want my book to spread to cover my entire table…

    Id doesn’t matter how different medium you consider www. The fact that something can be done doesn’t mean it should. There is optimal line length. There is reason why books share pretty much the same format. That reason lies in the physiology of our eyes, so let’s not try to outsmart it. Monitors (most) are in landscape layout, while reading is much more comfortable (for the reason) in portrait layout. And yes, max-width in EMs is optimal solution.

    That said, I do not consider myself an enemy of fluid/elastic designs. On the contrary.

    What pisses me off is text running across the whole screen (and somehow considered more accessible) and some crazy idea that web is soooo different so it should be done another way than on paper.

    Yes it is different, but our eyes are the same, and our reading physiology is still the same.

  6. April 18, 2005 by Roger Johansson (Author comment)

    Arve: That should work reasonably well. Thanks.

    Rimantas: Cool down ;-) I was making a slight exaggeration. I’m not about to throw up a JavaScript alert for people with wide browser windows.

    I absolutely agree about optimal line length and fully liquid sites eventually breaking - that’s why I went with an elastic width to accommodate the maximisers and keep line length within reasonable limits.

    As for maximising… well, I hear what you’re saying. We all have to adapt though. I can rarely fit the sites I read in a browser window that is as narrow as I’d like it to be, which means I have to make it wider or face horizontal scrolling.

  7. If you want to make your app the only thing visible on a mac, just Command+Option+Click it.

    As for maximized, no reason for it. The only reason is because people have been conditioned to not multitasking because their computers are too slow.

  8. I’ll just chime in on this as both a CSS- and design-noob. With my site, I went with a fixed content column and a fluid ‘sidebar’. Why? So that I’d be free to put images in the content column without fear of breaking it all to pieces.

    At the time I was first putting it together, the design blogs seemed to be almost entirely fixed at ~750px width. I didn’t make mine different to satisfy any kind of usability or accessibility convictions— I simply knew that as an amateur designer, there was no way I could create something unique doing it the same way as everyone else, so I tried something a little different.

    I think my next ‘different’ might be using lots of photographs as imagery, instead of trying to mimmick an organic look using a zillion photoshop filters. Or maybe creating two equal columns instead of an obviously lesser sidebar.

    Is following the crowd bad? Yes. Is being different for its own sake also bad? Yes. But it’s a different sort of bad. An experimental bad.

  9. April 19, 2005 by Calrion

    I think the ‘elastic’ layout is the best option. Fluid to a point, then fixed to ensure lines of text etc. don’t become ridiculously long.

    I’m a Windows user, and I maximise.

    Mostly, I maximise because I can get the best look at whatever app I’m using, and because I generally have large amounts of detritus on my desktop. Additionally, maximising my browser (Firefox) allows the maximum space for interface elements, specifically the links toolbar and tabbed area.

    In terms of usability, fluid is probably best for savvy users, as their browser width is in control. For less experienced users, elastic is probably best as it will automagically stop itself from becoming too wide.

  10. April 19, 2005 by Matthijs

    I agree with Rimantas, that it’s silly to “Make sites fluid to fit any browser width, and then force users to make browser narrow for said sites to look good and be possible to read”. I don’t want to have to resize my browser for every site I visit, just to make it readable. And I also don’t want other windows to distract by sticking from behind. But that’s just my personal opinion. What about some real usability research? Does anyone know if there has been any sort of research on this issue? What do “general” users prefer? My guess is that most users will open their favorite browser, maximised or at some other size, and start surfing. They don’t want to resize their browser with every new site they visit. And that’s precisely what would be necessary if designs would be liquid. Off course, an elastic design with a max-width for the text seems like a good solution for this. So, again, does anyone know of any research done on this issue?

  11. April 19, 2005 by Roger Johansson (Author comment)

    Matthijs: I can’t point you to any research on the subject, but I agree with you that most people do not want to resize their browser for every site.

    The thing is, that is exactly what fixed width designs do when they are too wide, as is becoming more common. And for those using a screen that is too narrow to fit the design, resizing is not even an option.

    It should also be noted that it is possible to make a fully liquid design that keeps line lengths under control.

  12. April 19, 2005 by Matthijs

    Roger, you’re right that fixed width designs that are too wide are just as big a problem. The solution on your current design seems a nice solution. Would it be an idea to give us some more details and insight into the way you implemented your elastic design? (hint ;) Or is it essentially the width:expression rule in your ie-stylesheet which makes this design work cross-browser?

  13. Fully fluid has its obvious drawbacks, although not quite as serious as those of a fixed width in an absolute unit (and I do consider pixels to be absolute for all intents and purposes).

    A fully elastic design has many of the drawbacks of a fixed width, but not all of them.

    There is no one-size-fits-all solution; I think some kind of constrained hybrid design usually works best (it depends on the site, though).

    I use a liquid/elastic hybrid on my blog, with a minimum and maximum width specified in ems. It seems to work rather well, although I’ve had to do some workarounds for IE/Win.

  14. Fluid main part, fixed sidebars and (maybe) some elastic parts is my preferred layout-method. I always keep text-areas within 600px max-width though, and hack IE/win.

    Using min/max for the whole page so it’ll stay within 600 - 1200px and centers above. The same hacks for IE/win.

    Testing everything on 600 to 2400 wide screens, and leave the rest to each visitor. Text-lines will not get too wide (600px max), and the page doesn’t break too early under stress.

    Most comments I get are that visitors don’t notice anything that really disturbs them, and that it makes easy read. Guess that means that it’s a working compromise.

    Your site works fine for me, so I’ll call it a good compromise. My old eyes says the text is a bit too small, so I zoom it to 200% in Opera on a 1280 screen. No problems whatsoever.

    Just tested this page on a 3800 “screen” with 200% zoom, and it works just fine there also. Looks awesome when zoomed to 500% on such a wide screen. That green monster on top came right at me…

    Well done Roger.

  15. I would love if fluid layouts where truly fluid. I work on a laptop, maximised all the time and even when there will be a possible resolution of 2k+ I would still want the browser maximised as the screen is still only 15in. The problem for me is that the text size does not increase/decrease with the layout, I was able to get my layout to change with the text size but I would be far happier if I could have a hook for it all to size with the browser window. Having lines get long seems to me like a temporary shortcoming of a developing medium but frustrating all the same.

  16. I am a big fan of elastic layouts. I fix widths using ems.

    I use a little bit of javascript to change the font size dependent of the width of the browser window.

    The default font size I use is 76% ie 1em = 12px at medium/100%/default settings. For a browser width greater than 1000px the font size is 89% ( 1em = 14px) and for browsers greater than 1200px 101% ( 1em = 16px). And for small browser windows (ie less than 670px) the font size is fixed to 11px.

    This way the page fills most the screen (except for superwide 1400px+ screens), the line length is maintained for maximum readability, and the design (with the exception of images) maintains it’s consistency over a wide range of user variables (browser width, text size) than a fluid design and allows for user preferrences (browser width, text size) which are not catered for (at least with IE) with fixed (in pixels) width layout.

  17. That is very cool and will have to be added to my long list of things to learn! THX

  18. IE treats “width” like Mozilla treats “max-width” so just using “width” for your styles eliminates the need for hacks, while it makes your design slightly less flexible.

    I’ve been adding “themes” for my site which basically is just a dumbed-down term for “server-side CSS switcher” which lets users pick the default elastic layout (with fixed line lengths in ems) and everything else expanding. Of course, this means that any horizontal images have to be repeating patterns that can stretch into infinity.

    With this new CSS Reboot redesign I’ve been trying to code sans-hacks.

    Sometimes I’ll cheat a little and add code that doesn’t work in IE, but that’s not really a hack. IE users just won’t see the added bit of goodness, like a background colour in framesets, or a table row being highlighted because I use “tr:hover{color:#FFC;}”.

    No big deal. I promote FireFox on my site and if people try it out and notice that everything looks a little prettier, works a little better, etc., maybe they’ll make the switch from the broken old browser, and then again, maybe not.

    But that’s their choice. And I can sleep easy.

    Fixed-width layouts are MUCH easier to achieve, though, and I’m going to challenge myself to turn the fluid/elastic stylesheet into a fixed-width stylesheet (with a better use of images) in just one day, to fulfill the early promise of CSS, which was “quickly edit ONE file, change the entire look and feel of the site.”

    It’s not like CSSZenGarden hasn’t been doing this. I’ve just never been able to make it work for a project of my own without starting from scratch.

  19. First I just have to adress the “maximise bug” statement. As stated by other commenters above, many of us prefer having one application in view that fills all of the visible area. Not too many users with 30” Apple Cinema Displays, be it Mac or PC users, out there…

    I would rather say that it’s a bug in the Mac OS that it’s so hard to maximize a window. ;-) But let’s not turn this into a OS discussion, I just wanted to put in my two cents.

    Basically, when it comes to chosing layout, I think it totally depends on what kind of web site you’re building. There’s no right or wrong. But generally, I think max-width sounds like a good solution in many scenarios.

  20. Nice article Roger & I also like the elastic solution. However, it proved not that easy sometimes to convince a client to stick to it, rather than a fully-fluid design. Hope, this changes soon.

    And I would double Matthijs in his asking for a follow-up on implementation of the elastic design on your site, especially the IE workaround, both for max-width and min-width.

  21. April 20, 2005 by Roger Johansson (Author comment)

    I’ll write something about how the elastic layout I’m using works. Hopefully I’ll be able to get it done by next week. No promises though ;-)

    Jough: Hmm. Are you sure you don’t mean that IE treats “width” like “min-width”?

    Robert: That may be part of the reason for Mac users in general not maximising windows. I believe another reason is that the Mac OS has always had the menu bar stretching across the top of the screen, regardless of window size. That eliminates the need to maximise applications just to make the menu bar easier to hit.

    Anyway, it’s good to know that there are people who have made a conscious choice to use maximised windows and don’t do it just because it’s possible.

    I still don’t “get” maximising though. I can only see a need for it when using a very small screen or an application that takes a lot of space, like Final Cut. But a web browser? Nope.

    Whatever. Max-width is good, and I’ll be using it more.

  22. Jough: IE does not treat ‘width’ as ‘max-width’. It treats it properly for the most time, but it will expand the width if the content doesn’t fit. Thus it sometimes treats it as ‘min-width’.

    It does treat ‘height’ as ‘min-height’, though.

  23. April 21, 2005 by Matthijs

    Roger, a follow-up would be nice. Although, as you say yourself, this debate is quite old, and a consensus will not be found on the short-term, it is an important issue. And more understanding and with that more conscious choices for one layout or the other are important. And technical solutions which give us the best of both sides are more than welcome! How people surf the web is a personal preference, as it should be. Be it on a 21inch monitor or a small pda, people should be free to choose how they visit and see webpages. And websites should be designed for that flexibility. And that’s a strong argument for more flexible layouts, like your’s. However, only as a sidenote: one thing that has been mentioned by different people to me when I started making websites (most fixed layout), was that they liked the nicely centered fixed-width layouts. They were used to the “normal” full-width (often frame-based) websites when surfing, and found it much more pleasing to read/watch a 750px wide centered design. So I still think it would be very interesting to have some research on how “average” people surf the internet and how they want it to be. (if these average people are the target visitors off course) But, then again: are we designing for the average user and is it ok to make the usability worse for the minority? Hmm, have to think about this some more ;) …

  24. I think this is another one of those what “can” we do, rather than what “should” we do conversations.

    I’ve got one of those nice 23” Mac displays with 1900x1200 resolution or something like that…but I don’t like seeing a website take up more than 800px of horizontal real estate.

    Why? Because for me to read a line from left to right all the way across the screen actually requires me to physically turn my head. This may seem insignificant, but when you’re working on the machine all day, if you’re panning across a 23” screen your neck gets sore. Plain and simple.

    If you use a fixed width of less than 800px you can read left to right with your eyes, maintaining a stationary head, which is a CONSIDERABLE advantage from a user standpoint.

    Basically…I really don’t see the need to make websites wider than the typical 800px. I would wager that the number of people who need to increase the font size to the point that it throws off your design are few and far between, and until css is at the point where I don’t need half a dozen hacks to do a design that would be consistent for those users I’m content to let gramps put on his reading glasses, and stick with fixed width layouts.

  25. Nice Roger, I didn’t realize until today that your site resizes so well. I was inspired to do the same for mine after seeing how well it works. I now have my site with a fixed width with all the text sizes specified in em’s not pt’s.

  26. April 22, 2005 by Vanish

    An interesting point that keeps getting overlooked is the fact that a lot of users despise fixed-width layouts, probably on an order of the same magnitude as those who prefer them. I am among those in this regard. If I have my browser window stretched out to a certain size, and I’m forced to see everything in a skinny column half the width of my browser window I get as irritated as I do when a site has assumed I’m using a 30” monitor just because the designer/developer has one, and forces me to scroll horizontally to read.

    There are several other things that are arguable, but this has been done to death. There is no “correct” answer for every site. As always, the single determining factor should be the site’s target audience. Too many developers and designers refuse to take the time to ask their audience what they would prefer. Remember gang, we’re not their mothers, we don’t necessarily know what’s best for them. ;)

  27. I guess that this link might fit in this discussion as well…

  28. Some of the commenters have got the wrong end of the stick when saying that full-width fluid sites somehow force the user to resize the window to make the text legible. The reality is that sites designed this way empower the user to read the site in which ever window size best suits them.

    For example, I really wish the Guardian didn’t have a fixed width layout as I hate the ridiculously short lines in their articles. 8 words per line may be fine in a printed newspaper, but I find it hard work reading on screen, so I would like the option to change the line length myself - but I can’t.

    Fixed width sites definitely do have their place for all sorts of reasons, but think very carefully before dismissing liquid layout, even of the non-elastic variety. After all, doesn’t it strike you, fellow readers, as awfully peculiar and very non-Web like for every web site to be 768px wide!

  29. April 30, 2005 by Aaron

    My preference for a fully maximized window comes from wanting to have as much information displayed on the page in one go.

    I don’t like having to scroll, even worse if I have to scroll in two dimensions as some fixed width layouts will have you do, should your screen res be small.

  30. June 18, 2005 by Eric

    Sorry for chiming in so late on this, I found this article when searching for new ideas in layout width. I am relatively new to CSS and webdesign, but one thing has plagued my brain for a solution, which I believe this ‘elastic’ width concept fixes perfectly.

    There seem to be three types of web users:

    • The ‘grandmother’ crowd - large font size on smaller (800x600 or 1024x768) resolution.

    • Average user - medium default font size on a resolution between 800x600 and 1280x1024.

    • Rich computer geek - large font size to make things readable on thier 20+ inch display running at 1600x1200+ resolution.

    Depending on the focus of the site, it may only have to satisfy two of these three groups.

    Liquid layouts are fine for the grandmother, because thier resolution is usually 800x600, and rarely over 1024. Liquid is also fine for the computer geek, because they are smart enough to resize the window - but this does annoy them. Increasingly though, your average user is running at 1280 resolution, and may not have the common sense to resize thier window, leaving them with the impression that the site is ‘hard to read’.

    Fixed width layouts work well for the average user, and don’t offend the grandmother or computer geek too much.

    This elastic layout concept seems the best for grandmothers and rich computer geeks, while producing the same presentation as fixed width for the average user. The grandmothers who are running at 1024 will get a page which is less cramped than a large font sized fixed-width 800 pixel wide layout. The rich computer geeks will get the same benefit when running larger font sizes.

    Ultimately, elastic page layout seems to be the most accessable for large font-size users, while retaining readability for everyone. It does bring with it challenges for diagonal graphical elements, which can be difficult to position by ems in certain situations. Hopefully SVG will be a tool to ease the pain.

  31. Sorry to add to this entry so late, I just discovered this while running a search.

    I really like the implementation of the elastic layout here, and I think it’s an awesome example of what can be done with fluid layouts.

    I would like to refer anyone who is looking for help designing liquid layouts to this page:

    Liquid Designs

    It offers examples of good designs and techniques on making fluid designs work.

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.