- 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
Slicing and Optimization
After reviewing your information (the Prepping part of this phase) and making sure your redesign project is on track, you are ready to start HTML production in earnest and begin Building. At this point in production, the graphic templates [6.6] are processed (sliced and optimized) into HTML elements (graphics) so that they can be put back together (spliced and coded).
NOTE
Expert optimization should be a high priority. For an excellent how-to resource, we recommend Lynda Weinman's Designing Web Graphics.3 (New Riders, 1999).
Figure 6.6. The graphic template for http://www.diverseworks.org is delivered to production from design as a layered Photoshop or Fireworks file. This file contains all the elements of the page, including all rollover states, each in their own layers. Shown here are the pull-down menu bar graphics shown in their "on" state.
Prior to production, during the design phase, before any visual design directions are finalized and approved, they must get checked by the production team to ensure that the files are, in fact, sliceable and optimizable under target-audience download requirements. Visual designers need to work closely with the HTML production team to determine the best way to slice the graphic templates so that the HTML tables the rudimentary basis for HTML layout can be constructed.
Building
> Slicing and Optimization
> Creating HTML Templates and Pages
> Implementing Light Scripting
> Populating Pages
> Integrating Backend Development (If Applicable)
After the Photoshop/Fireworks files are actually handed off in a state that is producible, production does the actual slicing [6.7] and optimization [6.8] of the pieces. Note that sometimes, when budget and resources dictate, one designer may fulfill both visual design and production roles.
Figure 6.7. Graphic templates are divided into sections and sliced in either Fireworks or Photoshop. Clearly identified layers indicate on/off/over states or DHTML callouts.
Figure 6.8. Before and after shots of a background image being optimized in Fireworks. The file size is reduced to 16K by reducing colors in GIF format.