- Phase 4: Production and QA
- Establishing Guidelines
- Setting File Structure
- Slicing and Optimization
- Creating HTML Templates and Pages
- Implementing Light Scripting
- Populating Pages
- Integrating Backend Development
- Understanding Quality Assurance Testing
- Creating a QA Plan
- Prioritizing and Fixing Bugs
- Conducting a Final Check
- Phase 4 Summary
Populating Pages
Your content is due. Chances are, some content is in, some is late, and some is still being changed. But with your HTML templates completed and your pages built out, if you don't have content to work with at this point, your production designers will be idling... on the clock.
Anticipate this moment. Before the deadline actually comes, email the person who is responsible for content delivery and let that person know that the content-submission deadline is imminent. Make it clear that as of a certain date, content will be frozen, period. Frozen means no longer changeable. Final. If you do not do this, content will continue to trickle in, and content that comes in after the freeze constitutes Scope Creep; you can charge for it (see the "Slippage and Consequences" sidebar earlier in this chapter). Be aware that content will still come in even after you officially freeze it. Trickle happens. Build a cushion into your freeze date if you can.
Once you begin to populate your pages, make sure the content goes into the correct places. But who can remember (or intuitively know) where content goes? Someone, probably the project manager, has been receiving the content from the client. With this person as development-side content coordinator, use the Content Delivery Plan as a checklist, rely on the naming conventions of the web-ready files that were delivered, or develop another method of ensuring proper content placement. Whatever the plan, communicate the content-tracking plan to all production designers involved in populating the pages. Make certain nothing gets missed or placed in the wrong spot.
As you place the content, pay attention to both the layout and the HTML text style standards set by the visual designers. Be on the lookout for content that was not anticipated and therefore has no standard. Contact the visual designers and ask them to define the standard right away. Likewise, if you come across headers that need to be graphic images, make sure to alert the visual designers. Sometimes there is a template for the headers. If so, production can simply create what is needed without involving the visual designers.
Content Buckets
Dynamic sites often have designated areas, or "content buckets," where dynamically generated content (for example, "Today's Top News" or a database-built shopping list) gets placed. This is usually an HTML placeholder built into your page that will get filled by dynamic content. Content buckets need separate consideration because they are points of integration between backend and front-end.
If your site is not dynamically driven but you have an area where content regularly changes, make certain you specify clearly in your HTML Style Guide how to properly update that area.
Invisible Content
Populating your pages involves all content, including the frequently forgotten, production-specific "invisible content" ALT, META, and TITLE tags. Some invisible content, like ALT tags on graphic globals such as navigational elements, should be added at the HTML template creation stage so that it only needs to be done once. Others, like TITLES, should be included when pages are built from those templates. Invisible content is regularly left until the very end or is flat out forgotten. Keep it in your workflow.
Make sure the invisible content is ready to go before the coding process begins. Few things are more frustrating than starting to work with a page or section and then having to go back and back again to fill in blanks. Know what the blanks are and how to fill them before you begin. Dreamweaver 4 has a handy form that asks you questions up front before you start each page. Copy this form [6.11] for your client to fill out as part of content delivery.
Figure 6.11. Dreamweaver 4's Meta Generator screen helps make the creation and implementation of META tags streamlined and part of the workflow.
The client may not have every last item or image ALT tagged, and that is okay. But ALT tags can go a long way to add clarity, further define a word, or work with light functionality [6.12]. Regardless, as long as a naming convention or style is established, the production designers can move forward.
Figure 6.12. ALT tags can further define a particular link, eliminate guessing, and/or help the user make a decision to click or not to click. Here, http://www.zeldman.com's simple text link uses the ALT tag to quirkily identify what clicking will open: a pop-up window of Tipi the cat.