Building a New Web Site Template in 8 Steps
Today we’re going to talk about creating your own project template. This is something that I’ve done recently and I have to say, it’s already saved me hours upon hours of set-up time. I have used this in some form or another over the past few years and I can easily say that it’s not only a huge time saver, but a headache saver as well.
So what exactly do I mean by a “project template”? Well, it can mean a few different things. Here’s what I’ve got in my template currently:
- An index.html file
- A CSS directory with a reset stylesheet, a global stylesheet, and a separate stylesheet for IE6.
- An empty images directory
- A javascript directory with two files: the most recent jquery release, and the beloved belated png script.
- An empty swf directory (in case you plan on using any flash for your site).
That’s it! Well, that’s not everything, that’s just the structure of the template. More importantly, what does it do?
- Resets your browser so that standards based browsers should all render your code the same way.
- Gives you a framework for painlessly setting up a sticky footer.
- Imports jQuery in the most efficient way available
- Provides a nice starting point to keep your styles organized and legible.
- Most importantly, it saves you time!
Ok so now that we know what it is and what it does, let’s get started.
Step 1: Setting Up Your Page
Try to think about the things you do every time you start building a new web site. First, you need a doctype. You can find a list of doctypes here. You also need to include a meta tag. So, the top of your page might look something like this:
<!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=utf-8" /> <meta name="description" content="Description goes here." /> <meta name="keywords" content="" /> <meta name="robots" content="index, follow" /> <title>SITE TEMPLATE</title> <link href="css/reset.css" rel="stylesheet" type="text/css" /> <link href="css/global.css" rel="stylesheet" type="text/css" />
Now that only takes care of the doctype, meta tags and some style sheets. What about the IE6 stylesheet? Don’t worry, we’re going to take care of that next. But before we do, let’s talk about why IE6 gets its own stylesheet in the first place.
IE6 is old. It’s outdated. Frankly, IE6 sucks. This single browser has caused me more frustration than anything else in this profession. This is because IE6 renders websites so differently from more standards-based browsers that it seems almost non-sensical. One solution (one that I’m sure we’ve all been guilty of at some point) is to use the dreaded CSS hack. There are many different hacks out there. Just google “CSS hack” to see what I mean. The debate rages on about whether or not hacks are bad. I’ll say that they aren’t necessarily bad, but they’re not good either. Hacks are ugly, hard to read, and confusing if someone else new to your code takes a look at it. In addition, you don’t know how your hacks will hold up as time goes on. What if some browser gets updated and suddenly recognizes your hacks when it didn’t before? Or, maybe a brand new browser comes out that can read your hacks. Suddenly you’ve got a broken layout on a project that’s been finished for weeks, months, or even years. Lastly, your css will not validate with the inclusion of many of these hacks. If you’re a stickler for validation like I am (and you should be!), then you will prefer a different method.
To get around these issues, we can use conditional comments to feed the ie6 stylesheet to ie6 only. This way we won’t have to use any hacks, and our css will validate. Only IE6 will see the styles that were intended for IE6, keeping our main css file clean and semantically correct.
To do this, simply use the following code and edit it according to your file structure/naming convention:
<!--[if lt IE 7]>
<link href="css/ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->
Step 2: Setting Up PNG Support for IE6
Before we move on, there are a few more things that I’d like to include inside these conditional comments. Another issue that IE6 brings to the table is it’s weak support of transparent png images. If you’ve ever relied on transparent pngs to achieve a certain look or effect on a layout, only to find that IE6 renders the transparent pixels with an ugly white/grey background, you know exactly what I’m talking about. I simply cannot tell you how many hours of time I’ve wasted trying to set up a fix for this every time I start a new project. But why go through the same process time and time again when you can find one that works for you, save it in a template, and forget about it forever? Well, that’s what I’ve done in my template. As I mentioned earlier, I chose the belated png fix for a couple of different reasons.
- It works
- It’s reliable
- It’s very easy to implement
- It’s the only solution that supports background-image properties like repeat
So, to include the belated png js file, modify your previous code to look like this:
<!--[if lt IE 7]>
<link href="css/ie6.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/belatedPngFix.js"></script>
<script type="text/javascript">
DD_belatedPNG.fix('div, img');
</script>
<![endif]-->
Great! Now you’ll notice that I’m running a function in this block of code:
DD_belatedPNG.fix('img, div');
What this does is tell javascript what tags to apply png support to. Here I’ve got image tags and div tags set up by default. This means that any image tags and div tags on my page will be able to use transparent pngs. Div is included here for background-image support, for instance.
Step 3: Importing and Setting Up jQuery
Next, we import jquery from Google’s code repository with this line of code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">
In my opinion, this is a much better method of loading jQuery than by hosting it yourself and referring to it in your js folder. Google’s servers are bound to load jQuery faster than your server can, and this way you never have to worry about hosting the file yourself. You just import it from Google and you’re done.
Next, we’ll input the following and close up our head tag:
<script type="text/javascript" src="js/global.js"></script> <script type="text/javascript"> $(function() { // Do Something }); </script>
All we’re doing here is opening a new function for jQuery. There’s nothing in it right now, but when you’re ready to start scripting it will be there waiting for you. Don’t forget to include that closing tag.
Step 4: Finishing The Page Structure
We’re at the home stretch of our index file. Copy and paste the following code into your file and save it as index.html.
<div id="wrap"> <div id="main" class="clearfix"> <h1>Site Template v3.0</h1> Author: Benjamin Wasilewski Last Update: 1-14-2010 </div> <!-- closes #main --> </div> <!-- closes #wrap --> <!-- closes #footer -->
Alright! We’ve completed the markup for our html file. Now you may be wondering what some of this markup is about. Well basically what I’ve done here is added this amazing sticky footer fix. Many times when building a site, I want for the footer to always be at the bottom of the page. If the content on that page isn’t long enough, then it can be very difficult to make that footer stick to the bottom of the page anyway. This solution allows sticky footers to work every time, right out of the box. The necessary css to make this work is all included in our global css file.
Step 5: Resetting Our Styles
Ok we’re finished with our markup. Now we’ll want to take a look at our css. First, we’ll start with our reset file. Every time you start a new project, you want to make sure you use a reset css file. This will eliminate many of the headaches that you will get once you start testing across multiple browsers, since each browser renders margins, padding, etc a little bit differently. Eric Meyer has a pretty popular css reset that you can find here. I’m pretty partial to the Yahoo YUI CSS Reset, however so that’s the one I included in my project template.
Step 6: Creating our global styles
Next we’ll start writing our global css file. By the way, we call this global because it is the base stylesheet. Whatever you put in this file has the potential to effect your entire site since it is your main stylesheet. First I like to start my global stylesheet with some meta deta: my name, the project name, the date of the last update, and some common color hex values that I plan on using across the site. It should look something like this:
/*
# Author:
# Project:
# Last Update:
# Color 1: #000000
# Color 2: #000000
# Color 3: #000000
# Color 4: #000000
# Color 5: #000000
*/
Any styles that will be the same across multiple pages should be declared here. If you think this is too much, however, feel free to skip it. I just like to keep things as organized as possible. Ok so next we’ll add some generic classes. These will help during testing, or whenever I need to just add a quick float, text format, or something else like that.
/* ------------------------------------- */ /* -------->> GLOBAL SETTINGS <<-------- */ /* ------------------------------------- */ /* HEADERS */ /* COMMON FORMATTING */ /* LINKS */ /* FORMS */ /* TABLES */ /* ------------------------------------- */ /* -------->> GENERIC CLASSES <<-------- */ /* ------------------------------------- */ .bold { font-weight: bold;} .italic { font-style: italic;} .underline { text-decoration: underline;} .highlight { background: #ffc;} .alignLeft { text-align: left;} .alignRight { text-align: right;} .clear { clear: both;} .floatRight { float: right;} .floatLeft { float: left;} .nopadding { padding:0 } .noindent { margin-left:0; padding-left:0;} .nobullet { list-style:none; list-style-image:none;}
Step 7: Adding the Clearfix
Lastly, we’ll include a clearfix definition. What’s clearfix? Well you can learn more about it here but basically whenever you have a wrapping element (a div, for instance) that contains only floating elements, you will most likely run into an issue where the wrapping element will not stretch to the bottom of the content. By adding a class of “clearfix” to that element, it will automatically wrap around it’s content just as you would expect it to.
/* ------------------------------------- */ /* ------>> CLEARFIX DEFINITION <<------ */ /* ------------------------------------- */ .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .clearfix { display: inline-block; } html[xmlns] .clearfix { display: block; } * html .clearfix { height: 1%; }
Step 8: Placing your Javascript
Now technically we’re finished, but before you save and close up your files, cut all of your <script> tags out of where they are now and place them right before the closing <body> tag. Why do we want to do this? If you leave your script tags at the top, then they’ll block all your site content from loading until the scripts are finished. If you have some lengthy scripts imported, or they as slow to load, this will bog down your entire site load. Instead, place them before the closing <body> tag and your page will load faster.
And that’s it! You’ve made yourself a project template that you can use and modify to your liking with every new project. Now in some cases this may not always work perfectly for you and that’s ok. Say for instance that the site you’re building doesn’t need a footer, or one that sticks to the bottom of the viewport. Then go ahead and modify the code accordingly.
Also, I like to keep this in a file named “_SITE TEMPLATE” on my C drive. The underscore makes sure that the file is always at the top of the file list, and the capital letters (though a bit obnoxious) make it easier to spot. Follow your own naming convention, but keep it somewhere where you’ll remember it.
Finally, here is a link to a zip of my actual project template files. Remember, feel free to make any tweaks changes and customizations that you want. The purpose of this is to make the process of web design easier for you, so make it your own!
Click to download the project template
Also, don’t forget to comment! I’d love to hear your thoughts/comments/concerns with what I’ve done here. If you have a suggestion for a change, please let me know! Thanks!
Trackbacks & Pingbacks
Comments are closed.
Nice site brah!
Thanks Joey! Check back often.
You considered teaching? I’ve tried it before, and it’s not that hard. Plus, I don’t know half this stuff, which makes me think you’re probably qualified.
sweet post man, pumped for your next one!
Thanks Andy! Yeah I have thought about it, it’s just a matter of scheduling my time better. Maybe next fall. Thanks for the suggestion!