SimplyWeb

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
3. Designing Web sites for wider screens has become more important.

The metrics of screen width are already beginning to change. A quick glance at the Web sites for Dell, HP/Compaq and Gateway shows that at least 75% of laptops are now offered with widescreens. From this point forward, new laptop buyers will be widescreen users, meaning more and more people will be browsing the Web at 1280�800 resolution (the default for 15.4-inch widescreens). Desktop monitors of this proportion are still too expensive for the mainstream (rarely retailing for under $700). That will change in the next few years as they begin to trickle into the marketplace, but for a while, the range of user screen widths will be large�most people will be viewing Web sites at 800, 1280 or 1600 pixels wide.

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 35% of users are still at 800�600, 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 graphics-heavy design is more difficult to make �expandable.� To solve 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 stylesheets for different media types (print, screen, etc.), I�m suggesting that we use a different stylesheet for different screen resolutions. With simple JavaScript, we can test for resolution and then load the corresponding stylesheet. To view this technology in action, visit my working demo. If you view this page at 1024�768, you should see two columns of information at the top and a third section across the bottom. Try resizing your browser to 800�600. This secondary content will move below the main article area, above the third section. On a widescreen monitor (1280 pixels or wider), you should see all three sections as columns across the top.

This wireframe simulates how the page might look when optimized for 1280x1024 and up. Select a screen resolution from the list below to see how the layout updates as the browser width changes.

* 800x600
* 1024x768
* 1280x1024

If You Build It�

The basic idea is to create three main divs to separate content, then test browser width to determine how to display each div. To do this, first create the three divs (which I�ve named primary, secondary and tertiary). In my example, primary holds the main text, secondary holds a number of areas for promotional and/or supplemental material, and tertiary provides the author bio. On a more complex page, primary might be a graphics-heavy promotional area.

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

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

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

Next, add a script to the page that writes the stylesheet depending on what size the browser is. First find the screen width, then, using an if...else statement, write the stylesheet reference depending on that variable. Although linked stylesheets are typically referenced in the head section, this script is put within the body section of the document, so that the document.write commands work correctly.

<body>

</script language="JavaScript">

</!--

screenW = document.body.clientWidth

if (screenW > 1100 ) {

document.write('<link rel=STYLESHEET href=stylehuge.css type=text/css>')

} else if (screenW > 900) {

document.write('<link rel=STYLESHEET href=stylebig.css type=text/css>')

} else {

document.write('<link rel=STYLESHEET href=stylesmall.css type=text/css>')

}

//-->

</script>

Finally, in order for the content to adjust when a user resizes their browser, a refresh on resize command must also be added to the body tag:

<body onResize="document.location.href = document.location.href">

Stylize

We now dynamically write the linked stylesheet reference each time the page is loaded. To complete the effect, stylesheets must be created. To accommodate 800�600, stylesmall.css writes all three divs at 750 pixels wide:

#primary {width:750px;}

#secondary {width:750px;}

#tertiary {width:750px; clear:both}

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

#primary {float:left; width:750;}

#secondary {float:right; width:20%;}

#tertiary {clear:both; width:98%;}

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

#primary {float:left; width:750;}

#secondary {float:left; width:20%;}

#tertiary {float:left; width:15%;}

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 flexibility, so stop designing pages for print�use the space you�re given!

Content on this page requires a newer version of Adobe Flash Player.

Content on this page requires a newer version of Adobe Flash Player.

Preparing for Widescreen