Liquid Layouts - The Decision

Choosing a type of layout is one of those things in web design where flames are regularly thrown, so I'm putting on my best heat resistant suit and wading in. At Nomensa we have always used liquid layouts, as we looked at in part 1, liquid layouts tend to:

  • Be less likely to get horizontal scrolling
  • Make better use of screen space
  • Be more robust for people with different font-sizes.

However, there are some issues too.

Comparing to designs in Photoshop

Liquid designs aren't always predictable for clients, we often get questions like:

Why don't things align like in the design?

Well, generally they do, but perhaps they are looking at it with a different size browser, or the font settings could be different? It is very hard to demonstrate how a design varies by width when working in a graphical editor like Photoshop, it would take an inordinate amount of time to create variations to show the effects of different widths. Also, fonts can vary from Photoshop (lots of control) to browsers (less control), so text wrapping can vary, with knock-on effects. The unpredictable nature of liquid layouts has caused plenty of friction.

Accessibility

One of the main reasons we have usually used liquid layouts is accessibility. People using screen magnifiers or the text-size settings in their browser have benefited from a flexible layouts. Screen resolution does not always correlate to text size, as people with moderate visual impairments are likely to have large text and a small resolution. This is why 'elastic' layouts suck: If a site has an elastic layout that is 1000px wide at default settings, and a user has a resolution of 1024px wide and expands the text size, it creates horizontal scrolling: Yahoo UK homepage, with the text expanded and 20-30% horizontal scrolling. However, recent advances in browsers have almost nullified the accessibility point. The browsers that most people use generally have 'zoom' controls, rather than text-size controls. Opera has had a great zoom for as long as I can remember, and Internet Explorer 8, Firefox and Safari have almost caught up. (A good zoom means it can fit the page to the width of the view, where possible. Only Opera puts this in the hands of the user, the others rely on the developer knowing how.) There are also some people with cognitive issues (e.g. Dyslexia) who may prefer a different width for the lines of text. Although having a liquid layout puts the user in control, that control is limited by their screen size, so it is difficult to make that a general requirement. So for accessibility, we still need to ensure text can expand, and we need to put in place limits on the width for the zoom of most browsers. However, the accessibility requirements can now be met with a fixed layout.

Cross Browser Testing

A fairly common scenario is that you need to cross-browser test a number of templates. Say it's a simple site, and you've got 5 templates and 6 browsers you are checking. That's 30 page checks. With a flexible layout, you need to test at 800, 1024 and 1280 pixels wide. (And yes, we have had bugs in a certain browser that only happen at particular screen sizes.) That's 90 pages, although theoretically it is an infinite number. In practice, taking a liquid layout approach means either:

  • A simple design, or
  • You can't be precious about pixel perfect designs.

The decision

The decision for Nomensa is that: it is now a decision. We no longer default to liquid layouts. It is a site-by-site decision, at the beginning of a project we'll take a client through the options, and work out which is most suitable. There are a few factors that would lean you towards one or the other:

Suitability of site for fixed / liquid layout
Liquid Layout Fixed Width
  • Simpler site (e.g. this site!)
  • Content Oriented / Text heavy
  • Needs to be Triple-A accessible
  • Boxy or modular design needed (e.g. a portal)
  • Lots of pixel based features (e.g. rounded corners)
  • Lots of fixed size items (e.g. images) with text

We prefer liquid layouts, as it is natively 'web' and makes better use of the available screen estate. However, if you want a boxy design with touches like rounded corners and you aren't prepared to spend triple the time on QA & testing, fixed width is the way to go. For some sites, a third way is a "stepped design", where the layout re-arranges itself depending on the width of the browser. For example, a some boxes could be in a third column for wide screens, and drop-underneath the second column for smaller screens. We've used JavaScript for this so far, but media queries are gaining support and might be a viable method soon.

Persuading others

If you've found liquid layouts and the fold hard to explain, feel free to use this presentation, which goes through the points in these articles:

Creative Commons License