Category list

- page 45

Summary

CSS lets you create boxes that not only have rounded or nonsquare corners but that are flexiblecutting down on unnecessary code and separating the design of the box from the content that's being presented. In this chapter, we shared methods for creating fixed-width and fluid-width rounded boxes, and I hope it will encourage you to experiment with these techniques and others, creating bulletproof boxes that defy the box model of CSS.

Here are some points to remember when creating indestructible, rounded-corner boxes:

Fixed-width, rounded-corner boxes are usually easy to create using lean markup and just two background images.
Fluid-width, rounded-corner boxes require a little more markup in order to reference background images on all four corners. Use your best judgment on whether this extra markup is worth it.
Combine background images and use positioning to reveal only the desired portion of the image.
Build in extra width and height to background images, using your best judgment for deciding the maximum dimensions a box may reach. Take into account the context on the page, and what types and amounts of content may be placed inside. Then add a little more.

Chapter 6. No Images? No CSS? No Problem

Ensure that content is still readable in the absence of images or CSS.

The first several chapters of this book have addressed flexibility from a component design angle and stressed the importance of allowing design to accommodate varying amounts and sizes of content. You can take additional measures to bulletproof your designs and thus provide flexibility in the many stages a Web page could be interpreted. When CSS is unsupported or unavailable, is the page still readable? If images are slow to load, or turned off via a user preference, is the content still visible and understood ? These are important questions to answer when building any Web site.

Planning for the worst-case scenario can improve a Web site's chances of being readable and usable in a variety of situations. In this chapter, we look at two simple strategies for ensuring a bulletproof design, even if images and/or CSS aren't present.

A Common Approach

Several months ago, I received an e-mail from a faithful reader of my business site and weblog, SimpleBits. In the e-mail, the reader explained that while he enjoyed reading the site, he often browses the Web with images turned off , further explaining that he connects to the Internet via a slow dial-up connection and likes to read content rather than waiting for graphics to load. He's not aloneto speed up an otherwise sluggish experience, many users disable images in their browsers, allowing pages to load content and background colors only (Figure 6.1).

Figure 6.1. Unchecking the Load Images box in the Firefox browser disables all images.

We'll get back to why the reader was explaining the reason he browses this way in just a minute, but first, it'll be helpful to explain how a tiled image was used on SimpleBits that sat behind all of the site's content.

It's a common approach, especially when utilizing CSS and the background and/or background-image properties. An image is used behind text to add color , patterns, and so forth. At the time, the columns and decorative border on SimpleBits were achieved by using a repeating background image on the entire page. A single image controlled the side stripes , the white content area, and the light-gray sidebar (Figure 6.2).

Figure 6.2. The bg.gif image was tiled vertically on top of dark gray to create the columned background of the site.

This single image was tiled vertically from top to bottom, creating the columns and side borders that sat on top of a dark-gray background assigned to the <body> element (Figure 6.3).

Figure 6.3. When bg.gif was tiled, it created the white and gray columns that sat behind the page's text content.

So, by declaring a dark gray for the background on the <body> , I was essentially setting a default background color for the entire page, unless overridden on any inner element.

body {
  background: #666;
  }

The tiled image was assigned to an inner <div> that contained all of the pages' content; therefore, it would lay on top of the gray background behind it, creating the white and gray columns for text. This all works rather nicely . By layering a tiled image on top of a background color, we're creating space for text to be easily read when placed over the tiled image (Figure 6.4).

Figure 6.4. The dark gray text sits on top of the tiled image.

The problem is when the image isn't there and the site's unbulletproofness (perhaps a new word that I've invented) is exposed.

Flylib.com