With or Without Style


Throughout the book so far, we've been focusing heavily on the use of CSS to help bulletproof designspreparing them for a multitude of scenarios, and helping to protect the content that's there for the design to support. But what happens when the CSS is taken away? What do pages look like, and act like, when the design is tossed out and the content is left naked to stand on its own?

It's an important and simple step to takeone that I advise all Web designers to embrace when building sites that utilize lean markup and CSS for their design. By looking at a page's bare structure (don't worry, pages don't embarrass easily) it quickly becomes obvious as to how the content is going to fare in browsers and devices that don't support CSS. While you can lean heavily on CSS to create beautiful and compelling designs, it's important to make sure the page is still readable and functional when it's unsupported or unavailable.

So, here's another way to bulletproof your design: take that design out of the mix completely, then assess the readability of the page. Does it still work?

THE 10-SECOND USABILITY TEST

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.

Figure 6.11. BaseballDog.com, a fictitious site that's based on a real-world example, is shown here with CSS turned off. Notice how difficult the default text color and links are to read.


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

Figure 6.12. The clean design of McAfee's home page, shown here in February 2005, is a product of good markup structure and CSS.


Figure 6.13. With CSS turned off, the skeleton of McAfee's site is revealed.


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

Figure 6.14. More of McAfee's structure is revealed as you scroll down the page.


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.



Bulletproof Web Design(c) Improving flexibility and protecting against worst-case scenarios with XHTML and CSS
Bulletproof Web Design(c) Improving flexibility and protecting against worst-case scenarios with XHTML and CSS
ISBN: N/A
EAN: N/A
Year: 2006
Pages: 97

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net