Fundamental Design Principles for Web Page Layout - Applying the golden proportion to web design
(Page 4 of 4 )
Since I defined the structural markup of a basic (X)HTML file in the segment that you just read, I'm now going to add some CSS styles to it to create a web page layout whose dimensions stick to the golden proportion. Doing this will make the whole web document look more pleasant and harmonious.
Essentially, the CSS code that performs the aforementioned task is the following:
body{
margin: 0;
padding: 0;
background: #eee;
}
/* main wrapper */
#container{
width: 800px;
margin: 0 auto;
}
/* header */
#header{
padding: 0 10px 0 10px;
height: 100px;
background: #fc0;
}
/* side column */
#sidebar{
float: left;
width: 287px;
height: 400px;
padding: 0 10px 0 10px;
background: #ccc;
}
/* main column */
#content{
margin-left: 307px;
height: 400px;
padding: 0 10px 0 10px;
background: #fff;
}
/* footer */
#footer{
clear: both;
height: 100px;
padding: 0 10px 0 10px;
background: #ffc;
}
/* headers */
h1{
font: bold 1.2em "Trebuchet MS", Tahoma, Sans-serif;
color: #000;
margin: 0;
}
h2{
font: bold 1.1em "Trebuchet MS", Tahoma, Sans-serif;
color: #444;
margin: 0;
}
/* paragraphs */
p{
font: normal 11px/1.75em Verdana, Tahoma, Arial, sans-serif;
color: #666;
margin: 0 0 15px 0;
}
As I explained before, the above CSS styles are responsible for applying the golden ratio to the markup of the web page created in the previous section. Indeed, it’s clear to see how this process is accomplished in this particular case; the width of the main container is 800px, while the width values assigned to the sidebar and the content area are 307px and 493px respectively.
Having demonstrated how to built a simple two-column web page layout that implements the golden ratio, it’s necessary to merge the CSS styles coded above along with the corresponding markup into one single (X)HTML file. This way, you can see how the complete web document is rendered on the browser after applying the divine proportion.
The sample file below does that:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>2-column web page layout using the Golden Ratio</title>
<style type="text/css">
body{
margin: 0;
padding: 0;
background: #eee;
}
/* main wrapper */
#container{
width: 800px;
margin: 0 auto;
}
/* header */
#header{
padding: 0 10px 0 10px;
height: 100px;
background: #fc0;
}
/* side column */
#sidebar{
float: left;
width: 287px;
height: 400px;
padding: 0 10px 0 10px;
background: #ccc;
}
/* main column */
#content{
margin-left: 307px;
height: 400px;
padding: 0 10px 0 10px;
background: #fff;
}
/* footer */
#footer{
clear: both;
height: 100px;
padding: 0 10px 0 10px;
background: #ffc;
}
/* headers */
h1{
font: bold 1.2em "Trebuchet MS", Tahoma, Sans-serif;
color: #000;
margin: 0;
}
h2{
font: bold 1.1em "Trebuchet MS", Tahoma, Sans-serif;
color: #444;
margin: 0;
}
/* paragraphs */
p{
font: normal 11px/1.75em Verdana, Tahoma, Arial, sans-serif;
color: #666;
margin: 0 0 15px 0;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Header section</h1>
</div>
<div id="sidebar">
<h2>Side column</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>
<div id="content">
<h2>Main column</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>
<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>
<div id="footer">
<h2>Footer section</h2>
</div>
</div>
</body>
</html>
Simple to code and read, isn’t it? Now, if you test the previous sample file on your own browser, you’ll be confronted with a typical web page layout comprised of two primary columns. While at first glance this is nothing spectacular, the layout follows a pattern that occurs frequently in nature, meaning that any content added to the page’s sections will look harmonious and pleasant to human eyes.
With this final example, I’m finishing this introductory guide to applying some fundamental graphic design principles, and more specifically the golden ratio, when creating web page layouts. In addition, feel free to modify the dimensions of the columns of the above web page, and apply again the golden proportion to see how they’re displayed in each case.
Final thoughts
In this first installment of the series, I explained how to apply the golden ratio in the creation of a basic, two-column web page layout. As you saw previously, once you grasped what this ratio is, its implementation via CSS is really straightforward.
Since I worked with a sample fixed design in this article, in the next one I’m going to demonstrate how the golden proportion can be applied to liquid web page layouts. Now that you’ve been warned about the subject of the upcoming tutorial, you can’t miss it!
| 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. |
/ 6 
