Divide and conquer. Assembly required.

Far too many Web sites cram everything into one file; HTML (which tells the client's browser what to display) is intermixed with style settings or table layout (how to display the content), with some JavaScript thrown in so that the too-common Flash highlighted menu does its thing.

Doing it this way causes several problems:

  • The site is wasteful. If several pages on a site share common layout, styles, content, etc., all of that has to be sent with each page request – slowing down the user and driving up bandwidth costs.

  • The site lacks scalability. It is easy to make changes to shared details in some pages but not others, requiring that changes be verified on every single affected page in the site;

  • The site is brittle. As a result of the previous two problems, it is difficult to quickly and confidently make changes to the site. Stale sites lose user interest quickly.

  • The site is limited. It will tend to be developed with the capabilities and defects of a specific browser in mind, reducing its value to those using other browsers or non-browser-based software like search engines.

All these problems can be solved easily through the use of modern Website architectures that emphasize separating a page's presentation into several different layers:

  • The site uses a scripting language like PHP, Python or ASP to process different files which, combined, present the entirety of the page's content. This means, for example, that changing the visual structure of the pages on a site does not require changing the text of each page;

  • The site uses semantic HTML, so that common areas of each page can easily be identified, the meaning of content can be inferred (if a user is searching for 'widgets', a list on your site named 'widget-list' is more likely to be seen as a 'hit' than a list named 'list27');

  • The site uses one or more style sheets to control the visual layout of items on each page. This not only makes guaranteed-sitewide changes easier, but allows the client's browser to use caching to reduce the amount of data needed from the server (lowering bandwidth and costs);

  • The site makes use of a JavaScript toolkit or framework like jQuery to add behavior to the pages. Menus can expand or collapse, data can be updated via AJAX, and so on. Doing this right is critical to cross-browser support – including supporting different versions of the same browser.

By using this layered approach, and keeping each layer as simple and self-contained as possible, it is much easier and faster (and cheaper) to develop a Web site that will present the best possible experience to all your viewers.