Web Design

Need to build a website in a hurry? Just follow these four basic steps

YOUR BOSS wants you to create a website withabout 15 pages. The catch is, she needs it by tomorrow afternoon.What do you do? Panic? Quit?

YOUR BOSS wants you to create a website withabout 15 pages. The catch is, she needs it by tomorrow afternoon.What do you do? Panic? Quit?

No. Just follow these four easysteps, and your site will be up and running in no time:

1) Plan

Before you even glance at your computer, you first need to sit down andplan out several aspects of the site. Designing websites is a lot likeputting together a jigsaw puzzle. Each piece must fit and link togetherperfectly to form a uniform picture. Ideally, the elements sit togetheron the page - text, colours, backgrounds and graphics - eachcomponent in the overall design fitting together seamlessly. Like a jigsawpuzzle, you can't force the pieces together. Well, actually youcan, but you get the same results in both cases: a big mess. Planningyour site before you start coding away may seem like a waste of precioustime, but it will save time in the long run.

Define the audience. Ican't stress this enough: know your audience. Even for a smallproject, you need to know who is going to be using it and what they arelooking for so that you can better serve their needs when planning the sitenavigation and layout.

Define and gather the content. The content isthe meat of your site. You need tocollect all of the text, graphics, and anything else that will beincluded on the pages of the site.

Define the navigation. If the siteis only a few pages, then you can get away with a single navigationalmenu. But you may need to separate the various pages into sections and use amain menu and sub-menus. Look at the content and see if you can groupdifferent pages together into like categories. These categories will formyour main menu, with each page represented in sub-menus.

Create aquick flow chart of how the visitor will navigate through the different pages ofthe site, giving a brief (just a few words) description of what willbe going on each page. You should also include the name of the HTML file forthat page so that you can reference the flow chart later when you are putting thesite together.

Sketch what a typical page should look like. You can dothis in a graphics program, such as Photoshop or Freehand, or you can usepencil and paper. You don't have to go into a lot of detail. Theimportant thing is to plan where the various elements of your layout are going to

fit into the page. For speed,you should try to make all of the pages in the site conform to the samelayout.

Get feedback. It's important to get input at this pointfrom whomever you are making this site for to make sure that this is what theywant. There is nothing worse than coding a hundred Web pages only to haveyour boss tell you that it's not what she wanted.

2) Create

Nowyou are ready to code. Create a template: using your favourite HTMLeditor, follow the sketch that you made in the planning stage. Create themenus with links, add logos or other graphics that will appear on everypage, and use dummy text for your content. This will help you see how thetext works on the page before you put in the final content. You should alsoinclude notes in your HTML showing where the different parts of the page beginand end. After you have finished testing the template, and are satisfiedthat it works perfectly, save it as TEMPLATE.html. Creating atemplate not only saves you time while you are creating the site, it does solater if you need to go back and add pages.

Set up your file structure.Make a copy of the template file for each page in the site using the flow chartyou created as a guide. You can now test your navigation and make anyadjustments.

Add the content. If you are lucky, all of the text andgraphic content is already in digital format, and all you will have to do iscopy and paste. If not, I hope you have a good scanner and can typequickly. The clock is ticking.

3) Test

Go through your site witha fine-tooth comb.

Navigation. Check each link to make sure that itnot only goes somewhere, but that it goes to the right place. Most goodHTML editors will warn you if a link is invalid, but no program can knowwhether you slipped up and used the wrong URL.

Look for spelling mistakesand typos. Again, most HTML editors will have a spell-checker,but they cannot catch everything.

Before the site goes live, getfeedback from the people you are making the site for. Have them check formistakes as well. You are probably sleep- deprived from staying up allnight to finish this thing.

4) Deploy

The final step is to put yoursite out into the wild. But even though you have tested the site while it saton your hard drive, always test the navigation again when it isonline.

General Tips

Don't try anything new. Go with whatyou know. You are under a deadline; now is not the time to teach an olddog new tricks.

Use as few graphics as possible. Graphics can eat up alot of your time. Use HTML text for your menus and titles. If you want toadd a little colour to your pages, use table background colours and CascadingStyle Sheets.

Use CSS to control typography. Use it instead of<font> tags to control the appearance of text on the screen. This cansave you a lot of time, not only because it will cut down on coding, butwhen your boss says she wants the headers to be green instead of blue, allyou have to do is make a change in one file instead of every page.

Jason Cranford Teague is theauthor of DHTML for the World Wide Web. You can find an archive of thiscolumn at WebbedEnvironments.