Now you’re ready to start HTML production. You need to think about graphics slicing and optimization, and building fluid pages (also called stretchable or expandable) for multiple screen resolutions. You need to think about the rollover states, and you should also work to keep within a targeted k-size for the files when they are completed. The look and feel has been approved; the pre-production work has been completed. Now it is time to roll up your sleeves and get to work.
During this build phase it is extremely important to maintain clear standards for the HTML pages or templates as they are being created—especially when working with a team of HTML production coders. Work closely among the design team, the client and the production team to ensure consistency in look, feel and functionality. For dynamic sites, confirm standards for HTML and delivery.
Create the homepage and a secondary page first, then test and troubleshoot them to perfection. Once these pages are completed, tested and approved, use them as a guide and a starting point for the rest of the pages or templates.
Maintaining clear standards and consistency in code through production is a challenge. Post completed templates for sign-off and testing before moving a main navigation bar or rollover into production on multiple pages of a site.
In his book “Designing Web Usability” Jakob Nielsen suggests building for all screen resolutions by building “fluid” or expandable pages. The content flows when the browser is pulled out to 800 pixels, yet works when constrained by a smaller screen size as well. Dreamweaver 4 has a new feature that allows for the instant creation of fluid pages. Called Autostretch, this feature can automatically be applied to any column to allow the text to flow when the browser window is expanded.
Slicing & Optimizing Graphics
During the Design phase, designers should have been working closely with the production team to determine how the design template would be prepared for slicing (division and cutting up of the page in preparation for HTML production) in Fireworks.
The graphics that have been sliced will now be optimized (reduced in bytes by taking out colors and information, as well as changing format to GIF or JPEG for online usage) and prepared for production. Maintain flexibility during the optimization process. A completed file might be 10-20k over your desired limitations.
Be prepared to go back into a file and re-optimize for a reduced page load. Make sure when optimizing graphics to save the original file so you can return to it for additional attempts at optimization.
This is a Fireworks template page that has been designated with the rollover states and slicing points for production. Fireworks and Dreamweaver work seamlessly together during the production phase to ensure efficient graphics slicing and optimization. Fireworks has an export feature that will automatically name each of the states (on, rollover, off) for navigational graphics.
In the Fireworks files, text can be left as editable text (also called unrendered) or changed into a graphic image (called rendered.) Some files are created on a MAC using MAC system fonts, which will not carry over to the PC for production. Keep both rendered and unrendered layered text files on hand for editing and production ease.
Addition of Meta Tags/Alt Tags
Make sure your ALT tags are READY TO GO before the coding process begins. ALT tags, TITLE tags and META information make up the invisible content that many copywriters and clients forget about. ALT tags are important to add to text links, navigation and graphics to allow for additional information and easier navigating. They are particularly important when considering online accessibility.
When coding, there is nothing more frustrating than starting to work on a page or section, then having to go back and back again, asking questions to fill in the blanks. Know what the blanks are and how to fill them before you begin.
Dreamweaver 4 has a handy form that asks you meta data questions up front before you start each page. You can ask the client to fill out this form as you go through the production process. Sometimes there is invisible content that is due with the rest of the content but is often left until the last minute to complete.
When building out the site, there are several places where content is unseen or “invisible” and therefore usually ignored. These pieces of invisible content are usually the ALT, META and TITLE tags and information. The HTML production coders are usually forced to go back and forth to get information from the client, or worse yet, make up the information themselves.
Solution? Come up with standards for handling images, navigation and text links using ALT tags. For accessibility purposes and slower-loading computers, the ALT tags give important information to the user to allow them to navigate more comfortably.
The TITLE tag is the number one resource for search engine placement—it should be descriptive and have key words individuals might search for.
On the Resources page of this site you will find a <META> Data Creation Worksheet to help you create <META> information, primarily keywords. Please don’t confuse this worksheet with directions on “how to list your site with search engines” or “how to get the best listing results”. Rather, it is a list of items to consider as you generate <META> information that will be relevant to search engines.
These pieces of code can be shared and modified to fit your site’s specific needs, including rollovers, functional pull-down menus, pop-up windows, forms and other simple functional areas within your site. Fireworks 4 and Dreamweaver 4 allow integrated creation of rollovers during graphics creation and production, with Fireworks even automating the creation of drop-down menus. Other types of functionality include browser sniffers and redirects; time and date stamping; experimental DHTML and more.
You will need to test these bits of functionality early on in the process to determine browser and platform compatibility.
It is time to actually put content into the site. But is it ready to go? Be clear with the client about when the drop dead point is for content submission. If you have utilized the content delivery plan, you have broken the deliverables into chunks and outlined specific due dates for content, imagery and assets.
Let the client know early in the process that cost overruns may occur due to late content arrival. Production can only be efficient when all content is in, not if it is still arriving piecemeal.
As the team begins to create the actual HTML pages and move text and optimized graphics into the templates, it is important to have a clear method of tracking content. You will need to make sure that production is using the current version, that all the content is in and that the content is being used in the correct sections. You will also need to track headers, breadcrumb trails and nomenclature, maintaining standards and helping to begin the QA process.
Use Comment Tags
Who knows who will be working to update the site in a year’s time? Use comment tags to clearly indicate the start of individual sections and instructions. Tags such as <MAIN BODY COPY STARTS HERE> or <MAIN NAVIGATION BAR STARTS HERE> will help the next person working on the site to quickly and easily find sections they need to work on. Make sure everyone on the production team is using the same language to avoid major confusion down the line.
Freezing Content & Production
It is tempting to continue to feed content into the site and tweak the pages right up until launch. Why? Because you can. But the lack of blue line and press deadlines (as occur in print work) should not justify a lack of hard dates at which content and production must be frozen.
The site can be developed, fixed, tweaked and updated after the initial launch. You will have time to address issues and errors during QA testing—but don’t substitute QA time for last minute production work.
Be sure there is a clear moment when the production process ends and QA testing begins.