Riad Kilani

As a web designer, I am always looking for ways to become faster and more efficient when pushing out projects. One thing that I cannot stress enough when teaching what works best for me, is the building of libraries, snippets, and even reusable buttons, classes, and boiler templates. Because of this, I am giving this tutorial on streamlining web design and development.

Boiler Templates

These are by far one of the most important tools a web designer could have. For those that don’t code that often, bringing your designs to life on the web can be a daunting task, so the use of boiler templates becomes handy.

• Dowload Files

Below is an example of how to setup a boiler template. Just open your favorite text editor and follow along.

First we need to save 2 files. We are going to create a fixed 2 column layout with a header and footer. So save one file name 2col_fixed_h_f.html , and then one named 2col_fixed_h_f.css. Put the saved files in a folder name boiler_templates, and then place them in a subfolder named 2col_fixed_h_f.

Next, we are going to start on the html file. So we will set it up as a normal page.

Now that we have our base html file, we want to add in the main elements of the page. Add the following between the body section of your html file.

  
 Place content for "header" here. 
  
Place content for  id "nav" here
  
Place content for  id "mainContent" here
  
Place content for  id "sidebar" here
  
Place content for  id "footer" here
Place content for "wrapper" here.

Notice how I have put the main content before the sidebar? This is because search engines love content. So, the main content should be read before the sidebar. We will float these to display properly.

Now, lets work on the css to get the proper display. The first thing I like to do is 0 out all default margin and paddings. That is the first line of CSS below.

* {
	margin: 0;
	padding: 0;
}
#wrapper {
	height: auto;
	width: 960px;
	margin: 0 auto;
}
#header {
	height: 120px;
	width: 960px;
}
#nav {
	height: 30px;
	width: 960px;
}
#mainContent {
	float: right;
	height: auto;
	width: 590px;
}
#sidebar {
	float: left;
	height: auto;
	width: 310px;
}
#footer {
	clear: both;
	height: 100px;
	width: 960px;
}

That’s it! This is a base layout for future use. You can go further in depth by pre styling links, fonts, and other elements, but essentially, this is a boiler template. You can create any layouts that you use constantly, and have them ready to speed up your web design process!

Please comment, and share this tutorial if you like it!