HTML Utopia: Chapter 4 – Designing Websites with CSS, No Tables

CSS Website Design

The development of any Website begins with its design. Typically, you’ll have a statement from your client, or at least a rough idea in your head, of the intended capabilities of the site. If you’re a by-the-book sort of developer, this may even take the form of a detailed specification document, which may describe the use cases (i.e. things that visitors can do) the site needs to support, the official specifications and recommendations the site must observe, and the list of browsers and platforms that must be able to access the site.

At this stage, it is customary for the designer to create a series of mock-ups, progressing from paper sketches, to prototype designs in a graphics application, to actual Web pages in HTML. If you have some experience in traditional site design, you probably produce even your very first paper sketches with a mind to the HTML code that will eventually replicate those layouts on screen.

As you move from tables to using CSS as your primary page layout tool, you’ll have to learn a whole new set of design principles upon which to base your initial mock-ups. In this and the next few chapters of this book, I’ll guide you through those principles so that you can come to grips with the new limitations, and let your imagination run wild with the new possibilities.

It is human nature to resist change. When you encounter things that CSS can’t do, you’ll be tempted to cling tightly to the heavy handed control offered by table-based design, rather than to brave the new world of CSS layout, where the layout of a hundred pages can hinge on a single rule. In this chapter, I’ll endeavour to coax you out of your comfort zone by explaining some of the “big picture” advantages of CSS-based design, and present some success stories of Websites that have taken the plunge and are reaping the rewards of CSS layout.

Advantages of CSS Design

In the past few chapters, I’ve touched on a number of the powerful features of,
and reasons for, using CSS for site layout. In this section, I’ll formalize those arguments and present them all in one place. Not only do I hope to convince you of the merits of CSS, but I hope to give you the tools to sell others on the technology.

In the cutthroat world of freelance Web development, you will often be called upon to explain why you will do a better job than other developers bidding on the same project. If CSS layout is one of the tools in your Web design arsenal, the sites you build will benefit from the advantages presented here. Many of these advantages go well beyond ease of development, and translate directly to extra value for your clients. Let them know about this – it just might make the difference between winning the contract and losing out to a designer who lives and breathes table-based design.

Increased Stylistic Control

The prima facie selling point of CSS, and the reason most Web developers first choose to dabble in the technology, is that it lets you control many aspects of the appearance of your site that you simply cannot control with pure HTML. There is, for example, a waning fad of removing the underlines from hyperlinks and indicating them with some other style distinction (such as bold or colored text, or perhaps adding the underline when the mouse hovers over a link) that was sparked by the introduction of CSS. For a complete reference to the style properties that can be controlled with CSS, see Appendix C.

In addition to the sheer number of controllable style properties, CSS lets you apply them more uniformly to the range of HTML page elements that are available. With HTML, for instance, if you want to put a visible border around an area of the page, you need to use a table to do it, because you can add borders only to tables. CSS not only gives you greater control over the look of the border (solid, embossed, dotted, or dashed, thick or thin, red or green, etc.), but also lets you add a border to any page element – not just tables. The design rationale behind CSS is to give the designer as many options as possible, so any style property that exists can usually be applied anywhere that it could potentially make sense to do so.

CSS simply has more style properties, that can be applied to more page elements, than HTML has ever offered. If you had to choose between CSS and HTML as a means for specifying the design of your site, based only on which would afford you the most visual control, CSS would win hands down. Despite this, common practice is to use HTML for design wherever possible, and to resort to CSS whenever an effect is needed that HTML cannot produce. While the visual appearance of sites designed with this rationale is just as good, you miss out on all the other advantages of CSS.

Centralized Design Information

As I’ve already explained, the best way to use CSS in the design of a Website is to write one or more .css files to house all your style code, and then link it to the appropriate pages with the HTML <link> tag. With this approach, everything to do with the look of your site can be found in one place, and is not jumbled up with the content of your site.

The idea is that you should be able to change the content of your site without affecting its look, and vice versa. In traditional Web design, where HTML tags and attributes are used to specify how things look in the browser, the code for these two aspects of your site is mixed together, so anyone who wants to modify one of these must understand both, or risk breaking one while making changes to the other. The look and the content of the site are said to be coupled.

This principle of keeping code that serves different purposes in different places is known in the programming world as decoupling. If a site’s style and content are decoupled, a Web designer can modify the look of the site by editing the .css file(s), while a content editor can add content to the site by editing the .html files.

Even more significant than facilitating organization and teamwork, this separation of code reduces code duplication. In HTML-based design, if you want the title at the top of every article on your site to be displayed in a large, red font, you have to put a <font> tag inside the relevant <h1> tag on every article page of your site. With CSS-based design, you can specify the font properties for the <h1> tags in one place, which saves you typing. And should you decide to change the appearance of these headings, you have only to modify the CSS file instead of each and every HTML file, which saves your sanity! These differences are illustrated in Figure 4.1.

Figure 4.1. CSS Centralizes your Design Code

If you look closely at Figure 4.1, you’ll see that on top of the organizational advantages described above, the browser has less code to download. On heavily designed sites, or sites with hundreds of pages or more, this reduced download time can have a significant impact both on the user experience, and on your bandwidth costs.

Semantic Content Markup

When you use .css files to decouple the content and look of your site, as I’ve just described, a curious thing begins to happen to your HTML code. Because CSS affords you complete control over the appearance of page elements, you begin to choose tags because they describe the structure and meaning of elements of the page, instead of how you want them to look. Stripped of most or all of the presentational information, your HTML code is free to capture the semantics of your site’s content.

There are a number of reasons why this is a desirable state of affairs, not the least of which is how easily you can find things when you’re making changes to the content of your site. The easiest way to spot a CSS site is to use the “View Source” feature in your browser – if you can make sense of the code there within 10 seconds, chances are that you’re not dealing with a site that uses table-based layout and other non-semantic HTML.

Search engine optimization (SEO) is greatly assisted by semantic HTML, because the fewer presentational tags the search engine has to wade through in analyzing your site, the greater your site’s keyword density – an important metric in determining your site’s ranking. As we’ll see, CSS lets you control the position of an element in the browser window, largely independent of its position in the HTML document. So, if you have a newsletter subscription form or some other lengthy chunk of HTML that won’t mean a whole lot to a search engine, feel free to move its code to the end of your HTML document and use CSS to ensure that it is displayed near the top of the browser window.

Increasingly supported by modern browsers is a feature of the HTML <link> tag1, which lets you restrict a linked style sheet so that it affects only the page when it’s displayed by a certain type of browser or display. For instance, you could link three .css files to a page: one that defined the appearance of the page on a desktop browser, another that dictates how the page will look when printed, and yet another that controls the display on mobile devices such as Internetconnected Personal Digital Assistants (PDAs). Only by using semantic markup, and allowing the CSS to take care of the display properties, is this sort of content repurposing possible.

Last, but certainly not least, are the vast improvements to accessibility that a site can garner by using semantic markup. We’ll discuss these in detail in the next
section.

Accessibility

Should you ever have the opportunity to observe a visually impaired individual browsing the Web, I highly recommend the experience. Alternatively, get yourself some screen reader software, switch off your monitor, and see for yourself what it’s like.

Heavily-designed Websites that make use of tables, images, and other non-semantic HTML for layout are extremely difficult to use when the most natural way to experience a Website is to listen to it read aloud, from top to bottom. It’s not uncommon for a modern Website to inflict 30 seconds or more of nested tables opening and closing, unidentified images for layout, and other nonsense, before the actual content begins. Now, if you think that sounds mildly annoying, imagine having to listen to it for each and every page of the sites that you visit!

Semantic HTML nearly eliminates this aural garbage, because it ensures that every tag in the document has a structural meaning that’s significant to the viewer (or listener). An aural browser ignores the visual formatting properties defined in the CSS, so the user need not be bothered listening to them.

On a site that used semantic markup, for example, a visually impaired user would never have to wonder if a word was bold because it was more important, or just because it looked better that way. Elements that were displayed in bold for design reasons would have that property assigned using CSS, and the aural browser would never mention it. Elements that needed additional impact or emphasis would be marked up using the semantically meaningful <strong> and <em> tags, which are displayed by default as bold and italics in visual browsers.

A complete set of guidelines exists for developers who are interested in making their sites more accessible for users with disabilities. The Web Content Accessibility Guidelines 1.0 (WCAG) is recommended reading for all Web developers, with Guideline 3 treating the idea of avoiding presentational markup in favour of semantic markup.

Standards Compliance

The WCAG is not the only specification that advocates the use of CSS for the presentation properties of HTML documents. In fact, the latest HTML standards themselves are written with this in mind!

The World Wide Web Consortium (W3C) is the body responsible for publishing Recommendations (de facto standards) relating to the Web. Here are some of the W3C Recommendations that relate to using semantic markup and CSS:

HTML 4
https://www.w3.org/TR/html4

The latest (and last) major revision of the HTML Recommendation marks all non-semantic elements and attributes as deprecated2. The <font> tag,
for example, is clearly marked as deprecated in this standard. Under the description of deprecated elements, the Recommendation has this to say:

“In general, authors should use style sheets to achieve stylistic and formatting effects rather than HTML presentational attributes.”

XHTML 1.0
https://www.w3.org/TR/xhtml1/

A reformulation of HTML 4 as an XML document type, XHTML lets you use HTML tags and attributes, while also benefiting from the features of XML (mixing tag languages, custom tags, etc.).

This Recommendation includes the same tags and deprecations as HTML 4.

Web Content Accessibility Guidelines 1.0
https://www.w3.org/TR/WCAG10/

As described in the section called “Accessibility”, the WCAG Recommendation strongly recommends using CSS and semantic markup in Web design to improve accessibility. I’ll let the recommendation speak for itself:

“Misusing markup for a presentation effect (e.g., using a table for layout or a header to change the font size) makes it difficult for users with specialized software to understand the organization of the page or to navigate through it. Furthermore, using presentation markup, rather than structural markup, to convey structure (e.g., constructing what looks like a table of data with an HTML PRE element) makes it difficult to render a page intelligibly to other devices…”

According to many Web developers, strict standards compliance is an idealistic goal that is rarely practical. One of the primary goals of this book is to demonstrate that this is no longer true. Today’s browsers provide strong support for CSS and produce more consistent results when they are fed standards-compliant code. While bugs and compatibility issues still exist, they are no more insurmountable than the bugs that face designers who rely on noncompliant code.

CSS Success Stories

The following sites serve as great examples of what can be accomplished with CSS page layout:

1. SitePoint

   I know, I know… it’s unseemly to use my own publisher as an example of why CSS works, but you’ve got to hand it to these guys. They’ve not only taken a tired, table-laden layout and replaced it with a fresh, standardscompliant design, but they’ve also made the site vastly more usable in the process.

Though the flat colors in use on this site may look simplistic at first glance, this “low fat” approach to the design keeps the pages loading quickly, despite often lengthy content and a plethora of navigational options.

A List Apart

Since its inception in 1998, this site, and the associated mailing list, has become one of the leading sources of information and advocacy for CSS design and layout. The site itself is a model of simplicity, but it demonstrates that simple doesn’t have to mean boring or ugly.

Netscape DevEdge

DevEdge is Netscape’s resource site for Web developers. With Netscape 6 and 7 having been based on a standards-compliant Web layout engine, it seemed only logical to redesign the site to take advantage of this technology. They’ve even published an article that covers their approach to this redesign.

ESPN

The first mainstream, commercial Website to be built with CSS page layout techniques, ESPN.com is the ice breaker that the Web design community has been waiting for!

When pitching a site design idea – specially when you propose to use “new” technologies like CSS layout – clients will often ask if you can show them another site that has implemented a similar solution successfully. Until now, all the best examples of CSS site design were either sites written by Web developers, for Web developers, or personal sites that could afford to take risks because they weren’t in it for the money. For an in-depth interview with one of the designers behind this site, visit Netscape DevEdge.

Fast Company Magazine

The online presence for a popular business magazine, this site was redesigned to make use of CSS layout and semantic markup. The actual look and organization of the site hasn’t changed drastically from its previous version, but thanks to CSS, its pages load much more quickly.

Our Sample Site: Footbag Freaks

For the rest of this book, I will relate each of the techniques we discuss, wherever possible, to a sample site that has been developed especially for this book. Called Footbag Freaks, this fictitious site can be found online at http://www.footbagfreaks.com/. The source code is also available for download from this book’s Website. You can see the front page of the Footbag Freaks site in Figure 4.2.

Figure 4.2. The Footbag Freaks Home Page

This site makes full use of CSS for both page layout, and the styling of text and other page elements. The HTML code is entirely semantic. The site has been designed and tested to work on the following browsers:

• Internet Explorer 5 or later for Macintosh and Windows
• Opera 6 or later
• Mozilla 1.0 or later and related browsers, including Netscape 6 or later and Camino

The site complies with the following W3C Recommendatons:

• XHTML 1.0 (Strict)
• WCAG 1.0 (AAA Rating for Accessibility)
• CSS 2.0

Summary

In this chapter, I provided the justification for all that is to follow. I explained in detail the most important advantages that CSS has to offer for your Web design work. These advantages fell under the headings of:

• increased stylistic control
• centralized design information
• semantic content markup
• accessibility
• standards compliance

After presenting a few success stories – sites that have used CSS design techniques to good effect – I introduced our own, admittedly fictional, success story: Footbag Freaks. Throughout the rest of this book, we’ll explore the wide range of CSS features and techniques that go into making a site like this one.

Chapter 5 begins this process by looking at how to build the skeleton of a page layout, and flesh out major pieces of design using, pure CSS techniques.

Read Chapter 5 now!