I often refer to this disabling of CSS as the "10-second usability test." To be sure, it's not a scientific method for determining the true usability of a site, something that often takes focus groups, surveys, time, and other debatably useful measurements. But by quickly taking the design away, you'll find it easier to get a handle on how the
core
of this page is going to be presented to the world. Most people using modern browsers will get your lovely design, but some may be delivered the raw content only, and it's helpful to keep this in mind during the design and development process.
Historically, designers have built pages using tables and presentational markup (
<font>
tags, image spacers, and so on) with the goal of making the page look precisely the same in every browser imaginable. And most of the time it worked. But these sites were the most
inflexible
, inaccessible beasts, incapable of being
viewed
and read in anything but a typical Web browser. As the number of different devices and software
increases
, as well as the broader understanding for creating Web sites that are more accessible to all types of users, it becomes critical to measure your designs against a variety of scenarios. Turning off CSS is another item on the checklist. Let's take a look at two possible results.
A COMMON APPROACH
A somewhat dangerous scenario is a site that
mixes
CSS to handle
certain aspects
of a site's design, with presentational markup and background images coded within the page itself (often using nested tables for its layout).
For example, Figure 6.11 shows BaseballDog.com (a fictitious example based on a real-world site, which surprisingly declined our enticing offer to expose it) with CSS turned off. The page becomes quite unreadable, with default black text and blue links sitting on top of a dark-blue tiled background image. Under normal conditions, with CSS turned on, the site looks and reads just fine.
What's happening here is a mixture of presentation and structure, where inessential graphics (such as the tiled background image) are tied directly to the
markup
. For instance, if BaseballDog.com wanted to place a tiled background image on the entire page, they would add a background attribute to the
<body>
element:
<body background="/img/tile.gif">
But adding graphics directly to the markup like this has consequences, as we see when CSS is removed.
CSS is used to control text and positioning only, and when it's taken away, we're left with an unreadable combination. Quite obviously, BaseballDog.com hasn't yet
chosen
to embrace CSS and meaningful markup completely, where the separation of content and design can help a site become readable and usable under a much broader set of circumstances.
It is possible to take a transitional approach when building a site, using CSS for only a handful of elements, while using tables for the framework and layout of a page. When done well, taking away the CSS styles will leave a readable and functional site. I'm stressing the importance of testing what occurs when styles are disabled, which can leave a site unreadable (as in the case of BaseballDog.com) or
ideally
, unhindered by the absence of CSS. Let's take a look at one such example.
A BULLETPROOF APPROACH
Evidence of
good
page structure is almost immediately noticeable when a page is viewed without CSS. Take, for example, virus protection software maker McAfee's
nicely
designed site (www.
mcafee
.com) (Figure 6.12). When viewed sans style, the thoughtful organization and easy-to-read content are right up front, and emphasis has been placed on using markup that will work well, regardless of what browser or device is reading it (Figure 6.13).
As you scroll through the entire page, it's clear that meaningful markup was used to structure link titles, descriptions, and lists of links. It's as if you've taken an
x-ray of the document
,
peeking
in at the bones behind its design (Figure 6.14).
If the browser or device happens to
not
support CSS, the page's design goes away, but the content and functionality remains. Think: phones, PDAs, handheld computers, small-screened devices, screen-reading software, and text-only browsers. While
some
of these may support the use of style sheets in some capacity, many do not. By ensuring pages are readable and usable regardless of what state they may be rendered in, you'll be closer to making your site bulletproof.
