bioneural.net

Trying to please everyone is an ambitious aspiration for any web designer. Do you please most of the people most of the time, or some of the people all of the time? As described previously, I use a chuck of JavaScript called StyleSwitcher to offer readers of this blog (all two of them) three alternative ways to view the site: single column, fixed-width, and widescreen. Now that web surfing on a PDA using WiFi is a reality, how can this be fine-tuned to ensure those with small screens are automatically offered the "lite" single column view? The answer, perhaps unsurprisingly, is provided once again by JavaScript.

This article refers to iBlog (version 1.x), a Mac blogging client that was formerly used to publish this site. It may refer to design elements and other features that have since been replaced.

Firstly, a recap on the current offerings. The style-switching buttons in the sub-navigation menu are as follows:

[I] specifies a stylesheet stripping out most of the graphic elements and using a fluid-width single column; the text wraps to the width of the users screen.

[II] specifies (the default) stylesheet using all graphic elements in a fixed-width two-column layout. This is ideal for screens 800 to 1280 pixels wide.

[<II>] specifies a stylesheet using most graphic elements that permits an adjustable-width widescreen view, ideal for screen widths of 1280 pixels or more.

The user agent (browser) remembers which stylesheet was chosen during the previous visit and loads the appropriate CSS when the user re-visits. But what if visitors are using a PDA with, at most, VGA (640 x 480) resolution? It would not be appropriate to serve them a layout optimised for at least 800 px wide screens, or one rich in graphic elements. Practically, we need to "force" them to use our "lite" CSS (option [I] above).

The JavaScript to do this (modified from this example) is:

if (window.screen.width
document.write("[link rel='stylesheet' type='text/css'
media='screen' href='../css/single.css']");
}

I keep this in an external file, referenced with the following line in the head of each page:

<script type="text/javascript" src="http://www.bioneural.net/jscript/jscripts.js"></script>

This code works under Internet Explorer 6 (Win), Firefox 1.5 (Mac and Win), Safari 2 (Mac), and NetFront 3.3 for Pocket PC. It does not work with Internet Explorer for Pocket PC 2003, as that browser does not support web standards. Here is the result in Safari (left 800 x 600 px, right 640 x 480 px):

Here is the result in NetFront (QVGA 320 x 240 px):

If you want to force screens 800 px wide into the single column view, make the following modification:

if (window.screen.width <= 800) {

Update 22.12.05: See also this ALA article on pocket-sized design.

Actions Send this article link by e-mail Print this article without other content Follow responses to this article (comments feed) Share this on del.icio.us, Digg, StumbleUpon Translate this page: DE | ES | FR Follow tag feeds: blog, css, howto, Internet, javascript, pda, webdev. Buy for yourself on Amazon.com or Amazon.co.uk, leave a "tip"