Advantages and disadvantages of fluid web pages

The advantages of a flexible design include:

  • You don’t need to worry about choosing a target monitor resolution.

  • The whole window is filled, without the potentially awkward empty space left over by many fixed-width designs.

  • Designing liquid pages is in keeping with the spirit and the nature of the medium. A “good” web page design by these standards is one that is functional to the greatest number of users.

Keep in mind, though, these potential pitfalls of a flexible design:

  • On large monitors, the text line length can get out of hand when the text fills the width of the browser. Long lines of text are particularly uncomfortable to read on a screen. (Note, line length on liquid designs could be controlled by the max-width CSS property, but it is not supported by Internet Explorer 6 or earlier. One day, it will be a tool for addressing the line-length issue.)

  • Elements float around on large monitors, making the design less coherent and potentially more difficult to use. Likewise, on very small monitors, elements can get cramped.

  • The results of flexible design are unpredictable, and users will have varying experiences of your page.

Get Web Design in a Nutshell, 3rd Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.