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

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

Originally Published: 2005

For those who take my online workshop, Joy Of Code, students 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 I offer you Part 1 of The Method.

How To Do It

Moving an idea from your head and onto the web can be a daunting task, especially if you've never done it before. I've had the good fortune of creating a number of small and mid-sized sites from the ground up. I've developed a process that works (and also happens to provide excellent, well defined, client approval benchmarks).

My technique emphasizes time spent in development and pre-production, rather than rushing off to create a bunch of files that you'll probably end up throwing out anyway. The rewards of spending time thinking, planning, and documenting what you're about to create before any file is made, are incalculable. If you're building a site with others, it's not an option. It's mandatory.

Yes, there are other ways of moving a site from in-the-mind to on-the-screen and I've used some of them. But I always seem to come back to my tried and true approach (or some variant) of what follows.

Don't move forward to the next step until you are finished with the step you're working on.

Step 1 - Charting

Web sites are hierarchies. They are flowcharts. The home page is king of the hill, the pages which follow below make up the pyramid.

Once you've decided what kind of site to make, start thinking about how you're going to divide your content so that it will flow from the general to the specific.

Get some index cards and start arranging them on a desk.

Move the cards around until they are placed in an order that stresses a user moving through content from the general to the specific. It's the drill down approach. You're already familiar with this idea because almost every information system you touch uses it.

It might look something like this:

The top card is the home page. The cards immediately below are Level 1 Pages, meaning one click below the Home Page. If I had cards below the first level, those would be Level 2 Pages (two clicks from Home). This is a very simple (6 pages) site, as many sites are when they are just getting started.

Since your site won't have a search capacity (that's another workshop where you'll need to know some programming), drilling down and moving sideways is how users will navigate the content of your site. Does it remind you of a site map? It is.

On each card you can write the title or purpose of the page and give it a filename. It is much easier to start this way and to see your site conceptually, before you ever make one file.

Now you've got your pages and navigation in pretty good order. Before moving on, write the name of the file on each card. Your home page is called "index.html." Always use lower case and, if there are two more more words in the filename, use an underscore (_) to connect the words. Don't forget the file extension (.html).

Step 2 - Wire Framing

Here's where your cards become .html files.

Create one .html file that will contain all of the links to the other pages. Each page will have a brief description of what that page will be used for. This can be a page narrative that includes some copy describing what the user might see or be able to do.

Pop up a new browser to see an example of a wire frame. Do you get the idea of how content is going to be chunked (divided) between pages and how the navigation will work?

The layout in a wire frame is not the layout of your page, but it can be suggestive of what a page and the site will ultimately look like. There is no style, no font selection, and not much content yet. This is not the time. Ever see a home under construction when it's in a rough state? Two by fours make up the skeleton. This is the wire frame.

I use border="2" as an attribute for all tables just to get some idea as to a possible layout.

If you spend time in Step 1, you won't have to make too many revisions in your wire frame. But if you need to revise, now's the time-- before you move forward with developing and designing a template. All the pages of your site are now in the wire frame and the navigation should be close to, if not a match with, the way you positioned your index cards.

Page 2 of 2

Subscribe To JG If You Like What You're Reading

Joy Gems is a twice monthly newsletter for people new to web design and for those moving beyond that stage.

Search
Joy Gems Archive

Best Of Joy Gems