Build a Web Page Using Modules

In the same way modular homes are easily assembled using a set of independent sections, or modules, the Web design process can be made much simpler using pre-built elements.

The idea is to create a set of modules that you can pull together for any future design projects. You might use only a few modules per project, or you might use all of them at some point on every page you build.

The basic list of modules you might create are:

- Head

- Body/Table

- External Stylesheet

- Standard Includes

- Menu Blank

Begin by populating your document head with the relevant data, and then save your progress. Then go back and strip away the unique attributes, leaving only the raw tags.

For instance, delete the text between your title tags, and remove the info in your META tags, leaving only the HTML tags in place. Now save this document as head.html; it will look something like this:

< head >
< title > < / title >
< META NAME="Description" CONTENT="" >
< META NAME="Keywords" CONTENT="" >
< / head >

You have just created a head module you can use as the base for all future templates. And since you saved your initial document you can simply open it back up and continue working.

Use this modulation for any specific parts of a page you think you'll be using often. As we've already indicate above you should set up modules for your page body, including at least one type of table module.

Also you should have a base CSS stylesheet that you can open and begin adding data to for any design project you start. If you use server side includes to parse your menus and Adsense blocks you should also have a baseline code for your includes commands as well.

And of course you should have multiple blank menu modules that you can copy and paste into a new design scheme as you go. This will save you loads of time and allow you to just plug in the custom fields such as button title, page URL, etc.

By having half a dozen or so modules available to you, any design project can be launched quickly and easily. You just open up your selected module files, begin copying and pasting, and soon you'll have your base template document ready for custom coding.

I have found this simple technique can shave off at least an hour of any Web design project and sometimes much more. And by arming your employees or outsource agents with your module suite you will be able to get more bang for your buck in terms of hired labor.

You can even use the module formula for add-on elements like ad blocks, banner rotators, email forms, hover pops, audio players, and more. In fact the more pre-built modules you have for these elements the more likely you are to use them freely on your Web pages.

It's easy to get lazy after a couple of hours of coding and decide to skip a few special features. But if all you need to do is open the audio module to get most of the legwork done odds are you'll follow through with it.

The modulation approach can also be sued with WordPress blogs. You can and should have an "installation notes" document that has your entire ping list, specific plugin settings, Technorati Faves code, and any other standard elements you include with most blogs. This can make the process of setting up new blogs quick and easy, even without the use of expensive management software.

Put these simple ideas to sue in your own design work today and enjoy the immediate spike in productivity they are sure to create.