Return to Process

HTML Production/Layout

Technical Engineering

Once the design and layout are complete, the site engineering can begin, usually at the same time the art is being cut-up and optimized. At this time, all technical aspects of the site, including forms, databases, frames and other needs, are addressed.

Know Your Audience

Think about your target user. Instead of trying to create the perfect site for a particular browser and platform, think about your audience instead. Remember most visitors to the site will not have large screens and fast modem connections.

Use “ALT” Tags

Naming conventions for page, titles and <ALT> tags should be thought through and established in advance. Seldom does the client think about the TITLE (the page name as it appears in the browser) or set up ALT tags for a graphic (the name of the graphic that appears while the image is loading.) Often the HTML coder is left to insert <ALT> and <TITLE> tags without direction, which may not keep with the overall look and feel of the site.

Layout and Production

The job of a good production engineer is to incorporate their knowledge of both HTML standards and compression techniques to create an end result that is as close to the original vision of the site as possible. Creative use of tables can save download time and increase functionality. As a producer, be clear with functionality and overall goals for each page, and let the HTML production engineer make decisions as to the best way to accomplish the task.

HTML Text Editors

Text editors are used by HTML ‘purists’ who are fluent in HTML and are able to create pages from scratch. There are many solutions for HTML text editors such as BBEdit and HomeSite. For the Food.com site, Allaire HomeSite was used to create the HTML pages. HomeSite allows the coder to customize their HTML, including setting up color preferences and shortcuts. The interface is icon based and very user friendly.

Backend Engineering/Programming

Establish Backend Needs Early On

Backend programming, especially anything requiring CGI,can be very expensive and can quickly lead to bud- get concerns if not estimated properly. At the onset of the project,steps should be taken to determine exactly what the required task is;from there the Technical Engineers can determine the best way to produce the desired outcome.

Client-side Scripting

JavaScript is used for simple effects such as roll-overs to more complex usage, such as calculators. The JavaScript is written as part of the HTML within the body of the code. JavaScript was developed to allow programmers to have more control over site functionality without depending on the server. Not all browser types support JavaScript, however, and measures need to be taken in case a particular viewer is on an older browser (Netscape 2.0 and Internet Explorer 3.0 and below.)

Custom Programming

For more specific functionality, it is sometimes necessary to use server-side programming, called CGI (Common Gateway Interface.) The difference here is that the coding/scripting is not part of the HTML, but stored on the server itself. Various programming languages are used, but the most common is PERL (Practical Extraction and Report Language) and Visual Basic. Other program- ming languages commonly used are C and Java.

Beta Launch/QA Testing

Organize QA Testing

QA (Quality Assurance) testing needs direction and organization. Usually, the more people involved,the better.Assign individuals a portion of the site, and have them check on one or more browsers on both MAC and PC platforms. Testing a lower modem speed com- puter with a small screen is also recommended.

QA Testing/Proofing

It is critical for all individuals participating in the creation of the site (including the client!) to be involved with testing and proofing. Because of the complexity of the site, various methods can be used to ensure all aspects are tested. This includes multiple browsers, platforms, screen size and modems. For thorough testing, all target browsers on both MAC and PC should be tested. Assign vari- ous members of the team different sections of the site.

Beta Launch

This version of the site contains all content, programming and functionality. Setting up proper time for Beta Testing and feedback will ensure time for corrections and preparation for launch.

Summary: Phase 4

HTML production begins on full site or template pages (for dynamic sites.). Light scripting takes place (javascript, basic CGI, DHTML.) Completed site is posted to staging server for QA testing and proofing.

• Graphics Optimized/spliced, global elements created
• Template Production Begins
• Final Content Added to Template or Full Site Pages
• ALT tags, META tags and <title> Tags Implemented
• Light Scripting (DHTML, Javascript) Implemented/Tested
• Development on Staging Server
• Internal QA on Staging Server
• Beta site launched, external QA begins (test plan in place)
• Special Technologies Implemented (Back-end Development)
• Verification Usability Testing

*QA throughout the design & development process both informally and formally

Technical engineering is complete and we’re ready to move to phase 5 — Launch!

top