Accessibility
 
Home / Resources / Techniques
Icon or Spacer Macromedia Website Production Management Techniques Phase 5: Build and Test
Pre-Production

Coordinating and assessing HTML production resources takes experience. What is the level of expertise necessary to successfully produce and launch your site?

Assessment and assigning of resources was handled in the Define phase of the project, however now is a good time to review and confirm that the team is suited to the job. Are they up for the challenge? Will you be creating HTML pages or templates? Preparation and organization will allow for efficient production—that is, setting standards to touch each HTML page or template as infrequently as possible.

Take a moment to assess the project status. Pre-production is a chance to take a step back and see where you are in regard to time, budget, scope and expectations. Determine how many hours you have budgeted and used thus far for all phases of the development process. Compare your initial projections to your current reality. Do you have enough time left to complete the site? Make sure the scope of the project has not increased due to additional wish list items and unforeseen technology issues.

Meet with the client to review project status. If you are in a design firm, be sure to outline any AC's (additional charges) as applicable for any client-initiated changes. Review audience needs (target browsers, screen size and connection speeds), technology (light scripting, plug-ins), content status (is the content going to be ready in time?) and design templates (will they need to be altered by the design team prior to production?).

Coordinating Production

In any project, you need the right tools for the job at hand.

A WYSIWYG editor (What You See Is What You Get) is an automatic drag and drop HTML editor for people with little to no understanding of basic or complex coding. An HTML editor works well for the creation of static sites with little functionality. Dreamweaver 4 offers both WYSIWYG and HTML editor capabilities.

The more complex the functionality (light scripting, frames and complex tables usage), the more you will need to rely on experienced developers and programmers to code the site by hand with the knowledge required to troubleshoot problems.

 
Page vs Template

What is the difference between a page and a template?

An HTML page is an independent document that is created with all content in place referenced directly by a browser. Usually it will have an .html or .htm extension.

An HTML template is sometimes referred to as a shell—it is an HTML page which is divided into components or sections (header, body, footer) that is used for dynamically populated sites (sometimes referred to as "on the fly"). The template or shell can be used to hand off to another development team for their own HTML page creation. Dreamweaver 4 has pre-designed templates to help build out static pages quickly.

 
Readdressing Scope & Budget

Before starting actual production, take time to readdress the expectations, assumptions and deliverables originally used to determine the scope of the project.

Perform a time check to see how many hours have been used to date, and how many resources and hours are necessary to complete the site's production, through launch. The project was started with some assumptions—a certain number of pages or templates for the site, a certain amount of light scripting (for rollovers, frames, etc.)

This phase of production is usually one of the gray areas when estimating time. Each page or template usually takes from eight to twelve hours (sometimes as long as 2 days per piece for complex tables, frames or light scripting.) Subsequent pages based on a similar look and feel can be produced in a shorter amount of time. Multiplying out the template creation and then the actual page creation or back-end integration, days and resources can add up quickly. An original estimate of 100 hours can easily become 300 hours if the complexity of the site was underestimated.

Whether you work for a corporate Web team or a design firm, this time and resource reevaluation is necessary for managing client expectations, and will help you to better estimate future projects as you gain more experience.

Time Check

Tracking time on a weekly basis is key to keeping a project on target and knowing when you have issues of "scope creep".

Comparing "time allocated" in the original statement of work, and the "time used" from weekly summaries will allow you to quickly assess if you have enough time and money to complete your project.

Clients who are aware of the time and how it is spent during a project will be much less surprised if the budget or schedule needs to increase during the production phase. If there is a significant increase and you are working in a design firm, you may need to submit an AC form for the additional charges. If you are working for an in-house Web team, you may need to get more resources assigned to the project, or extend the schedule if possible.

If your project is well documented and hours have been tracked (along with client-initiated changes and late content), you should be in a great position to reevaluate and negotiate for additional funds, time or resources.

 
Readdressing Tech Requirements

At this stage of development, technical considerations may have changed from original specifications.

Readdress the technical requirements of the project. Revisit your basic technical requirements—target audience, screen size, browsers and platforms. Frames or no frames? Light scripting needs? Plug-ins? Is this a static or dynamic Web site? Will this site need to be created as HTML templates and then handed off to another team for additional production and implementation? Who is your contact for the application development, and what schedule are they on for testing and integration?

Make sure everything is moving in the right direction—a lot can change from the client's first thoughts to the current realities of site production.

Static or Dynamic

You will already know at this point if you are creating a static site (independent HTML pages, each with an .html or .htm extension) or a dynamic site (created by pulling pieces of the page together using a standard header and footer, and populated with database content.) Depending on the type of site you are creating, you may either be independent of, or working closely with, the application development team.
 
Establishing a Method of Version Control

Working with a team of HTML production artists—especially remotely over an FTP connection—requires careful coordination and organization.

If you have 3 or more people working on the HTML of your site, you will want to have some kind of established method of version control in place to avoid writing over files or duplication of efforts. Dreamweaver 4 has a Check In/ Check Out feature that enables you to require each user to check files in and out, along with a feature that enables you to include design notes for others to understand the purpose, status, and direction of the development.

Establish very clear methods to indicate when a file is being worked on, as well as methods of backing up all files, as there is always a chance of overwriting something that is being revised or modified.

Have a system. Be clear with the team. Organize and backup. Allow FTP access to key individuals only.

 
Setting Up File Structure

Organize your file structure and set naming conventions as established during the Structuring phase. Before you start, you will need to work with your HTML coders to determine how you will set up and maintain the site structure.

Failure to structure from the beginning may result in images in various folders, with duplicated files and general confusion. It can also wreak havoc with any Web applications or traffic monitoring that may be in place. A messy folder structure is something to avoid.

Think about how the site will need to be organized in order to be easily maintained and as scalable as possible. Agree on naming conventions for the folders and files within. Will all images be in the root folder? Will there be separate image folders for each main section?

As the project manager, your role is to communicate the client's goals to the production team as early as possible to allow establishment of clear methods of directory and folder structure.

 
The folder structure below is set up so all of the site's images are in one folder at the root level. This method is good for small sites needing very little maintenance.
file structure
Full size image
 
The folder structure below is set up so images are contained within each section of the site. This method is good for large sites needing a lot of maintenance and updating for each particular section (in this case, every 1-2 months).
file structure
Full size image
 

Naming Conventions

Determination of a convention for HTML naming style is usually made based on the production team's preference.

Some prefer to write everything out—no longer adhering to the old eight-dot-three standard (unless you are UNIX based, then you will need to adhere to the old standard and be case sensitive as well.) Some prefer "aboutthecompany.html" vs. "about.html" . Try to avoid falling into the trap of "AboutTheCompany.html". Using key caps will only be another convention to remember.

Whatever the preference, set it and stick to it from the get go.

For dynamic sites, HTML naming conventions don't apply directly, but discipline is still required. Pages are divided and individual sections can be called out as "header," "footer," "main," "navigation" and so on. Be descriptive, but keep it simple.

 
Addressing Site Maintenance

How often will you be changing content? Daily? Monthly? Will it be an automatically posted change? How will you be archiving material? Who will be maintaining the site? How HTML savvy is the maintenance team? What tools will they be using? Understanding how often the site will be updated and the complexity of the updates will help to determine how the site will be structured and built.

If you have a highly complex site needing major changes on a daily basis, you will need to think about site maintenance and how it can be addressed during the pre-production phase in order to cover all needs and issues.

If you have a site changing globally weekly, you might want to think about creating your site using templates, style sheets or includes—separate HTML pages or data that is plugged into your site in chunks without having to rebuild the entire page. JavaScript, CGI and CSS (cascading style sheets, for 4.0 browsers and above) can also aid in automated updating.

 

Includes

To make life easier, you can start thinking about using includes to help create globals which can be altered easily if there are changes as the site production continues.

An include is a self-contained piece of code that can be created and stored independently from the documents it appears in. An example is a footer or copyright that needs only to be created once and referenced via HTML to every page in the site, allowing for easy global edits and site-wide changes. There are also functionality globals created in JavaScript and formatting standards that can be applied globally using CSS (cascading style sheets.) The tag used is <!--#include…. >

 
 Discover
Overview
Analyzing Your Industry
Understanding Your Audience
 Define
Overview
Goals and Objectives
Creating a Project Plan
Establishing Requirements
Housekeeping
 Structure
Overview
Content
Site View
Screen View
User View
Design and Prototype
 Build and Test
Overview
Pre-Production
Building
Testing
Launch
Evaluate and Maintain
Resources
Online Forums