Transformer layout

Superceded!

A more flexible alternative to this approach is now available.

As monitors get larger, higher display resolutions are more common, and mobile/handheld computing becomes more prevalent, web developers are torn between the urge to expand horizontally, and the need to support smaller display areas.

Traditionally, websites were developed to fit the width of the smallest common denominator, while leaving larger displays mostly empty.
For a time, the lowest common display was 640 by 480 pixels. Over time this changed to 800 by 600 pixels, and according to some statistics, 1024 by 768 pixels is the most common resolution for web users today.

There are many techniques available to the CSS-savvy web developer for satisfying the demands of small or large displays. But unfortunately, while they support one size well. they often fail to suit any other.

The following transformer layout will utilise several CSS techniques in an attempt to create an attractive layout that:

  • supports all sizes of handheld devices
  • fits on screens with resolution of 640 by 480 pixels
  • utilises all the real estate available to a 1024 by 768 pixels screen
  • supports all other screen resolutions while maintaining reasonable text line lengths.

The techniques

The following techniques will be used to create our transformer layout:

Solid semantic markup

The transformer layout puts semantic markup to good use in order to prioritise the value of screen real estate.

In a linear sense it is obvious that the most important content should appear first, and the least important last, so that is how we will structure our content sections:

<div id="pagecontainer">
	<div id="primary">
		<h2>Primary content</h2>
		<p>...</p>
	</div>
	<div id="secondary">
		<h2>Secondary content</h2>
		<p>...</p>
	</div>
	<div id="tertiary">
		<h2>Tertiary content</h2>
		<p>...</p>
	</div>
</div>

The content areas can be used for whatever content is appropriate to your website or application.

By prioritising the content sections we will be able to position them later and put them in areas of appropriately valuable screen real estate.

Elastic layout using em sizing

To ensure maximum flexibility, all lengths will be specified in em units.

This results in an elastic design, in which every aspect of the layout will resize proportionally if the text size is changed.

Example:

#primary {
	width: 47em;
}

#secondary, #tertiary {
	width: 23em;
}

Seperate handheld stylesheet

It is becoming common practise to use seperate CSS handheld media stylesheets to accomodate smaller displays, so this should be fairly straight forward.

In this case the handheld stylesheet should just ensure that all content is displayed in one column, and that there is limited vertical and horizontal whitespace

This will maximise content width and minimize vertical scrolling.

Transforming the layout using floats

The key to the transformer layout is that it will fold up into a single column when screen resolution is limited.

This is achieved using a simple series of CSS floats and some width restrictions:

#pagecontainer {
	max-width: 72em;
	min-width: 47em;
}

#primary {
	width: 47em;
	float: left;
}

#secondary, #tertiary {
	width: 23em;
	float: left;
}

Internet Explorer 6 (IE6) doesn’t support the CSS2 max-width or min-width properties, but the page will display fine anyway, it will just prevent us from centre aligning the layout for IE6.

The result

This will provide us with a very basic but very flexible layout.

By adding some content, padding and other tweaks you can end up with a more complete layout.

Posted in

Leave a reply