Putting it All Together - HTML5 with CSS3 - page 359

“Fitts' Law” is an age-old axiom in interaction design, named for psychologist Paul Fitts
who proposed it in 1954. To paraphrase roughly, Fitts' Law states that the time required
to point to a target is a function of the distance to the target and the size of the target
area. In other words, small, far-away targets are harder to hit than large, nearby targets.
Bear that in mind whenever you're building navigation, buttons, forms, or other
interactive elements. Give your users a large target area they can click with ease.
Laying Out the Content
Our dramatic dotted background makes a bold statement, but any text that overlays that eye-popping
pattern will be almost unreadable. We need to wrap our entire content area in a box that will both define
the space and provide a better backdrop for readable text. As it happens, we already have a wrapper
element in place (almost as if we planned for it) so it's just a case of giving that box a solid background,
along with some padding and a border:
#content {
background: #fff;
border: 2px solid #c9c5b4;
padding: 25px 15px 5px;
}
But let's not stop there: we can use RGBA color to make the background translucent , solid enough to
provide contrast for reading, but still allowing a very subtle hint of the pattern behind it show through. We
can also add a tiling background image, itself a translucent PNG, adding another layer of texture. We can
even use RGBA colors for the border, letting the colors and textures behind it come through slightly. We'll
still include the opaque colors for both the background and border, just to offer a fallback for older
browsers that don't support RGBA. Without that fallback background color, people using older browsers
wouldn't be able to read our text. Listing 10-17 presents our revised rule for the content box.
Listing 10-17. Building up translucent layers with RGBA and PNG
#content {
background: #fff url(../images/bg-texture.png);
background: rgba(255,255,255,.9) url(../images/bg-texture.png);
border: 2px solid #c9c5b4;
border-color: rgba(150,150,150,.5);
padding: 25px 15px 5px;
}
We don't need to repeat the entire shorthand border declaration, we only need to declare a new value for
border-color , the only value we're changing. The original, opaque hex color can remain in place for less
capable browsers.
Figure 10-10 shows an enlarged corner of the content box, showing off both the texture and the
translucent effect. It's pretty faint, but it works nicely on the rendered page. Little details like this begin to
add up to a unique design.