Bulletproof Web Design: Improving flexibility and protecting against worstcase scenarios with XHTML and CSS [Electronic resources] نسخه متنی

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 th76 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.

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.