In the first part of this five part series we covered how to start our design process from finding faults with our existing site to setting design criteria for our new site. I would recommend reading the first part of this tutorial before starting this section or some of the things I talk about will be confusing.

Introduction

This part of our tutorial will cover the layout and actual code found in the foundation of our website. First we’ll start with a basic layout. Then we will bring in our design criteria. I originally intended to add the PHP code to this page, but once I finished the first section I decided to add a an extra page for the Wordpress hooks. Otherwise this section would be really long and confusing for those of you who won’t be adding the PHP along with us.

The Layout

I want my layout to be simple and common place to prevent navigation hiccups. So I came up with a simple common two column layout that has some minor changes for usability, and to maximize available space. This design is based around screen “hot spots” which simply are the areas of the page your eyes are drawn to the most. I should mention that the pages design also revolves around how it will degrade in portable devices. We’ll cover that some more in our next section, but a full tutorial is really needed to understand exactly how small browsers handle websites. Here is a picture of that layout:

You will notice that this is a typical three column layout that has a few tweaks to the header. By color, here is how I divided the document space:

Blue – This area is for my site logo

Silver – This is for site login and meta information

Red – This is for the Sites search box

Cyan – This is where we will list the sites pages

Orange – This will be the main menu bar

Yellow – All website content will be displayed here

Green – This is the Footer

The Code

Now that we have a layout we can start working on the websites code. Remembering our design criteria at this point is very important. First and foremost we’ll be looking for performance and size. Usability comes naturally with a tried and tested layout like the one we will be using here. Since we are only using borders, white space, and background colors to dress up the site we shouldn’t have any issues from a final design perspective either. Luckily for this template I already know most of the layout requirements I have to meet. Otherwise I might have to test and retest a layout several times before getting exactly what I want when I go to dress up the appearance. Here’s the rough layout code for our layout:

<table align=”center” width=”945″ border=”0″ cellspacing=”0″ cellpadding=”0″>

<tr>

<td valign=”top”>

<div id=”header” style=”background-color:blue; float:left; height:140px; padding:5px; width:305px;”></div>

<div id=”meta_box” style=”background-color:silver; float: left; height: 140px; width: 305px; padding:5px;”></div>

<div id=”search_box” style=”background-color:red; float: left; height: 140px; width: 305px; padding:5px;”></div>

<div id=”top_menu” style=”background-color:cyan; clear: left; float:left; height:25px; width:935px; padding:5px;”></div>

</td>

</tr>

<tr>

<td valign=”top”>

<div id=”left_menu” style=”background-color:orange; float:left; height:690px; padding:5px; width:235px;”></div>

<div id=”content” style=”background-color:yellow; float:right; height:690px; padding:5px; width:690px;”></div>

</td>

</tr>

<tr>

<td>

<div id=”footer” style=”background-color:green; float:left; height:30px; width:945px;”>

</div>

</td>

</tr>

</table>

Place the code into a standard XHTML template and viola, you will see a layout just like the picture above. Don’t forget to test the site in a couple different browsers before continuing. If you see any discrepancies go back and clean up the code until everything is good. Don’t just overlook issues. This is the very fabric of your site. Errors must be fixed now.

But wait you say! There are tables in that thar document, where’s the CSS for the divisions, and what’s the deal with all this strange code? There are some very good reasons for all of this as I’ll explain.

Tables are now considered not a part of the layout of typical web documents for a number of reasons. However to meet our criteria for speed and size they fit the bill nicely as overall containers. If I had used divisions to contain all of my other divisions I would either have to make an overall division with several smaller divisions inside, or I would have to add at least another two sub container divisions to make the code flow nicely, so that I wouldn’t have weird results to contend with in the final design stages. Using a minimal hidden table like this allows me to simplify the smaller divisions, because it offers me solid boundries to place my divisions in without impeding their display across the board. Since tables are not rendered in most smaller display devices there shouldn’t be any major issues there either.

Since this is our main template, and the divisions won’t be used again as they are here there is no reason to put them into an external stylesheet. In fact it’s cleaner and faster to put them in line. There are also a couple other reasons for this. If we put the style information in line their handled in line by the browser, so if someone loads your page with a slow connection they won’t get some glob of nasty unorganized text while the page is loading. Your sites information is available faster, even if the text styles are not applied yet. However, if you really must put these in the stylesheet you can add it in the section below.

Now lets create a basic style sheet for all of our other styles and call it “styles.css”. For right now just link it directly. We’ll add the Wordpress code to link it in the next section. Put the following styles into “styles.css”.

@charset “utf-8″;

* { font-family:Arial, Helvetica, sans-serif;

color:#333333;

font-size:12px; }

a { color:#336699;}

body { background-color:#FFFFFF;

margin-top: 20px; }

table { background-color:#FFFFFF;

border:none;

min-width:315;

max-width:945;

padding:0px; }

This is just a few styles to get us started we will add more as needed. I have been asked about the “*” style in the past. Wildcards are available to stylesheets so I’m applying the “*” style to everything in the document unless we specifically override it with another style. As for links, I only want to make them in blue regardless of their status. The final style here sets some basic options for our table to insure everything works properly.

Stop right there! We’re done with our layout for now. We’ll finish working on our framework in the next part of this tutorial which will be purely on the Wordpress PHP code. If your not going to be using Wordpress, you can skip the part 3 and go directly to part 4.

Posted March 25, 2008 By Bryan
Filed under: Articles, Design, Programing, Software, Tutorials, Web, Web Dev Tutorials, news