STYLE SHEETS

Extending the Rule Of Thirds for Web Page Layouts

Welcome to the sixth part of a seven-part series that explains how to apply fundamental design principles to your web page layouts. In this article you'll learn more about applying the Rule of Thirds to your designs.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 1

July 30, 2009

TABLE OF CONTENTS:

As I said in the section that you just read, the only thing that remains undone to get this web page layout complete is to link the CSS styles defined previously with the corresponding markup of the page in question. Thus, below I coded a new (X)HTML file, which gathers these two layers in one single place. Here’s how this file has been defined:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>2-column web page layout using the Rule of Thirds</title>

body{

padding: 0;

margin: 0;

background: #eee;

}

#container{

width: 900px;

margin: 0 auto;

background: #ccc;

}

#header{

height: 100px;

padding: 10px;

background: #fc0;

}

#sidebar{

float: right;

width: 280px;

height: 400px;

padding: 10px;

}

#content{

margin-right: 300px;

height: 400px;

padding: 10px;

background: #fff;

}

#footer{

clear: both;

height: 100px;

padding: 10px;

background: #ffc;

}

h1,h2,p{

margin: 0;

}

</style>

</head>

<body>

<h1>Header</h1>

</div>

<h2>Subheading</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>

</div>

<h2>Subheading</h2>

</div>

<h2>Subheading</h2>

</div>

</body>

</html>

It's easy to understand the above (X)HTML file, so I’m not going to bore you with irrelevant explanations. Even so, you may want to have a look at the following screen shot, which depicts pretty accurately how this sample file is displayed on the browser:

At this moment, do you realize how easy it is to build several web page layouts using the Rule Of Thirds? I hope you do! And if you still have some doubts about the effectiveness of this approach, try to create your own layouts according to this design principle and start enjoying the benefits of a pattern that truly occurs in nature.

Final thoughts

Over the course of this sixth episode of the series, you learned how to produce yet another appealing two-column web page design by applying the Rule Of Thirds. As I explained a few moments ago, this process has to do mostly with tweaking the CSS styles of the page rather than dealing with the rule itself, but hopefully the experience has been instructive for you.

Moving forward, it’s time to talk about the topic that I plan to discuss in the last chapter of the series. So far, you may have noticed that all of the web page designs built using the Rule of Thirds were produced by calculating the correct widths for each column included in the document. This task can be pretty annoying when performed on a frequent basis.

It’s possible to simplify this process by using a technique called “background grid.” As its name suggests, this approach relies on creating a background grid image and assigning it to the <body> element of a web page. In doing so, it’s much easier to position elements within the document, since there’s a reference grid that can be used as a quick visual reference.

This useful technique will be discussed in depth in the final part of the series, so if you want to put it to work for you, don’t miss the last tutorial!

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.