STYLE SHEETS

Fundamental Design Principles for Web Page Layout

Many web site designers build beautiful pages, but if you ask them why they constructed a particular page in a certain way, they'll simply say that it looked good to them. There are design principles that predate the Internet; some of them even go back to ancient Greece and Rome, and they're as applicable today as they were then. If you still make pages that look good without knowing the science behind good design, this seven-part article series introduces you to concepts that you can consciously apply to your next web site design project.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 8

June 25, 2009

TABLE OF CONTENTS:

In the previous segment, you learned what the golden ratio is, and more specifically how it can be utilized for creating aesthetically pleasant web page designs, at least theoretically speaking. Now it’s time to demonstrate how this proportion can be applied to creating a simple web page layout, composed of the classical header and footer sections and two primary columns.

I’m going to create the structural markup of the pertinent web page. The appropriate widths of the columns and other sections will naturally be assigned via a few simple CSS styles.

That being said, here’s how the bare bones structure of this web page looks:

<!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 Golden Ratio</title>

</head>

<body>

<h1>Header section</h1>

</div>

<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>

<h2>Main column</h2>

</div>

<h2>Footer section</h2>

</div>

</body>

</html>

As you can see, the markup of the above (X)HTML file speaks for itself. In this specific case, the file in question is comprised of a main container that wraps all the remaining sections, which have been identified as “header,” “sidebar,” “content” and finally “footer.” So far, the structure of this sample file should be fairly easy for you to grasp, since it looks similar to other files that you’ve probably coded hundreds of times before.

Admittedly, this part of the example is rather boring. However, this is about to change, since in the course of the following section, I’m going to code the CSS styles that will apply the golden ratio to the file shown previously.

To see how the divine proportion will be implemented by means of some simple CSS code, you’ll have to read the upcoming segment.

Next: Applying the golden proportion to web design >>