fluid web design using Media Queries

This entire site represents 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 A List Apart #151 design).

Let's not lose sight of the practical reason for all this advanced technical stuff: it's simply to enable users to view Web pages with a layout that is easily readable and usable, no matter what size of screen and window they have, even on mobiles and other handheld devices.

CSS3 Media Queries is currently a Candidate Recommendation (as at September 2009) and is stable enough to consider using. Opera (Opera 7.2, released in 2003, onwards); Firefox 3.5 (released June 2009); and Safari (Safari 3 onwards) have support for it. There is a summary of Opera's Media Queries support (in the Presto 2.2 rendering engine, used in Opera 10).

On this site, I am defining Media Query viewport size in pixels but Opera now seems to support ems, so I may switch to that unit to improve overall fluidity control.

  1. In all browsers, the pages are rendered with two columns (menu and body) if the window (viewport) is wide enough. A maximum width is set so that the lines of body text are not uncomfortably too wide to read (Internet Explorer 6 doesn't support max-width). The text is right-justified.
  2. As the viewport is made progressively narrower, the body text wraps to a narrower width. But the right-justification eventually starts to reduce readability, as gaps between words become too great. In Opera, Firefox and Safari the text will be laid out ragged-right, thus restoring readability.
  3. Eventually, the two columns start to overlap as the viewport width decreases. To lessen usability problems (especially with IE), the body column slides over the menu column. This is achieved by giving the body column its own background (albeit the same image as the page background) and a z-index higher than that of the menu column.
    • If you are using Internet Explorer (IE) you have now reached the limit of fluidity for the page.
    • In Opera, Firefox and Safari the menu column slides below the body column, rather like float behaviour.
  4. In Opera, Firefox and Safari, at even narrower widths, the floated side panels are unfloated.
  5. In Opera, at very narrow widths, the title/logo image is replaced by its Alt text and lists are simplified. Firefox simplifies the lists but doesn't replace the image. Safari refuses to allow the window to be made narrower.

My log files show that browsers down­load all the linked style­sheets even though they don't under­stand or support Media Queries or Alternate Style­sheets. The guilty parties include IE7, IE6 and IE5. Firefox does support Alternate Style­sheets but it also loads the Hand­held style­sheet despite its lack of support.

How is it done? The document has the following stylesheets:-

There are two further stylesheets:-

One page of the site  – Advice on viruses – uses a further stylesheet for Handheld devices. It is geared to Opera's Small Screen emulation and there are no guarantees how it looks on real handheld devices. Handhelds vary greatly in their capability. When Opera is installed on a handheld, it is able to render pages according to the specific capabilities and limitations of the device. It's therefore usually better to let Opera do this rather than try to adapt the page layout with a generic Handheld stylesheet.