Step 11: Design Conversion
To convert the designer's work into HTML, the developer will require individual images for various components of the design. The designer and developer need to discuss the specifics of this to make sure the developer gets exactly what they need.
Typically, designers creating templates for web sites will use a program like Adobe PhotoShop to create multi-layered .psd images that can be displayed as a single flattened image ("flattened" refers to the multiple layers all being reduced to one flat layer when the image is printed or saved in another format). .psd files, however, cannot be used in an intranet site because web browsers don't display them. The only formats that can currently be used for images are .jpg, .gif, .png and .swf (flash). Usually, however, .jpg and .gif files are those most-often utilized.
A designer can't simply save their .psd file as a .gif or .jpg. This is because an intranet site consists of images and text, and it's considered bad practice to simply overlay text on top of a large image. Instead, the designer should convert their .jpg into a series of smaller web-ready images that can be used in HTML pages to accurately convey the visual effect of the design. The developer who will be creating the HTML templates can normally best-advise the designer on exactly how to do this to make the HTML pages efficient.
When the designer converts their single image to a series of smaller images, they should keep some things in mind:
- The files should be optimized to have small file sizes for increasing the efficiency of page download times. This can be done with Adobe ImageReady, Macromedia Fireworks or Debabilizer. There may be some resistance to this by a designer who thinks an intranet is always accessed on a high-speed local network, but remind them that this process is considered best practice for web design and that some users may access the intranet from a dial-up account.
- File formats (.gif, .jpg, .png) for images should be carefully chosen based on requirements. Your designers will typically know quite well the issues surrounding the differences between formats.
- The file names should be short, but descriptive (i.e. title.jpg, logo.gif, icon-print.jpg, etc.). Numbered image names are discouraged. Also, images automatically given cryptic names when processed by Adobe software should be renamed.
- Numerous templates will probably all be converted to web-ready images at the same time. These templates' images should be placed into their own respective directories (for example, /images/splash/ and /images/home/), with common files such as logos placed in (/images/). This organization will make a difference in the short-term development cycle and become invaluable to site maintenance staff in the long-term.
- Whole, uncut images should be included in web format in a reference directory (/images/reference/). This allows a developer who is implementing the site to compare the presentation of their HTML pages with the original design.
- The original .psd files should be included in their own directory (/images/PSD/) as a proactive long-term measure. This will make updating the intranet's visual components in the future significantly easier on designers who may succeed the site's original designer.
- If the designer has time, they should create a basic wireframe for each template design that indicates the height and width of every image and content area. This can help a developer, but it is a "nice to have" and not a "need to have."