Layout flexibility: To switch or not to switch

Introduction

Creating an accessible and flexible layout for a website can be a difficult task. More often than not web developers encounter problems with the flexibility of the design they are trying to produce as HTML/CSS templates. Designs should be flexible enough to work at a variety of resolutions. However some designs produced at a width of 1024px just don’t translate well to a width of 800px. The limited amount of space available at 800px often means the content on the page is too close together or text overlaps ridiculously when the font size of the page is increased. This means that the display of content on the page can be difficult to comprehend when the browser window is narrow, but looks great when the window is a lot wider. The limitations of CSS do not allow web developers to apply different styles to the page depending on the width of the browser window, at the moment it is one layout for all sighted users. So how do you make sure the layout of your website always lends itself to display the content in a way most suitable for the people viewing that content?

Optimal Approach

At Nomensa, we develop flexible websites where the display of the page is optimised for viewing at a width of 1024px. However we also make sure we cater for people viewing our websites at a minimum of 800px. The majority of our designs use a four column layout consisting of two fixed width columns, with a two flexible central columns, see Figure 1.

Wireframe showing a four column layout of a webpage

Figure 1: Wireframe showing a four column layout of a webpage

Attempting to fit four columns into a space 800px wide often results in a display which is both aesthetically unappealing, as well as difficult to read and understand, see Figure 2. 

An example of how the design of our example website ‘Nomensa IQ’ might appear in a browser at 800px wide

Figure 2: An example of how the design of our example website ‘Nomensa IQ’ might appear in a browser at 800px wide

A helping hand

So how do we solve this problem? Using unobtrusive JavaScript we can detect the size of the browser window and apply different layouts to the website using CSS. This means someone viewing the site with their browser window set at 800px wide will see one view of the site, whereas someone at 1024 and greater will have a different view, see Figure 3 and Figure 4.

The default layout of Nomensa IQ in a browser at 800px wide

Figure 3: The default layout of Nomensa IQ in a browser at 800px wide

 

The layout of ‘Nomensa IQ’ in a browser at 1024px wide with the layout switcher script applied

Figure 4: The layout of ‘Nomensa IQ’ in a browser at 1024px wide with the layout switcher script applied

This is by no means a new concept. In 2004, Cameron Adams wrote about a technique he named ‘Resolution dependent layout’ (1) using alternate style sheets to ‘switch’ the layout depending on browser width. Nomensa’s approach takes this technique one step further. Instead of using alternate style sheets, JavaScript is used to apply particular classes to elements in the HTML when the browser is over a certain width. Using CSS we can target those classes and apply different layouts to the page. If someone does not have JavaScript enabled in their browser then the layout defaults to view shown when the browser window is 800px wide.

Implementation

Using JavaScript a class of ‘layout1’ is added to the div containing the page elements to alter. This class is only added when the script detects the browser window is above 1000px in width. Using the ‘layout1’ class, CSS can then be used to change the layout of the page. In the case of the ‘Nomensa IQ’ website, the layout is changed from a single column layout to a two column layout.

HTML

<div>
<div>
<img src="images/un.jpg" alt="">
<h3 class="heading-link"><a href="#">Convoy delivers aid in DR Congo</a></h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed hendrerit feugiat lorem. Proin id tellus.</p>
</div><!-- end box -->
<div>
<img src="images/candidates.jpg" alt="">
<h3 class="heading-link"><a href="#">US Rivals in final dash for votes</a></h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed hendrerit feugiat lorem. Proin id tellus.</p>
</div><!-- end box -->
</div><!-- end box-wrap -->

CSS

.layout1 .box {float: left; width: 50%;}

Summary

As designs for websites become more complex, this technique is invaluable in making sure your website is always readable and usable at all resolutions. Depending on the type and amount of content present on the page the layout switcher script can be adapted to change the layout of a page at more than one point. Different elements on a page may also need to switch at different points, making this technique a very valuable tool for web developers when creating flexible layouts.

Example of this technique in use on Nomensa-built websites:

References

  1. http://themaninblue.com/writing/perspective/2004/09/21/