A websites' structure from A to Z
You created a great design for you website but now you're not sure how to start coding it? How to structure it? How do you use CSS to display that beautiful design in the browser? Well... this tutorial should answer all those questions.
A mock-up
A rather simple design for the company Simple Designs.
Visualizing the structure
Now with a design in mind, you should see 5 sections: Branding, Navigation, Content, Sidebar and Site Info.
Start with the mark-up
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">
<head>
<title>Simple Designs :: A web design portfolio by Karinne Legault</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div id="branding"></div>
<div id="navigation"></div>
<div id="content"></div>
<div id="sidebar"></div>
<div id="siteinfo"></div>
</body>
</html>
You'll notice that I kept the same titles we used to define our sections in the HTML. Most often than not, you will see designers use HEADER instead of BRANDING but BRANDING is a much more meaningful word that describes the content for this div. Same reasoning with SITEINFO. Many use FOOTER but what's in a footer? Site information is usually in there like address or phone numbers or just more information pertaining to the site. Always try to be as descriptive as possible when creating your sections (ID)
Now that we have our structure skeleton all checked, let's add the content.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">
<head>
<title>Simple Designs :: A web design portfolio by Karinne Legault</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div id="branding">
<h1>Simple Designs</h1>
<h2>A web design portfolio by Karinne Legault</h2>
</div>
<div id="navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/company/about">About</a></li>
<li><a href="/services/">Services</a></li>
<li><a href="/portfolio/">Portfolio</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</div>
<div id="content">
<h2>I create clean, simple and usable websites for small
business and organizations</h2>
<p>This is my web design portfolio.</p>
<p>I'm a designer and a coder. I can create a site from
an idea or take an existing site and make it more accessible
and search engine friendly without costing you an arm and a leg.</p>
<p>Have a look around and contact me when you're
ready. Hopefully I can help you get the idea
from your mind onto the web.</p>
<h3>Latest additions to the portfolio</h3>
<div class="postfolio"><a href=""><img src=""
width="200" height="200" alt="Company A"></a></div>
<div class="postfolio"><a href=""><img src=""
width="200" height="200" alt="Company B"></a></div>
<div class="postfolio"><a href=""><img src=""
width="200" height="200" alt="Company C"></a></div>
</div>
<div id="sidebar">
<div class="short_about">
<h4>A little bit about me</h4>
<p>Hello! My name is Karinne Legault. I'm a web
designer by day and a ... well I
need my beauty sleep so ... I sleep at night.
<a href="/about/">Want to know more?</a></p>
</div>
<h4>Lately on Simple Designs</h4>
<p>Welcome to the new version of Simple Designs. We are quite happy
with this new layout.Please ... let us know what you think of it.</p>
<div class="latest_dates">Tuesday, November 6th, 2007</div>
<p>Out with the old and in with the new! Just launched is the
snew site for Company A. A great new
design to complement the new energy from their new CEO.</p>
<div class="latest_dates">Friday, October 26th, 2007</div>
</div>
<div id="siteinfo">
<div class="one">
<ul class="supp_nav">
<li><a href="/">Home</a></li>
<li><a href="/company/about/">About</a></li>
<li><a href="/services/">Services</a></li>
<li><a href="/portfolio/">Portfolio</a></li>
<li><a href="/company/privacy">Privacy</a><li>
<li><a href="/contact/">Contact</a></li>
</ul>
<p>Copyright © 2007 Karinne Legault</p>
</div>
<div class="two">
<p>Proudly hosted by <a href="">HostingCompany</a></p>
</div>
</div>
</body>
</html>
If you copy all that code and open it up in your favourite browser, you should basically see what a person on a screen reader will see: content.
While it's not pretty, it serves its purpose. With the headings in place, once can look at the content and discern the areas and read the website like a book.
Let's style it!
We will be putting all our styles in a separate stylesheet called styles.css so let's add a link to this in the <head> of our HTML document
<head>
<title>Simple Designs :: A web design portfolio by Karinne Legault</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" media="screen"
href="css/styles.css">
</head>
Now we'll dive in and start setting up the basic styling for our site.
- We want to remove the default margins and padding set by the browser.
- We want to use Verdana as the main font for the content and set it as 12px.
- We want links to be bold, underline and with color #4ecdc4 and not underline when on hover state.
- Assign the different size and colors to the different headings used throughout the site.
/*** COMMON ELEMENTS
********************************/
html, body {
margin: 0;
padding: 0;
}
body {
font: 12px Verdana, Geneva, sans-serif;
background-color: #fff;
}
a:link, a:visited, a:active {
color: #4ecdc4;
font-weight: bold;
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
h2 {
color: #556270;
font-size: 24px;
}
h3 {
color: #c44d58;
font-size: 18px;
}
h4 {
color: #c44d58;
font-size: 14px;
}
Now that we've settled the basic styling for our common elements, we'll tackle each section individually.
One thing you notice when you look at the mock-up provided; there are a lot of colors and bars and big backgrounds, etc... but all this design will be using is 4 images. The rest will be set in the CSS.
BRANDING
Our branding will use the nice image to display the company name and slogan so we need to add that image in our HTML
<div id="branding">
<img src="i/branding.jpg" width="515" height="105"
alt="Simple Designs :: A web design portfolio by Karinne Legault">
<h1>Simple Designs</h1>
<h2>A web design portfolio by Karinne Legault</h2>
</div>
Now we need to hide the <h1> and <h2> by setting the two elements to position: absolute; and giving them a text-indent: -9999px;. This method was first introduced by Mike Rundle back in August of 2003 and I believe it to be the most accessible image replacement.
/*** BRANDING
********************************/
#branding {
background: #fff url(../i/branding-bg.jpg) repeat-x 0 0;
height: 118px; /* 142px */
padding-top: 24px;
overflow: hidden;
}
#branding h1, #branding h2 {
position: absolute;
text-indent : -9999px;
}
NAVIGATION
We will be using a list to display the navigation. As explained by Mark Newhouse in his Taming List article from A List Apart magazine:
These are often marked up as a string of links, often in separate DIVs or paragraphs. Structurally, however, they are a list of links, and should be marked up as such.
<div id="navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/company/about">About</a></li>
<li><a href="/services/">Services</a></li>
<li><a href="/portfolio/">Portfolio</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</div>
And the CSS:
/*** NAVIGATION
********************************/
#navigation {
background: #fff url(../i/navigation-bg.jpg) repeat-x 0 0;
height: 65px;
}
#navigation ul {
margin: 0;
padding: 0 0 0 15px;
list-style: none;
}
#navigation ul li {
float: left;
display: inline;
padding-right: 10px;
}
#navigation ul li a {
height: 29px;
min-width: 10px;
color: #000;
font-size: 18px;
font-weight: normal;
letter-spacing: 1px;
text-decoration: none;
display: block;
padding: 6px 7px 0;
}
#navigation ul li a:hover {
background-color: #7fefe7;
}
In the #navigation ul { }, the list-style: none; property is what removed the bullets from the unordered list element. display: inline; and float: left; will set the list elements to display in a line.
A simple hack
If you look at the present site in Internet Explorer 6, you will notice that the navigation is not displaying inline. This is because IE6 does not support the min-width property. We need to add width: 10px; property for IE6 and we will do this by using conditional comments.
Add this in the <head> of your document
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" media="screen" href="css/ie.css">
<![endif]-->
/*** NAVIGATION
********************************/
#navigation ul li a {
width: 10px;
}
CONTENT
Before we start we will add a #content_wrapper div to contain both the #content and the #sidebar div to limit the space used to 780px.
<div id="content_wrapper">
<div id="content">
...
</div>
<div id="sidebar">
...
</div>
</div>
/*** CONTENT - WRAPPER
********************************/
#content_wrapper {
width: 760px;
overflow: hidden;
padding: 0 10px;
}
The overflow: hidden; property is there to clear the floats:
A common problem with float-based layouts is that the floats' container doesn't want to stretch up to accommodate the floats. If you want to add, say, a border around all floats (ie. a border around the container) you'll have to command the browsers somehow to stretch up the container all the way.
The CONTENT and SIDEBAR area are side by side. We will be floating both of them; one left and one right. Never use absolute positioning or relative positioning for such simple tasks. The float property is much simpler.
/*** CONTENT
********************************/
#content {
float: left;
width: 480px;
}
/*** SIDEBAR
********************************/
#sidebar {
float: right;
width: 230px;
}
Pretty simple huh? Hang in there... we're almost done!
SITE INFO
For the site info, we will do the same thing with did with the CONTENT section and that is add a #siteinfo_wrapper to contain the information in a 780px box.
<div id="siteinfo">
<div id="siteinfo_wrapper">
<div class="one">
...
</div>
<div class="two">
...
</div>
</div>
</div>
Since we've already declared this information for the #content_wrapper, we will just add in the #siteinfo_wrapper to the declaration.
/*** WRAPPERS
********************************/
#content_wrapper, #siteinfo_wrapper {
width: 760px;
overflow: hidden;
padding: 0 10px;
}
As with the content section we have 2 areas that we will float; again... one left and one right.
/*** SITE INFO
********************************/
#siteinfo {
background: #fff url(../i/siteinfo-bg.jpg) repeat-x 0 0;
height: 70px;
color: #fff;
font-size: 11px;
margin-top: 15px;
}
#siteinfo .one {
float: left;
width: 480px;
padding-top: 18px;
}
#siteinfo .two {
float: right;
width: 230px;
padding-top: 18px;
}
We also have added a supplementary navigation to the SITE INFO that we have put in a list again.
<div id="siteinfo">
<div id="siteinfo_wrapper">
<div class="one">
<ul class="sup_nav">
<li><a href="/">Home</a></li>
<li><a href="/company/about/">About</a></li>
<li><a href="/services/">Services</a></li>
<li><a href="/portfolio/">Portfolio</a></li>
<li><a href="/company/privacy">Privacy</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
<p>Copyright © 2007 Karinne Legault</p>
</div>
<div class="two">
<p>Proudly hosted by <a href="">HostingCompany</a></p>
</div>
</div>
</div>
And the CSS should look like this
ul.sup_nav {
margin: 0;
padding: 0;
list-style: none;
}
ul.sup_nav li {
display: inline;
border-right: 1px solid #fff;
margin-right: 10px;
padding-right: 10px;
}
The colors of the links need to change from the turquoise to white.
#siteinfo a:link, #siteinfo a:visited, #siteinfo a:active {
color: #fff;
font-weight: bold;
text-decoration: underline;
}
#siteinfo a:hover {
text-decoration: none;
}
We're done!
SOME EXTRAS
Notice that this doesn't exactly look like the original mock-up; the portfolio boxes are still one under the other, it's missing that pink "About" box and the green background for the date so... if you have some time, here's the code to get all those things sorted.
Portfolio boxes
This is a simple matter of floating each of them
portfolio {
float: left;
width: 145px;
height: 105px;
margin-right: 5px;
}
.portfolio a:link img {
border: #4ecdc4;
}
The big pink "About" box
By simply adding a background and some padding to the div containing the "About" info, you can make simple things like this stand out
#sidebar .short_about {
background-color: #ff6b6b;
padding: 8px;
}
.short_about h4 {
color: #000;
margin: 0;
}
.short_about a {
color: #000;
}
.short_about a:hover {
text-decoration: none;
}
We've also changed the color of the heading and link color
Green background for dates
Again, just adding some background here
.latest_dates {
background-color: #c7f464;
font-size: 9px;
}
Conclusion
Creating the mark-up is the most important factor here. Once you have it defined perfectly, you can change the look of a site without even diving into the HTML.
A perfect example of this is the CSS Zen Garden. Every design uses the exact same HTML file. Only a different CSS stylesheet (and accompanying images) are loaded.
Happy coding!
About the author
Karinne Legault has 10 years of experience in the Web Design industry. You can see her portfolio at karinnelegault.com.
