Jun
2009
How to quickly design a quality web site
The first thing that you have to know about building a great looking website is that it’s super easy, super cheap and takes almost no time at all. The basics are already stored on your computer, and those basics can be easily put together like a sandwich to build a great website quickly.
Defining your layout
Step one, let’s decide what your new website is going to look like. Surprisingly, most website designs can be boiled down to just a few basic layouts.
Of course there are plenty more than the few I’ve laid out here but for the purpose of our project, I want to keep this simple and selected the first option, a traditional website layout with a header, footer and two columns.
The HTML used to create this basic web page layout is:
[source lang="html"]
<body>
<div id=’page’>
<div id=’header’>Page Header</div>
<div id=’content’>Content</div>
<div id=’sidebar’>Sidebar</div>
<div id=’footer’>Page Footer</div>
</div>
</body>
[/source]
To format the page properly we also need to add some basic CSS:
[source lang="css"]body {
margin: 0px;
padding: 0px;
text-align: center;
}
#page {
width: 800px;
margin-right: auto;
margin-left: auto;
text-align: left;
}
#header {
background-color: #CCCCCC;
clear: both;
height: 100px;
}
#footer {
background-color:#00FFFF;
clear: both;
height: 100px;
}
#sidebar {
background-color:#FFFFCC;
clear: left;
float: left;
width: 200px;
}
#content {
background-color:#ffffff;
clear: right;
float: right;
width: 600px;
}[/source]
As you will now see, the page content is placed in the appropriate areas for our website. For those of you who are clever with CSS, you can change to the second layout by changing the flipping the content and sidebar’s clear/float values. Technically, if you look at the HTML for this page, the sidebar appears to the right of the HTML but is formated with CSS to appear on the left, this is a Search Engine Optimization trick to move our content closer to the top of the page.
Designing the Web Page
The Header
Now that we have a basic layout for our website, we need to add a little bit of flare, to do this we need some color and some texture. The best place to get it? Flickr or other online photo database. In this case, I’m going to use a macro focus pair of blue sneakers from Fey the Ferocious.
What I want to do is use the sneaker photo as both the header and the color scheme for the website, this is make fairly easy since the photo has such rich colors. Let’s get started with the header by adding a title as well as a menu in the code as such:
[source lang="html"]<div id=’header’>
<div id=’logo’><strong>Website Name</strong></div>
<div id=’menu’>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
</ul>
</div>
</div>
[/source]
By adding this simple header structure, we’ve given the HTML everything it needs to build our header. The next step is to add some basic CSS to the file in order to format and structure the piece.
[source lang="css"]#page {
width: 800px;
margin-right: auto;
margin-left: auto;
text-align: left;
font-family: "Lucida Sans", Arial, Helvetica, Geneva, sans-serif;
}
#header {
background-color: #CCCCCC;
clear: both;
}
#logo {
background-image: url(3031455100_f5450c9645_b.jpg);
padding-top: 50px;
padding-bottom: 50px;
padding-left: 50px;
background-position: -200px;
font-size: 24px;
color: #FFFFFF;
}
#menu ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#menu li {
display: inline;
padding-right: 10px;
}
#menu a {
font-size: 12px;
color: #FFFFFF;
text-decoration: none;
}
[/source]
Take care to note that I’ve altered the #header and #page format a little to account for the new items, including the fonts I would like to use.
Here’s what my new header will look like:
The Footer
Once the header is completed, I like to work on the footer next. I’m not entirely sure why I do it this way but I find the footer equally important as the header and sometimes it seems to be an after thought on web pages, so I like to address it while I’m still fresh.
The footer has to contain some basic elements such as copyright and links, to accomplish this here’s the HTML code that I’ll use:
[source lang="html"]<div id=’footer’>
<div id=’footermenu’>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
</ul>
</div>
<p>© Copyright 2009, Website Name. All rights reserved.<br />
Header photography by <a href="http://www.flickr.com/photos/renneville/3031455100/">Ferocious Feyrannosaur</a>, <a href="http://www.thisismyurl.com">website design by Christopher Ross.</a><br />
</p>
</div>
[/source]
The CSS for the footer is equally simple:
[source lang="css"]#footer {
clear: both;
height: 100px;
font-size: 10px;
color: #666666;
margin-top: 5px;
padding-top: 5px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #000000;
}
#footermenu ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#footermenu li {
display: inline;
padding-right: 10px;
}
#footer a {
color: #666666;
text-decoration: none;
}[/source]
Since a footer is the technical, ‘legal’ notes for a website, I make it slightly smaller and lighter as to not distract from the rest of the page. Make note of the changes to the original #footer code as well.
Formating the Sidebar
Before we get into formating the sidebar we need to make sure there is some space to the right of it so that the content doesn’t butt right up against the sidebar content. To do this, we need to add a padding area inside the sidebar along with our new content. To do this, I will add a margin to the boxes we add but first we have to change the basic HTML of the sidebar.
First, let’s add a new division element with the box class and add a level two heading for each, along with a paragraph of test (for now I’ll use Lorem Ipsum) along with the link.
[source lang="html"]<div id=’sidebar’>
<div class="box">
<h2>Item 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent orci lectus, iaculis ut ullamcorper id, porttitor ut dui. <a href="#">Item 1</a></p>
</div>
<div class="box">
<h2>Item 2</h2>
<p>Sed eget placerat elit. Curabitur sit amet ullamcorper massa. Donec id viverra dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Item 2</a></p>
</div>
<div class="box">
<h2>Item 3</h2>
<p>Suspendisse in quam ac magna condimentum fringilla sit amet sed orci. Fusce interdum ligula eget mauris imperdiet iaculis. Donec eu auctor turpis. Donec ullamcorper hendrerit urna quis malesuada. <a href="#">Item 3</a></p>
</div>
<div class="box">
<h2>Item 4</h2>
<p>Quisque blandit, ante eu tempus tempus, massa lectus dignissim ipsum, id interdum dolor mauris non mi. Ut in orci turpis, non tincidunt nunc. In placerat diam in sem cursus dictum. Morbi ac urna urna. Ut nulla tellus, gravida a iaculis ut, tempus et odio. <a href="#">Item 4</a></p>
</div>
</div>[/source]
Trust me, this looks a lot more complicated than it really is! Take a look …
Now we have to add some CSS to format this content:
[source lang="css"]#sidebar {
clear: left;
float: left;
width: 200px;
font-size: 10px;
color: #666666;
padding-bottom: 20px;
}
.box {
border-bottom-width: 5px;
border-bottom-style: solid;
border-bottom-color: #CCCCCC;
padding-right: 10px;
margin-right: 10px;
}
.box h2 {
color: #3B4A88;
font-weight: normal;
margin-top: 10px;
margin-bottom: 0px;
padding-top: 10px;
padding-bottom: 0px;
}
.box p {
padding-top: 0px;
padding-bottom: 10px;
margin-top: 0px;
margin-bottom: 10px;
}
.box a {
font-weight: bolder;
color: #3B4A88;
text-decoration: none;
}[/source]
The Content
Finally, to complete the webpage we have to add some content. Again, I’ll rely on Lorem Ipsum for the purpose of putting some quick content into the website, you can add your own text later.
There are not a lot of major changes to the content in this design, if it was a client project I’d add a sizable number of CSS modifications in order to format the pages but as a demo of how to quickly design a quality website I think it’s pretty good.
You can look at the website with CSS as well as a version with no CSS to give you an idea of the changes. You’re also welcome to download the source code and use this website template as a basis for your own website.
You might also want to check out a couple simple variations to this theme:
