Fixed Width Layout vs Liquid or Fluid Layout

Which layout is better: fixed or liquid layout (known as fluid layout as well)? Both options have pros and cons, but in my opinion design choice depends mainly on one factor: kind of content and how you want it to be feel/received by your website user.

Let’s take one example: tangible books and newspapers. Are basic fonts for reading bigger in newspaper? Let’s assume that a newspaper is 7 times bigger than a book. Is basic riding font of a newspaper 7 times bigger than basic riding font in book? If we assume liquid design approach it should be 7 times bigger. Or, with the same fonts sizes, are the distances between words in newspaper 7 times bigger? Obviously not. Would you like to read a newspaper where basic reading font size is one or half inch big? I don’t think so, because it would be not so comfortable. Because of human perception and physiology we feel more comfortable with some reading layouts, than with others. The same can be said about photography, or about movies. Almost all kinds of content have the most suitable layouts, which fit best to them.

The same situation is with web design layouts. I think, that every time whenever it is possible liquid layout should be used. It will get rid of side margins, and for some kind of content or some quantity of content it could work better. But, in most cases if you want to get nice layout, with fixed ratios between graphics elements sizes or distances, and if the ratios have some meaning for user experience, definitely, fixed width design is the best option.

However, in my opinion, usually fixed width layout will be better choice, most probably because of two reasons: it is better for reading, and, on average, navigation mechanics (user’s mouse movements) will be better – user will point to whatever object on fixed width page quicker and more comfortably, which makes user experience much better (see Fitts’s Law).

What to do with margins in fixed width layout? It depends, but if all content is in some div containers, you can use page’s background image (for instance: photography) to improve user experience, so margins are not problem anymore, and many times skillfully chosen background which fills margins could improve page look. Or, another option to improve page look in spite of margins – make bigger header (with header logo or some big graphic element in top page area, and maybe place something similar in footer as well). Actually, header and footer can have liquid design, because content which usually is in header and footer makes it possible. In this situation we have mixed web design: fixed and liquid, but the main content area has fixed width, to make reading and using it more comfortable for user. Keep in mind, that most forums have fixed with design.

Whatever option you choose, the navigation should not be affected. To cut it short: design – fixed of liquid – depends mainly on your website’s content or product.