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

A Method Of Building A Small Web Site (Part 2 of 2)

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

Originally Published: 2005

Those who take my online workshop, Joy Of Code, get to do a Project of their own choosing under my watchful eye.

Until now I did not adequately explain how to go about the task. You can be a code wizard but without a method to create your site all the code in the world isn't going to help.

You need a method to your madness so with that in mind last week I offered Part 1 of 2.

Now for the other part.

Step 3 - Templating

This is the design phase of your project. You are now ready to build one page that is most representative of your site. From there you will "build into" your wire frame in Step 4.

Choose a page to design first that is most representative of all the pages of your site. This is usually not the Home Page but a Level 1 or other interior page. How you go about designing the template will depend upon your skills with any number of computer applications.

Design is about making decisions, and once they are made, reversals are normally time consuming and expensive.

At this point, while keeping in mind your intended audience, you are asking and answering these design questions as you create your template:

  1. What is the basic layout of the page? Do you start with the most important element at the top left corner? Does the information and page design move from the general (at the top) to the specific (at the bottom)?

  2. Are you going to use fixed width or proportional sizing for the structural underpinning of your site? Is your space defined in pixels or in percentages and em units?

  3. What is going to be your basic layout structure? Tables, CSS Positioning Without Tables - (something that's rather advanced and not taught in this workshop), or something else?

  4. What's the design direction of your site? How will color be used? How are images going to be used? Will there be a combination of embedded images and images used for tiled backgrounds? Will you keep text based graphics to a minimum and let XHTML handle the copy?

  5. What kind of navigation interface are you going to use? Graphical, list markup, or links contained within table cells? How will they be grouped?

  6. What type face, font color, line-height, and other matter pertaining to typography are you going to choose?

If I am working alone, and have an idea in my head, I will do the XHTML first, then write my style rules in that file. Other designers will vary their approach based on their existing skills. Some will create a graphical composite and then convert their composite into a web page.

As I work through the above questions, I keep in mind that each page will have to stand on its own. That means giving the user enough information so that she will have a general understanding of what the site is about.

As I work on structure (XHTML) and the style (CSS), I start to validate my work using the W3C Validators, especially after making major changes.

I'm leaving out other possible requirements for the page, such as Javascript, and submitted user data processing which can only take place from the server.

Once you have perfected your template, you will probably want to design the home page. Again, some people will start with the home page, but my preference is to first build a page that is most representative of the site.

Having made that perfect template, you are now ready to build the site. All this, just to get here!!

Step 4 - Building

You now know what your site looks like and how users will move through it. I think of this step as filling in the blanks because that's just what you're going to be doing.

Remember that hideous looking wire frame? Those pages are the "blanks" that you will now complete.

At this point, I remove the styling information from my template and put it into an external .css file. Before I link all the .html files to it (we go over this in Chapter 8 - Text Styles), I validate the .css file to make sure it's up to snuff.

Here's where I create my home page. By now, I should have a refined idea that has been derived from the my template. Again, you can start with the home page as your template, but since home pages are usually not representative of your site, I normally don't consider the home page as my template.

As you're building your pages, you're creating new images, refining your style rules (exceptions which differ from the styles in your external CSS file for a particular page), and validating as needed. Hopefully, you are not adding new pages or doing anything to alter the site's structure which you began in Step 1 and in Step 2.

Final Thoughts

Don't worry if you don't understand some - or all - of the above. The process I described is very similar to how you are doing your Lab work, week by week.

Use my process as a guide. I didn't exactly go up to Mt. Sinai to get this written down on tablets. That means it's not written in stone. I use it as a model and when I need to deviate from it I do.

And so should you.

Page 1 of 2