Preparing for Widescreen
How to build dynamic-width pages now

The proliferation of widescreen laptops means several things: 1) DVDs look great from airplanes and hotel rooms, 2) Widescreen desktop monitors are not far behind, and 3) Designing websites for wider screens has become more important. The metrics of screen width are already beginning to change; a quick glance at the websites for Dell, HP/Compaq and Gateway shows that at least 75% of notebooks are now offered with widescreens. From this point forward, new notebook buyers will be become widescreen users, meaning more and more people will be browsing the web at the 1280x800 resolution (the default for 15.4in widescreens). Desktop monitors of this proportion are still too expensive to enter the mainstream (rarely under $700), but within the next few years, they will surely begin to trickle into the marketplace, meaning that we could be facing an extended period where a large number of users who view any given website could be using monitors whose widths vary between 800 and 1280, or even 1600 pixels.

What does this all mean? More and more people are viewing that 750-pixel fixed-width site on a 1200-pixel widescreen monitor -- but because the 800x600 user is still hanging around at 35% or higher, we need to build sites that satisfy both ends of the spectrum. And while it is relatively easy to design a text-heavy site to liquid width (see amazon.com), working with a more graphics-heavy design becomes increasingly difficult to make "expandable". To provide a solution to this problem, I've created a hybrid using JavaScript and CSS, keeping a static main design yet also offering additional content without scrolling for widescreen users. This allows graphic designers to work within a fixed space for maximum control, but also utilizes the entirety of the viewable monitor space.

Just as many sites have started creating different style sheets for different media types (print, screen, etc.), I'm suggesting that we use a different stylesheet for different screen resolutions. With a simple JavaScript, we can test for resolution and then load the corresponding stylesheet. The mini-demo below illustrates how blocks of content can be restructured as columns or rows dependent on the width of the user's screen.

Displayed above is how the page will look when . Choose a resolution below to view how the layout changes as the width changes.

800x600
1024x768
1280x800

To see this method work on a larger scale, visit my working demo. The layout of each block of content will correspond to the minature demo above, now based on how the actual browser is resized.

If You Build It...
The basic idea is to create three main DIVs to seperate content, then test browser width to determine how to display each DIV. To do this, first create the three DIVs (which I've called "primary", "secondary" and "tertiary"). On my example, "primary" holds the main content, "secondary" holds a number of areas for promotional and/or supplemental material, and "tertiary" provides additional text, (perhaps for an author bio). In a more complex page, "primary" might be a graphics-heavy promotional area.

<div id="primary"></div>
<div id="secondary"></div>
<div id="tertiary"></div>

Style-ize
The first step towards creating this effect is to build the stylesheets -- one for each supported resolution. Once the linked stylesheets are created, a script will be written to dynamically enable the correct one. Note that I am just focusing on the structural elements of these CSS files -- the actual design is completely flexible.

Starting with a layout optimized for 800x600, stylesmall.css writes all three DIVs at 750 pixels wide:

For 1024x768 users, float the second DIV down the right edge of the page, but run the third DIV across the bottom. (stylebig.css)

Lastly, for users on extremely wide monitors, make each DIV a column so they all appear above the fold. (stylehuge.css)

Let's Make Things Dynamic
We've now created three stylesheets, one for each target screen resolution. To complete the effect, a script must be written to dynamically reference the correct stylesheet each time the page is loaded. First determine screen width, using a conditional operator (basically a condensed if..else statement), via document.body.clientWidth (IE, Firefox) or innerWidth (Opera, Firefox, Netscape).

var screenW = (document.all) ? document.body.clientWidth : innerWidth

Next, again using a conditional operator, set a variable to tell which stylesheet should be active. It is crucial to give this variable a name that is consistent with what each stylesheet has been named, as later it will be used within the indexOf command.

var theStyle = (screenW > 1200) ? 'huge' : (screenW > 1000) ? 'big' : 'small';

Once that variable is set, use it within a for loop that enables the correct stylesheet and disables the others.

var i, a;
for (i = 0; a = document.getElementsByTagName('link')[i]; i++) {
 if (a.getAttribute('href').indexOf(theStyle) != -1) {
   a.disabled = false;
 } else {
   a.disabled = true;
 }
}

The three codevious snippets of code need to be placed into a function, which I've called dynamicStyle(). Once this is created, the following command is placed within the script tag (outside of the function), in order for the content to adjust when the page is loaded or when a user resizes their browser:

window.onload = window.onresize = dynamicStyle;

At this point, the basic elements of the page are complete, but the actual content will obviously vary from page to page. Be sure to perform detailed tests at all resolutions and all browsers to ensure that your content will work with any layout that you choose. (In this scenario, I tried to keep the block elements in the secondary area similar in width and height, so they looked tidy at all resolutions. Then I floated them across the page at the smallest resolution.)

Although creating and testing three different stylesheets for every page may not be the most effective way to spend development time, a templated site can greatly benefit from this idea. Spending a little extra time up front will allow you to provide a fixed-width, graphically controlled main area without sacrificing all that extra space on wider monitors. The beauty of the internet is its flexibilty, so stop desigining pages for print -- use the space you're given!

Download files
Demo | CSS "small" | CSS "big" | CSS "huge"