Category list

Why It s Not Bulletproof

Why It's Not Bulletproof

Getting back to my helpful reader's e-mailyou know, the one who wisely disables images when he browses on a slow dial-up connectionthe reason for his note was to inform me that the content on my site was either hard to read or just plain not there at all . Oh my. I have to admit this was rather embarrassing, but let's take a look at why this happened .

Because the content's text color was two shades of gray, when the tiled image was removed (or disabled by the reader) the text was left sitting on the default background color , which was also a dark gray. The result was a semi-unreadable page; one could barely make out the text in the wider main column, and even worse , the text in the smaller right column was invisible . The text in this column shared the same color gray as the background, leaving the text completely hidden.

Figure 6.5 shows what happens when the tiled image is removed. There's not exactly an optimal contrast between the text in the main column and the background color, which makes it difficult to read. But even worse, the right column's text disappears completely because it's the same color as the background.

Figure 6.5. It's difficult to read and, wait, where did the right column go?

For users who browse with images turned off to conserve bandwidth, or for those on slow connections that make image loading seem to take forever, this scenario can certainly be frustrating. Text can even be unreadable, depending on your color combinations. Fortunately, there's an easy step to keep in mind to prevent this unreadable state.

A Bulletproof Approach

To ensure that your page's text is still readable, even in the absence of images, the bulletproof fix is rather simple. Remember to always provide background color equivalents for any background images that you may use.

For instance, looking back at our unreadable example, if I had simply added background color to content areas of the page, my helpful reader would still be able to view the text without any problems.

Since the content portion of the page sits on top of a white background, I need to add that color to the containing <div id="content"> that wraps that column:

#content {
  background: #fff;
  }

Similarly, since the sidebar's text sits on top the light-gray background portion of the tiled image, I just need to declare that color for the <div id="sidebar"> that wraps the right column:

#sidebar {
  background: #eee;
  }

Figure 6.6 shows the results of adding those two simple rules to the style sheetwith images still turned off . You'll notice that while the tiled image is gone, each text column has a background color sitting behind it, masking the dark gray default of the entire page.

Figure 6.6. With background colors added, the text is readable once again.

Why It's Bulletproof

By taking the extra time (and we're talking seconds here) to provide equivalent background colors for any images used as backgrounds, you'll make your site one step closer to being bulletproof. Users who visit your pages with images turned off to conserve bandwidth will still be able to read them. Users who have slow connections will see the text and background color load first and be able to read the page before any images load.

Bulletproof means being prepared for whatever is thrown at your design . This is just one small, easy step that can help ensure your design doesn't break down when viewed without images.

To illustrate a similar example, let's look at the sidebar headings found on SimpleBits (Figure 6.7).

Figure 6.7. On simplebits.com, "About Sections" and "Bits to Buy" are contained in `<h3>` elements.

The "About Sections" and "Bits to Buy" headings are contained in <h3> elements (i.e., <h3>About Sections</h3> ), while a subtle background fade image is placed behind the white text.

The CSS to achieve this for the top (green) heading looks like this:

#sidebar h3 {
  margin: 30px 0 12px 0;
  padding: 5px 10px;
  color: #fff;
  font-size: 120%;
  background: url(http://flylib.com/books/2/68/1/html/2/img/sub-h-bg.gif) repeat-x top left;
  }

Where sub-h-bg.gif provides the green fade background, the text on top of it is white. The page's default background color is also white. I think you can see where I'm going with this.

If we were to turn off images, the headings would completely disappear (Figure 6.8).

Figure 6.8. The magically disappearing heading text!

White text on top of a white background equals magically disappearing content.

Fortunately, the simple fix that we learned earlier in the chapter applies here as well. By choosing a similar background color equivalent and declaring that along with the image, we'll achieve bulletproofness:

#sidebar h3 {
  margin: 30px 0 12px 0;
  padding: 5px 10px;
  color: #fff;
  font-size: 120%;
  background:

#538620

url(http://flylib.com/books/2/68/1/html/2/img/sub-h-bg.gif) repeat-x top left;
  }

In the above CSS, we're declaring a shade of green that's found in the background fade image along with the image itselfin one single rule. Because background images always sit on top of background colors, we have a safe backup in case the image is unavailable, turned off by the user , or loading slowly.

Additionally, if the user increases the text size of the page, the background image will stay aligned to the top of the box, while the background color will extend down as far as it needs to (Figure 6.9). This also ensures the white text of the heading will be readable, always sitting above the green background.

Figure 6.9. A 3D view of the stacking order showing the white text and tiled gradient image sitting on top of the solid green background.

Figure 6.10 shows the headings with images turned off, but this time, their background color equivalents make the white text readable once again.

Figure 6.10. With green and orange background colors specified, the headings become readable, even in the absence of images.

Now that we've handled the absence of images, let's see what happens in the absence of CSS .

Flylib.com

Category list

Similar pages

Why It s Not Bulletproof