Why It s Bulletproof

Why It's Bulletproof

After simplifying the markup and making creative use of small background images, we've successfully rebuilt the rows using bulletproof methods. Let's talk about why.

SEPARATION OF STRUCTURE AND DESIGN

We tossed out the tables and nonessential graphics and replaced the HTML with lean, structured XHTML. The meaningful markup stands a better chance of being understood properly by a wider range of devices and softwareeven in the absence of CSS.

Instead of coding the images that make up the design of the rows right in the markup, we moved them over to the style sheet instead. Making changes to this design later on down the road will be significantly easier, not to mention that the amount of code has been drastically reduced.

For example, going from two shades of green to red, blue, or any other color would be as simple as changing a few CSS rules. Instant design results.

NO MORE FIXED HEIGHTS

Rather than assuming these rows will always be x number of pixels tall, we creatively positioned background images, preserving the integrity of the design while allowing it to expand and contract as needed. This approach also allows us to freely use font-sizing methods (such as the one described in Chapter 1) without relying on a pixel dimension for the text contained within.

Figure 3.19 shows our reconstructed rows, now with a much larger text size applied to the content. Notice how the rounded corners and background of the design stay intact.

Figure 3.19. With an increase in text size, the rows expand while the design is unhindered.

Let's imagine that an editor wants to write two promotional messages for the second row. We can easily add a second line without disturbing the design, which expands to fit the new message (Figure 3.20). This illustrates the biggest advantage of using bulletproof methods: the design accommodates even unforeseen requirements.

Figure 3.20. Adding a second line to the #message row means zero work for the designer, since we built an unlimited amount of room into the design. Foam hammer?

tip

Remember when we positioned the magnifying glass and arrow background images at 50% down from the top? Notice that, regardless of the text size, the image will always be centered vertically against the text.

If a client or manager says, "We only need room for one line of text here," and you go off and build it to spec, it's almost a given that they'll come back in a week saying, "Yes, we absolutely need room for two rows of text." With bulletproofing in mind, you've already built that ability into the design. Make sure you tell them it took you another week to make that happen. Or even better, show them that you've already thought ahead about this, illustrating the benefits of using CSS to reduce maintenance headaches.