| CSS (Cascading Style Sheets) offer a way of | | | | have moved to CSS design is that the cleaner |
| keeping content and design elements separate. | | | | (X)HTML code is also lighter and faster to download. |
| Because this separation allows us to include more | | | | CSS and (X)HTML optimization is often a viable |
| meaningful content on each page, Web sites | | | | investment. If a Web site has a large amount of |
| designed with CSS often provide their owners with | | | | traffic, this often results in a major reduction in |
| significant advantages over Web sites designed with | | | | server bandwidth use and a considerable cost |
| the older table based techniques. Here are several of | | | | savings. |
| those benefits: | | | | 6. CSS designs can allow text to be resized and flow |
| 1. CSS (Cascading Style Sheets) with (X)HTML has | | | | with relative grace. It seems that designers who tend |
| become the new standard for professionally designed | | | | towards tables as a design tool also more often fix a |
| Web sites. Major media Web sites like ESPN, MSN | | | | text size that prevents browsers like Internet |
| and others have been redesigned using CSS. It's time | | | | Explorer from changing its size. This comes from a |
| to move away from the clumsily overused hacks of | | | | fear that the design will break when text sizes are |
| table based Web design. | | | | changed. All sites eventually break when text size |
| 2. CSS with semantic (X)HTML is meaningful even | | | | changes drastically, but CSS is more able to handle |
| when the design elements are not visible due to the | | | | flexible text sizes that allow readers to view text at |
| use of an assistive device or a Web site visitor's | | | | a size with which they feel comfortable. |
| decision to disable style sheets. | | | | 7. No More Font Tags! OK. You caught me, this is |
| In the early days, HTML was a simple document | | | | actually a continuation of Reason #4 but is so |
| markup language that was ideally suited to structuring | | | | common that it deserves a separate treatment. |
| documents logically for easy comprehension. With the | | | | Imagine a Web site of thousands of pages in which |
| event of the World Wide Web, there was a popular | | | | each page has 3 or 4 different styles of typefaces |
| demand for Web sites that paralleled what could be | | | | and sizes. Each of these variants is set using an |
| achieved with print media, and HTML was hacked and | | | | embedded font tag. The Web site owner decides to |
| expanded to provide what the public demanded. | | | | change typefaces, and the webmaster dutifully visits |
| The most perplexing hack that has become a | | | | each Web page and adjusts the properties of every |
| permanent feature of Web design is the use of | | | | font tag on each page. If he or she is a skilled user |
| tables to structure images and text on a page. This | | | | of Dreamweaver or other WYSIWYG editor the |
| method of design renders the text presented to | | | | edits may be possible using find and replace, |
| assistive devices almost meaningless as the continuity | | | | however, it will still be difficult to pull off quickly and |
| present to the visible eye is lost. | | | | will require much time to visually verify that the |
| 3. By focusing on HTML structure for meaning first | | | | correct changes have been made. |
| and design second, a CSS designer can drastically | | | | Now picture a Web site with content structured for |
| reduce the superfluous markup created by the use | | | | meaning. Odds are that the font tags used in the |
| of tables for design. This cleaner code can have a | | | | previous example were inserted to create a visually |
| dramatic impact on search engine visibility. With | | | | coherent and meaningful presentation. Without them, |
| increased search engine visibility, more of your Web | | | | everything on the page has an equal weight. Let's |
| site's valuable content will be indexed and become | | | | replace all font tags with heading elements, |
| searchable on major search engines like Google, MSN, | | | | paragraphs, strong text, emphasized text, and assign |
| and Yahoo!. Of course, this assumes that you've | | | | class names to anything like warning or alert text for |
| created Web content that people want to read. | | | | which there is no stock HTML element. Now, our CSS |
| 4. Separating design and content with CSS and | | | | document can assign typefaces (fonts) based on |
| (X)HTML usually results in a more flexible design. If | | | | these elements, tags, and class names with complete |
| the designer correctly separates all design elements, | | | | understanding of their semantic importance in the |
| such as background images used in the templates, | | | | Web page. Even better, the typefaces used can be |
| most if not all of a Web site's design can be altered | | | | change quickly, even in seconds, from one or more |
| by changing the images and CSS files in a single | | | | CSS files. |
| directory of the Web site. In the old days, this | | | | The second example has two benefits, ease of |
| required the use of Dreamweaver templates, fancy | | | | changing the typefaces (and all other design |
| find and replace techniques, and the repetitive work | | | | elements), and the added fringe benefit of a |
| of checking each page of the Web site and tweaking | | | | meaningfully structured, coherent HTML document |
| each to fix bugs. | | | | that makes as much sense without design elements |
| 5. One of the reasons some large media Web sites | | | | as it does with them. |