WebReference.com - Part 1 of chapter 1 of Cascading Style Sheets: Separating Content from Presentation, from glasshaus (5/5)

[previous]

Cascading Style Sheets

In addition to using non-standard tags like the <font> element and abusing tables for page layout purposes, web authors have attempted to overcome the shortcomings of HTML by placing text in images that are then loaded into the page via the <img> element, or building whole sites in proprietary technologies such as Flash, a plugin application that loads in a browser window. Both of these techniques afford the designer much greater control over presentation than HTML does – especially typographically speaking, basically giving free reign on typeface, color, and layout. When compared to the meager presentation control HTML affords, even when using <font> and <table> a web site built with images instead of text is indeed very attractive.

However, such practices have negative consequences. They destroy the structural validity of a web page's markup. This results in the following problems:

• Inaccessibility
• Degraded performance
• Increased production work

Inaccessibility

Something not at all immediately apparent to most web professionals, even experienced ones, is that the Web's audience is not limited to users of Internet Explorer and Netscape Navigator. In addition to these premier visual browsers, there are a plethora of other visual browsers that have smaller but not insignificant groups of users. The Opera browser, Konqueror, Icab, Omniweb, and countless other browsers are used by many web surfers, chosen because they are typically faster at rendering pages than the big two, have a smaller disk footprint, or are less prone to security hole exploits.

In addition, the Web has already spread to the TV with the Webtv browser, and web browsers are now a standard feature on digital phones. Browsers are currently being built into appliances, so you can shop for groceries online from your refrigerator, or call up a recipe from an online recipe archive right in your kitchen. Perhaps most importantly, special software, such as a screen reader, helps the blind to access web content. With good solid structural XHTML markup, each of these various Internet devices can have equal access to your site's content.

In addition, the US federal government has even taken steps to ensure the accessibility of all federally run web sites. The site https://www.section508.gov details these federal requirements, and many states are currently enacting similar legislation to ensure these are fulfilled on their state run sites. Such guidelines, though unfortunately smacking of bureaucratic red-tape and regulations, are forward-looking and actually quite in keeping with the spirit of the Web.

Degraded Performance

Bad HTML practices used to achieve your layout and page design goals can actually make your pages load more slowly in the browser. Using <table> and <font> elements or inserting site copy into images adds bulk to each web page. Not only does that bulk require more time to download, it slows the browser's rendering engine down when it tries to display the page. It's a double whammy. Nested tables, which were almost a necessity when trying to achieve complicated table layouts, increase rendering time logarithmically in many common browsers as tables are added to the markup of a page.

Increased Production Work

Web site maintenance is an often overlooked consideration in the world of web development and design. All too often, client pressure to quickly produce a site that looks the same in IE and NN results in negligence on the part of the web professional, who pushes to complete the work quickly and easily, often testing the site only in browsers likely to be used by the client. It is often a difficult task to educate the client on the importance of any factors other than how the page looks in IE, although the lesson is sometimes learned later when site maintenance costs accumulate.

The fact is that reliance on HTML presentation hacks can seriously affect the maintainability of a site; not only does the site risk future obsolescence as newer browsers are introduced, but simple changes to a large site can become a nightmare of "search and replace", with fingers crossed.

Inserting presentation rules directly into HTML documents with <font> and <table> tags creates a maintenance headache, as any changes to the site presentation must be made on each document. Even before the site launches, implementing client-requested changes to a site under development can be a headache if a hundred HTML documents need to be changed for simple layout tweaks.

[Continued in part 2... -Ed.]

[previous]

Created: June 10, 2002
Revised: June 10, 2002

URL: https://webreference.com/authoring/style/sheets/cssseparate/chap1/1/5.html