Workshop Description
If your web skills were acquired more than 3 years ago, you may be surprised to learn how pages are now built using techniques recommended by the World Wide Web Consortium (W3C).
This workshop will help you discover how to separate content from its visual appearance using XHTML, Cascading Style Sheets, and basic HTML markup to produce a page that displays well in a web browser, a PDA or cell phone, and even a paper printout. Such a page will also be accessible to those with disabilities. Learn these and other easy-to-implement techniques that will move your web design skills into the 21st Century and make your website a resource that everyone can use.
Introduction
To understand the future of web design, you need to appreciate its past...
Hypertext Markup Language (HTML) was invented in 1990 by Tim Berners-Lee. It is a simplified subset of the older Standard Generalized Markup Language (SGML), intended to apply structure to documents on the World Wide Web.
HTML was designed to "mark up" a document into semantic units. For example: level 1 headings are indicated with the tag <h1>, paragraphs are indicated with the <p> tag, and so forth. As it was originally conceived, HTML was a language for the exchange of scientific and other technical documents, suitable for use by non-document specialists. There was little concern in the early days for controlling the appearance of documents beyond providing basic visual cues to changes in document semantics.
It's important to note that at this early stage, content and presentation were separate concerns. It was the job of the document's author to use HTML to indicate structure and meaning; how those semantic elements were displayed was up to the user and his or her browser (originally Mosaic, later Netscape).
As we all know, the Web took off quickly. In a remarkably short period of time, HTML became wildly popular and outgrew its original purpose. Graphic designers soon got involved in the new medium and began to apply the skills they had honed in the world of print publications. Before we knew it, designers were trying to exert pixel-level control over the appearance of text and graphics.
Unfortunately, HTML was never designed to do this. A whole host of clever hacks were created and quickly became the stock-in-trade of web designers around the globe. For example, complex layouts were created as images in Photoshop and dropped onto web pages. Occasionally an entire page was nothing but a single graphic! Client-side image maps became popular as a way to restore hyperlinks to regions of images that, often as not, included pictures of text!
Gradually, we realized that big graphics were a bad idea, not so much because they were a clumsy substitute for simple text, but because they were just too slow on our 56K modem connections. So, we began slicing the graphics up into many small pieces, and we figured out how to create complex tables to hold them tightly together. We also forgot that tags were designed to indicate structure and meaning. We began to mark up the text of our documents, not according to their logical structure, but according to how the tags made the elements look in the browser. To this day, it's not uncommon to see a page with "headers" created with <font> tags that include attributes for color, style, and size. You'll also find liberal use of line breaks instead of new paragraphs when no space between lines is desired.
It's bad enough that these practices ignore the logical structure of the document; what's worse is that they tie the page's visual appearance to its content. Such a page limits its audience both in terms of technology and viewer preference. For example, a page that doesn't stretch to fill the browser window as it is resized doesn't take advantage of the fluid and dynamic nature of the new medium. Instead, it resembles a printed page with its fixed size and single method of being viewed. Similarly, a web page that doesn't allow users to control text size ignores the modern realities of ultra-high resolution displays and the vision needs of older viewers.
Cascading Style Sheets (CSS)
Fortunately, a new technology, Cascading Style Sheets (CSS) version 1.0, was developed in 1994 and introduced in 1996. But due to inconsistent browser support, the standard wasn't fully adopted until March of 2000. CSS version 2, proposed in 1997, has steadily gained browser support, especially among standards-compliant browsers like FireFox, Safari, and to a lesser extent Internet Explorer 6.
Cascading Style Sheets resemble styles in word processing and page layout programs. By defining a style "rule" to control the appearance of structural elements like headers or list items, and by linking multiple pages to that rule, a designer can efficiently manage the appearance of an entire site. And by linking to multiple style sheets, each designed for different display "media," the appearance of a web page can vary according to context. For example, one style sheet can control appearance on screen, while another governs how that page will print.
CSS is a part of a modern set of web standards, recommended by the World Wide Web Consortium (W3C). Appropriately, this organization is directed by the Web's inventor, Tim Berners-Lee. The W3C's mission is to "lead the World Wide Web to its full potential by developing protocols and guidelines that ensure long-term growth for the Web."
XHTML
Along with CSS (currently at version 2.1), XHTML is now recommended for web development. XHTML is a synthesis of HTML 4.0 and XML 1.0, and thus combines the established compatibility of HTML markup and the forward-looking potential of XML. According to the W3C website, "The XHTML family is the next step in the evolution of the Internet. ...By migrating to XHTML today, content developers can enter the XML world with all of its attendant benefits, while still remaining confident in their content's backward and future compatibility."
Some of the benefits of migrating to XHTML include (again, from the W3C site):
"Document developers and user agent designers are constantly discovering new ways to express their ideas through new markup. In XML, it is relatively easy to introduce new elements or additional element attributes. The XHTML family is designed to accommodate these extensions through XHTML modules and techniques for developing new XHTML-conforming modules (described in the XHTML Modularization specification). These modules will permit the combination of existing and new feature sets when developing content and when designing new user agents."
"Alternate ways of accessing the Internet are constantly being introduced. The XHTML family is designed with general user agent interoperability in mind. Through a new user agent and document profiling mechanism, servers, proxies, and user agents will be able to perform best effort content transformation. Ultimately, it will be possible to develop XHTML-conforming content that is usable by any XHTML-conforming user agent."
Although XHTML and HTML 4.0 are very similar, developers must be aware of XHTML's slightly more stringent requirements. Some of these include case sensitivity (element and attribute names must be in lower case), end tags for empty elements (e.g., <br />), and required quotes around attribute values (e.g., <td rowspan="3">).
Quirks Mode vs. Standards Compliance Mode
Although modern browsers support most of the CSS 2 specification, designers may still struggle with their differences, especially in Internet Explorer. Be aware that IE 5.5 and 6.0 require the <!DOCTYPE...> declaration to be the first thing in the code of an XHTML page. If not, the browser reverts to its old, "quirky" method of calculating spaces around page elements, known as the CSS "box model." This bug has given its name to a broken display mode called "quirks mode."
You can find a great deal more information about normal and quirky CSS box models on the Web. An understanding of the box model generally is very important to knowing the difference between margins and padding, and how a border falls between the two. Do a search for "quirks mode" to get started.
That's all for now. We hope you enjoy this brief introduction to modern and accessible web design.
Craig Spooner and Cath Stager-Kilcommons
ACCESS Project
Occupational Therapy Department
Colorado State University