Joy Of Code - Web Design Training and Consulting
Joy Gems Newsletter

The Mother Of All Good Web Sites - A Web Page Template

By Bud Kraus
bud@joyofcode.com
Joy Of Code
Creator And Instructor

v3 i21
Originally Published: December 13, 2007

The other day I realized that, when it comes to web page design, we're in The Template Era. Though this era started a few years ago, I am just now realizing its importance.

Like the Ice Age, this era is not going to melt away any time soon.

Creating a web page template is like taking that first step on a long journey. The template is a page most representative of what any one page looks like on your site. It is the page (or format if you prefer) that will be created first and from which all other pages will hatch.

The mantra I give my Joy Of Code students is: Perfect your template BEFORE creating your web site. The better you get at web page design, the more you'll come to see that perfecting the template is critical to the successful execution of your design. Make a great template and your web production will proceed without needless delay.

Just what is the key to perfecting a template? Test, Test, Test. More on that in a sec.

Here are the general steps I take once I establish the design direction of my template.

Start With The (X)HTML

I segregate my content into headings, paragraphs, lists etc. I determine which images will be embedded in the page and which are decorative and will be used as CSS background images. I validate my (x)html code until I have a completely valid page. That's just the beginning of testing my template.

As it turns out, this (x)html step is pretty straightforward. I use the tags only for what they are intended - marking up my document without reference to style. If I have a list, I use list markup. If I have a heading, I use a Heading tag. If I have a paragraph, I use a P tag. If I have an image which conveys information (compared with one that is decorative) then I use the IMG tag.

This is not exactly biomedical engineering.

Then Turn To Style Using CSS

Once the structure of my page is built (that's what (x)html does), then I turn to the fun stuff - using CSS for my template's layout, typography, and color.

Inevitably this is going to take more time than the first step because it's more complicated. Usually, I will address my styling needs in that order - layout, typography, then color. It just makes a lot of sense to design in that order. In this step I'm also adding decorative images using CSS background properties. That's the way to do backgrounds - taking advantage of the ability to place one image in the background of any (x)html tag.

I validate my CSS as I go through the process. One little "}" in the wrong place and I could be in big trouble. I use validation, much like spell checking, to make sure I'm not messing up. Validation won't tell you if your design is good, but using CSS correctly is a step in the right direction.

For my template I write the CSS style rules between the <head></head>. No sense using an external CSS file at this point as I want to work with as few files as possible at this early stage.

As I near the completion of my template, I begin testing it.

Test, Test, Test

Many things can - and should be - examined as you test. You want to achieve the highest quality design possible. For example, you should evaluate how well the template performs in:

  • the current versions (and one generation back) of IE, Firefox and Safari
  • Windows, Mac OS
  • different display resolutions (display drivers)
  • various browser sizes (fully and partially open view ports)
  • other display devices (HDTV, iPhone, etc).

This doesn't even cover user testing!!

When all is said and done, you'll find yourself working mostly with CSS (provided you did a good job in the first step). I haven't even gotten to adding other page elements such as Javascript, multi-media content or animation. But you really need not go there until you have a good handle on your template and understand how well it performs - or doesn't - within many environments.

You may find the need to create more than one template for your site and that's usually derived from your main template. But it still boils down to the same matter. Don't bother producing your web site until you have a perfect template!!

As I put this JG issue to bed I see that there are two things I left out. I'll bet back to this when I revisit Templates next year.

  • An example of a template under construction
  • Where to get already made templates

Sorry that I didn't have this for you today but, hey, I can't think of everything!!