Fluid Design

From CSS Discuss

Jump to: navigation, search

Whole sections of books have addressed this subject in detail. The present document doesn't seek to do that. It's not an expert treatise but seeks to give a practical recap on what fluid design (liquid design) means, particularly for those Web developers who have come from a print-based background and who want to use the power of CSS.

The Web is often described as a unique medium, with characteristics (both advantages and disadvantages) that make it very different from other media, especially print media such as books, pamphlets, flyers, magazines etc. In this sense, people are usually referring to Web documents as displayed on desktop-sized monitors.

But the Web "medium" can be considered in two senses. Firstly, it is a storage medium, for which the storage format is HTML. Secondly, it is a display medium. In this second sense, the Web is truly multi-medium, because it enables the stored information to be rendered in a variety of display (output) formats - not just monitors but also handheld screens; print; projection devices; and speech synthesisers. Within each of these media, the Web does not operate on fixed sizes but can display material on different-sized screens, stationery etc. and even in different ways for a single medium at a certain size (through user preferences for font size, for example).

Fluid design means embracing and exploiting this huge flexibility rather than trying to fight it to achieve the sort of "pixel perfection" that is a feature of print media.

Contents

How is Fluid Design achieved?

Again, this is a brief recap. The most basic aspect of fluid design derives from text wrapping, familiar to us from word processors. The content of containers (block elements such as div, p and table) will re-flow according to the width available for that container. Fluid design is achieved by using relative units for widths (e.g. em or %) rather than absolute units (e.g. px). Tables are somewhat less fluid than other elements in that their columns will always appear side by side, whatever the table's width. That's fine for data tables but it's one reason why structural tables are being supplanted by CSS positioning and floating.

There is a second - as yet much less familiar - aspect to fluid design. It involves CSS3 Media Queries - a CSS3 extension to Media Types. Media Queries can be used, for example, to customise the display for narrower viewports, thus:-

@media screen and (max-width: 480px) { ... }

@media handheld and (max-width: 150px) { ... }

Media Queries used in this way can enable a big increase in document fluidity within a single medium.

CSS3 Media Queries is currently a Candidate Recommendation (as at January 2010) and is stable enough to consider using. Opera (Opera 7 on), Firefox and Safari have support for it. If you use Media Queries on your site, users gain the benefit of increased fluidity (and usability) only in these browsers. The good news is that other browsers will harmlessly ignore the rule provided you use simple Media Queries in your @media rule, like those above.

My belief is that Media Queries will grow rapidly in support and importance as Web browsing on handhelds takes off.

Examples

There are many examples of sites that are designed fluidly (although an even greater number are not, mostly relying on fixed-width, heavily nested structural tables). Try a few of your favourite sites, plus your own, of course.

For all examples, find the breaking point of the design by using progressively narrower windows and/or by setting a large base font size in your browser.

The example below uses Media Queries for additional fluidity. Compare the fluidity using Opera, Firefox or Safari with the lesser (but still acceptable) fluidity possible with other browsers.

My own site is a demonstration of extreme fluidity. I've done this as a practical demonstration of what can be achieved now on live, working sites. It uses a table-less design based on absolute positioning (Dug Falby's ALA #151 design). With all browsers, the two columns start to overlap as the viewport width decreases.

With Opera, Firefox and Safari, the menu column slides below the body column, rather like float behaviour (remember to refresh the display). At even narrower widths, the floated side panels are unfloated. Ultimately, the title/logo image is replaced by its Alt text and lists are simplified.

The site has the following stylesheets:-

http://www.syntacticweb.co.uk/synmain.css Main stylesheet (all media)

http://www.syntacticweb.co.uk/synmedia.css Media Queries stylesheet (narrow viewports, screen and handheld)

http://www.syntacticweb.co.uk/synprint.css Print stylesheet

http://www.syntacticweb.co.uk/synlvis.css Alternate Stylesheet

The Alternate Stylesheet is titled "Single-column (low-vision)". This stylesheet implements the most essential feature of Joe Clark's Zoom Layouts . Unlike Joe's examples, I have chosen to allow the user to set their own browser (large) base font size. Very large text is comparable to a narrow window, so this stylesheet contains rules similar to those in the Media Queries stylesheet.

One page of the site also has a Handheld stylesheet geared to Opera's Small Screen emulation (no guarantees how it looks on real handheld devices): http://www.syntacticweb.co.uk/synhheld.css


References

General references for Fluid Design

Media Stylesheets on this Wiki. Designing for various media is also an aspect of fluid design.

ALA #167 Elastic Design by Patrick Griffiths ALA #279 Fluid Grids by Ethan Marcotte

About this page

This page was created by Jim Wilkinson in February 2005, who welcomes more research; questions; comments; and corrections.

This page was created in February 2005 to plug a major gap in the Wiki.

Personal tools