Action, protest, campaigns, demos and issues magazine features, photos, articles, stories photos of London, New York, Wales, England and photography features music, parties, clubs, events, records, releases drug information, harm reduction, no-nonsense guide punch a celebrity football, features, issues, cardiff city games, useless games and diversions technical info, web authoring, reviews and features site news, updates and urban75 blog urban75 community news and events urban75 bulletin boards join the chatroom search urban75 back to urban75 homepage
London features, photos, history, articles New York features, photos, history, articles Brixton features, photos, history, articles panoramas, 360 degree vistas, London, New York, Wales, England Offline London club night festival reports, photos, features and articles urban75 sitemap and page listing about us, info, FAQs, copyright join our mailing list for updates and news contact urban75
web question and answers



« Q & A page

« tech pages


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.

top

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




urban75 - community - action - mag - photos - tech - music - drugs - punch - football - offline club - brixton - london - new york - useless - boards - help/FAQs - © - design - contact - sitemap - search