Start Your Design with XHTML Templates
By Kevin Hale
Most of us think of a “template” in terms of a complete finished design ready for you to insert stories in place of dummy text. But, a general template, like the ones given in this tutorial, can help you save a lot of initial set-up time, prior to the key design decisions you make during the website creative process. These templates are optimized for XHTML mark-up.
Introduction
Today, I’m going to give you a peak at some templates I use in my workflow to help me get a running start on new web development projects. In addition to the XHTML templates, I’ll go over some CSS templates and some XHTML markup examples I’ve made to help me create style guides for various sites.
A long time ago, there used to be a time when the following template or guideline could give you a great head start.
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Ah, good times. Anyway, the world is a bit more complicated now and while the above outline is great for teaching an HTML 101 class, a good web developer following the current trends in web standards knows you need a LOT more code just to start a decent web page.
In fact, getting started on the HTML markup is one of the most time consuming tasks a web designer can face. Inspiration—easy. Multiple comps—no problem. Remembering all the different CSS selectors needed to cover all the configurations of styles that may come up on a blog post—harder than getting Africa as the final continent challenge on PBS’s Where in the World is Carmen Sandiego.
Anyway, before I got smart and started using customized CSS and XHTML templates, I usually found myself opening up prior projects just to answer the same questions over and over again: How do I include an external JavaScript file? How do I properly form a meta tag? How do I make comments in a CSS file? What’s the best way to structure a form? My friends, it’s time to stop the inefficiency. Let’s get to it.
The Files
- XHTML Template 1
- XHTML Template 2
- CSS Template 1
- CSS Template 2
- XHTML Markup Template
- Online Style Guide Template
- All Templates Zipped
XHTML Template 1
The header on an XHTML page is like that form on the clipboard at the doctor’s office—preliminary paperwork. The following template is focused on getting a site’s header structure compliant and complete. Except for the doctype, you just fill in the blanks.
<!-- Doctype : Choose one and delete this comment -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
</title>
<!-- Meta Tags -->
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<meta name="robots" content="index, follow" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<!-- Favicon -->
<link rel="shortcut icon" href="" />
<!-- CSS -->
<link rel="stylesheet" href="" media="screen,projection" type="text/css" />
<link rel="stylesheet" href="" media="print" type="text/css" />
<!-- RSS -->
<link rel="alternate" href="" title="RSS Feed" type="application/rss+xml" />
<!-- JavaScript -->
<script src="" type="text/javascript"></script>
</head>
XHTML Template 2
Template 1 is great for understanding what information needs to be filled in, but bad for rapid development and styling because the ‘.css’ and ‘.js’ files are attached. That means I have to create two more documents just to work on the behavior and design layer of a page. When I’m working on a deadline or a one page prototype, managing three files is sometimes an unnecessary burden. Adding embedded CSS and JavaScript sections to my header allows me to start coding and styling almost immediately. Instead of showing the whole template again, I’ll just show you the revised sections:
REVISED CSS SECTION
<!-- CSS : Include and embedded versions-->
<link rel="stylesheet" href="" media="screen,projection" type="text/css" />
<link rel="stylesheet" href="" media="print" type="text/css" />
<style type="text/css">
<!--
/*
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Title :
Author :
URL :
Description :
Created :
Modified :
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
*/
/* ----- CSS ----- */
-->
</style>
REVISED JAVASCRIPT SECTION
<!-- JavaScript : Include and embedded version -->
<script src="" type="text/javascript"></script>
<script type="text/javascript">
<!--
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
//
// Title :
// Author :
// URL :
//
// Description :
//
// Created :
// Modified :
//
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
// JavaScript
window.onload = function(){}
//-->
</script>
These embedded sections also keep me from forgetting to properly document my ‘.js’ and ‘.css’ files. Now there’s no excuse because it’s just too easy. The JavaScript section also includes a blank ‘window.onload’ function just in case I need to unobtrusively run any scripts on page load. Once everything starts working nicely, I just copy and paste the CSS and JavaScript to external files for proper file management.
CSS Template 1
If I know I’m going to be working on a site that’s going to need a massive style attack, I like to use this template as a sort of preflight checklist to make sure I cover all my selector bases. If different areas on a page (like ‘navigation’ and ‘primaryContent’) are using two different styles of a group of selectors (like an unordered list), I just copy, paste and add the appropriate ids or classes. Whatever sections I don’t use, I just delete. Here’s a sampling from CSS Template 1:
/* ----- IDS ----- */
#container{
}
#primaryContent{
}
#secondaryContent{
}
#navigation{
}
#footer{
}
/* ----- CLASSES ----- */
.hide{
}
.show{
}
/* ----- HEADINGS ----- */
h1{
}
h2{
}
h3{
}
h4{
}
/* ----- LISTS ----- */
li{
}
li p{
}
ol{
}
ul{
}
ol li{
}
ul li{
}
/* ----- IMAGES ----- */
img{
}
img a{
}
img a:hover{
}
/* ----- LINKS ----- */
a{
}
a:hover{
}
a:visited, a:active, a:focus{
}
a:visited{
}
a:active{
}
a:focus{
}
/* ----- FORMS ----- */
form{
}
fieldset{
}
legend{
}
label{
}
input{
}
textarea{
}
input, textarea{
}
select{
}
optgroup{
}
option{
}
/* ----- TABLES ----- */
table{
}
caption{
}
thead{
}
tbody{
}
tfoot{
}
tr{
}
tr .alt{
}
th{
}
td{
}
CSS Template 2
You know what sucks? Remembering and then filling in all the appropriate CSS properties for all those selectors. I’ve noticed most of my projects, use the same properties for these selectors over and over again. So I created another template based off of CSS Template 1 that adds my most commonly used CSS properties to all the CSS selectors. Here’s a sample of what that looks like in CSS Template 2:
/* ----- CSS ----- */
*{
margin:;
padding:;
font-family:;
font-size:;
}
body{
margin:;
padding:;
background:;
}
/* ----- IDS ----- */
#container{
width:;
margin:;
padding:;
background:;
text-align:;
}
#primaryContent{
position:;
float:;
width:;
margin:;
padding:;
background:;
text-align:;
}
/* ----- CLASSES ----- */
.hide{
display:none;
}
.show{
display:block;
}
/* ----- PARAGRAPHS ----- */
p{
font:;
color:;
font-size:;
font-family:;
font-style:;
font-weight:;
font-variant:;
text-align:;
text-indent:;
text-decoration:;
text-shadow:;
text-transform:;
letter-spacing:;
word-spacing:;
}
/* ----- LISTS ----- */
li{
listy-style:;
list-style-type:;
list-style-image:;
list-style-position:;
float:;
margin:;
padding:;
}
/* ----- LINKS ----- */
a{
font:;
color:;
text-decoration:;
border-bottom:;
}
a:hover{
color:;
background-color:;
border-bottom:;
}
a:visited, a:active, a:focus{
color:;
background-color:;
border-bottom:;
}
Anyway, you get the point. One thing to notice is that I’ve included shorthand selectors like ‘font’ and ‘list-style’ with the individual properties they replace. That’s just to give me more options during the design and development phase.
XHTML Markup Template
But what good is it to have all those CSS selectors and properties if you’ve got no XHTML markup to demo what they look like? XHTML Markup Template is my version of Lorem Ipsum for web design. Here’s a sample from this template:
<div id="container">
<h1><a href="" title="Test Link">Untitled</a> - Online Style Guide Template (h1)</h1>
<p>Title : <em>Title of this Document</em><br />
Description : <em>A description of this document that explains
how this guide should be used.</em></p>
<p>Author : <em>The Author</em><br />
URL: <em>http://url.to.reference.com</em><br /></p>
<p>Created : <em>Month DD, YYYY</em><br />
Modified : <em>Month DD, YYYY</em><br /></p>
<hr />
<div id="navigation">
<h2>Navigation (h2)</h2>
<ul>
<li>Unordered List - First item.</li>
<li>Another item with <a href="" title="Test Link">a link.</a></li>
<li><a href="" title="Test Link">Another item that is linked</a></li>
<li>Last item.</li>
</ul>
<ol>
<li>Ordered List - First item.</li>
<li>Another item with <a href="" title="Test Link">a link.</a></li>
<li><a href="" title="Test Link">Another item that is linked.</a></li>
<li>Last item.</li>
</ol>
</div><!-- navigation -->
<hr />
<div id="primaryContent">
<h2>Primary Content (h2)</h2>
<h3>Headline the Third (h3)</h3>
<h4>Headline the Fourth (h4)</h4>
<p>First paragraph. In <a href="" title="Test Link">typography</a>, a paragraph
is a block of text. Paragraphs are the medium-size unit of <
a href="" title="Test Link">human-language text</a>. A group of sentences developing a
single idea from a topic sentence. Some words in sentences
need to be <b>bolded</b>, <i>italicized</i>, <strong>strengthened</strong>
or <em>emphasized</em>.</p>
<p>Another paragraph. In typography, a paragraph is
a block of text. Paragraphs are the medium-size unit
of human-language text. A group of sentences developing
a single idea from a topic sentence.</p>
<ul>
<li>Unordered List - First item.</li>
<li>Another item with <a href="" title="Test Link">a link.</a></li>
<li><a href="" title="">Another item that is linked</a></li>
<li>Last item.</li>
</ul>
<ol>
<li>Ordered List - First item.</li>
<li>Another item with <a href="" title="Test Link">a link.</a></li>
<li><a href="" title="Test Link">Another item that is linked.</a></li>
<li>Last item.</li>
</ol>
One thing to notice about this template is that it lacks examples of image elements in context. Because these elements are contingent upon external files being present, I prefer to include them on a case-by-case basis.
Online Style Guide Template
If you’re like me and come from a print design background, you’ll see the value of this template very quickly. Style guidelines make it very easy to communicate and illustrate design points for a team of designers and developers.
This template is basically all the other templates put together on one page. The Online Style Guide Template ridiculously reduces the time to create an extensive set of markup rules. If you’re using Firefox and have the Web Developer Toolbar installed, I highly recommend using “Edit CSS” to watch the page tranform as you style. When you’re done, just save out your modified CSS to an external file and update the HTML markup to reflect your changes. Just as good as the fancy CSS editing programs, but free.
This template also allows me to test more experimental CSS designs safely and see how it might affect other elements and properties on a page.
Conclusion
One of the great things about creating these templates is that it taught me a lot about the details hidden in the specs for XHTML and CSS . I learned about elements, selectors and properties I never would have considered using had I not sat down and created these templates. Basically, these templates not only made me a faster web designer, they made me a better one too.
Obviously, every designer and developer works differently. Using XHTML and CSS templates might not be the best way for you to start your web projects. I just know that it’s the way I start them and it helps significantly. Plus, I figure starting with something to fill in feels much more productive than staring at a blank document in Dreamweaver. Momentum is a powerful thing.
If you don’t like something I’ve done—no worries—just manipulate the templates and adapt them to your own workflow. If you have any additional ideas or notice any errors, definitely let me know so I can update/change them, because ultimately, I believe good templates make good web sites. Now get out there and get started.
About the Author: Kevin Hale is responsible for championing good user experience and brilliant interface design. As much as Kevin likes keeping things clean and reliable, he loves innovation. More than that, he loves asking for innovation in the middle of the night from his favorite two people, The Brothers Campbell. As a child, Kevin was the kid in class who ate a box of crayons for a dollar. Hale is one of the “Hosts” at ParticleTree.com.
Article released under a Creative Commons Attribution 2.5 Generic License.
Written by: Scott Frangos
This entry was posted on Wednesday, January 2nd, 2008 at 8:08 am and is filed under OS WebMaster, Web Help. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
February 6th, 2008 at 2:41 pm
[...] Start Your Design with XHTML Templates [...]