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.
- 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.
- 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.
-
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.
- In Opera, Firefox and Safari, at even narrower widths, the floated side panels are unfloated.
- 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 download all the linked stylesheets even though they don't understand or support Media Queries or Alternate Stylesheets. The guilty parties include IE7, IE6 and IE5. Firefox does support Alternate Stylesheets but it also loads the Handheld stylesheet despite its lack of support.
How is it done? The document has the following stylesheets:-
- A main stylesheet, applying to all media.
- A Media Queries stylesheet, applying override styles on narrow viewports, both screen and handheld.
There are two further stylesheets:-
- A Print stylesheet, in which the on-screen menu is suppressed and a source footer added.
- An Alternate Stylesheet, titled "Single-column (low-vision)". Alternate Stylesheets are not supported by IE. In Opera, you can switch to it using the View menu and selecting Style. In Firefox, you can switch to it using the View menu and selecting Page Style. Users with vision impairment but with some residual vision will probably have set their browser's base font size to a high value. Very large text is comparable to a narrow window, so this stylesheet contains some rules in common with those in the Media Queries stylesheet, giving a single text column with the menu below it.
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.