Q: Liquid layouts
by Mike Slocombe
Q: I've skimmed through Jakob Nielsen's book Homepage Usability, and he encourages the use of a 'liquid' layout for a Web page, so the content fits the screen regardless of resolution. May I ask how this can be done?
Craig Watson
A: There's a JavaScript effect that works out the size of the user's screen and forces the browser to fill it completely (a favourite trick of porn sites, apparently). This can be achieved with a simple addition to the <BODY> tag:
<body onload="moveTo(0,0); resizeTo(screen.availWidth,screen.availWidth)">
Although some newbies might think this effect is 'WaY K3wL', my advice is never to use it. Forcing a browser to hog the entire screen just to display your precious site is rude and arrogant - I like to choose the size of my browser, thanks.
A more sophisticated - albeit fiddly - approach is to make multiple versions of a page optimised for each screen resolution, and use JavaScript to direct visitors to the appropriate page:
<SCRIPT LANGUAGE= "javascript">
if (screen.width == 1024)
{parent.location.href='1024page.html'}
if (screen.width == 800)
{parent.location.href= '800page.html'}
if (screen.width == 640)
{parent.location.href='640page.html'}
if (screen.width <= 639)
{parent.location.href='text.html'}
</SCRIPT>
For more on this, see Post by Screen Size.
Stretchy style sheets
A far better approach is to create a 'liquid' layout which will fill whatever browser space is available (so that the user can choose how wide they want to view your site).
The best way to do this is to use style sheets to create dynamic layouts by specifying percentages in HTML DIVs. Be aware that browser compatible issues may result in inconsistent displays, particularly on older browsers.
There's some great tutorials and downloadable template layouts here:
From Table Hacks to CSS Layout: A Web Designer’s Journey
CSS Layout Techniques: for Fun and Profit
Mighty expanding tables
Perhaps the easiest way to make your pages dynamically fit a screen is to specify <TABLE> dimensions in percentages, creating a 'liquid' effect that makes the page expand or contract depending on the width of the user's browser.
<table width="100%">
<tr>
<td width="40%"></td>
<td width="60%"></td>
</tr>
</table>
More info:
For more on HTML tables, see www.htmlhelp.com.
For more on getting rid of table margins, see www.htmlhelp.com/faq/html/, and for more on style sheets and tables, see www.w3.org/TR/REC-CSS2/tables.html.
I'd also recommend making the fonts on the page resizeable. See www.wilk4.com/webdevres/.
May 2004
