Structure & Style

Before you can fill a house with furniture, install rugs or paint walls, a house first needs rooms. It needs defined areas with floors and doorways and ceilings. The structure of the house must be in place before its interior can be filled with stuff, and style.

The basic principle is the same when designing a web site. Before the content of a web page can be displayed — whether it be a large heading, an ordered list or a bunch of blue hyperlinks — the web page itself must have a fundamental structure. Once the content of a web site is anchored by a good structure, distinctive style can then be applied for its presentation.

The elements of structure, presentation, and content embody the core of any web site. How these elements are treated in the construction of a web site can, at their best, render a site useful, delightful and available to all. If the three elements are programmed poorly, however, a site will be arduous to update, ineffective and arbitrarily inaccessible.

This is why organizations such as the World Wide Web Consortium (WC3) and the Web Standards Project (WaSP) advocate the use of “web standards” to create and interpret web-based content. Two of the web development guidelines are to “keep structure separate from presentation” and “keep content separate from presentation.”

Modern web technologies provide tools to implement these strategic practices – HTML (Hyper Text Markup Language), CSS (Cascading Style Sheets) and XML (eXtensible Markup Language). The programming techniques allow each of the three elements – structure, presentation and content – to be coded in separate files while being collectively contained within a web site.

STRUCTURE

HTML is standard way to build the structure of a web page. Hyper Text Markup Language labels pieces of content so web browsers can identify headings, hyperlinks, lists and images. Web browsers or “user agents” can then look at the structure of the document and format it in a way that makes sense (1).
But HTML was not designed to describe the exact physical or typographical presentation of a document (1).

In the not-so-distant past, designers wanted the web to look and act like a printed document. Designers wanted WYSIWYG (what you see is what you get) and became accustomed to manipulating HTML in any way possible to will to control the visual presentation of a web page. The techniques (which I am also guilty of using), sometimes jokingly referred to by some as “HTML terrorism,” included:

The browsers released by Netscape and Microsoft in the mid-1990s were also poor in their support for Web standards, allowing the use of browser-specific HTML extensions to control the appearance of pages (1).

What designers failed to understand back then is that making a document look identical across browsers and platforms is next to impossible (3).

The web has particular advantages and limitations. Designers cannot control what kind of equipment visitors use to view pages or users’ browser preferences.

Web designers are beginning to understand that they don’t have to exercise absolute power over a site’s design to make the content useful, valuable or delightful.

Building web page structure in platform-independent HTML helps to assure that anyone using any web browser can view the content, noted Geoff Duncan on the website TidBITS (1). This allows a web site to reach the greatest possible audience.

Now, with the majority of Internet users accessing web pages with browsers that support CSS, designers can use HTML the way it was meant to be used: to describe the structure of a document (3). Developers should remove all references to style from the HTML of a web page and use CSS to handle the presentation.

“You can have structure without style, but you can’t have style without structure,” observed web design expert Eric Meyer (4). “Intelligent structure makes styling lots easier.”

STYLIZING THE PRESENTATION

Cascading style sheets are the standard way for web designers to format information on a web site. Positioning, sizing, margins, leading, type faces, and colors – everything geared toward style can be isolated inside a single CSS file (5).

CSS allows developers to separate style (look, appearance, colors, fonts and layout) from the page structure (1). By modifying just the CSS file, web developers can change the font on an entire site, make larger text, splash on a new color, change the position of elements or hide elements.

CSS makes it easier to carry out site-wide changes because developers have to change one CSS file rather than all individual pages.

There are other advantages, too. A site-wide style sheet helps shorten page download times for all users. The style information only has to be downloaded once, not over and over again with each page that is served up (6). Files are more accessible to a wider variety of mediums, including hand-held devices and printers, because separate CSS files can be created for each distinct display.

With CSS, documents suggest how they should be formatted, rather than demanding a particular presentation (1). So if a user prefers a larger font, or wants to see just the text of a particular page, CSS is flexible and allows users to tailor the presentation.

Sarah Horton in her 2006 book, “Access by Design” uses color as an example of why CSS is better than HTML for controlling presentation.

“Colors set in style sheets are easily customized using user style. Colors set on the page are less flexible,” Horton writes. “When colors are defined in the HTML code, users cannot selectively override color settings. They have no choice but to override all color settings and display the page using the browser-defined color settings. Colors in graphics cannot be customized. If users have difficulty with the colors in an image, they have no way to remedy the display so as to access the content. When essential elements such as headings and links are presented as images, users who need custom colors may be unable to use the site.”

However, Horton adds, when color is applied using CSS, designers have a way to define, and users to customize, color in the user interface (9).

CONTENT

None of the aforementioned structuring or presenting would happen on a website without content.

The single most important thing most Web sites can offer to their users is content that those users will find valuable (8). Information is what drives web sites. Therefore any site must begin with content.

“It is vitally important to iterate the importance of content before the designing and building phases of a web site,” observed Christopher Schmitt in his 2003 book, Designing CSS Web Pages (2). Content needs to match the design, so it needs to be considered before the structure is built.

Site developers, for example, need to determine how much structure will be needed to accommodate the content. And raw content must be marked up structurally before it can be designed. Markup can be done using HTML, as discussed previously, or it can be done using XML.

XML stands for Extensible Markup Language. It is a markup language that is designed to specifically describe data. XML is about describing information, while HTML is about the display of information (7).
XML wraps information in tags, so different kinds of software can send, receive or display the information. XML tags are not predefined like HTML. Web designers must invent their own tags, specific to the data that is being managed.

A big benefit in converting data to XML is that it reduces the complexity of the content and creates a data form that can be read by many different types of applications and exchanged between incompatible systems (7).

With people accessing information using so many different platforms, isolating content within an XML file can help assure that the data can be shared by different computers and devices.

XML can be used to isolate the content of a web page in a separate file. Once content is marked up structurally, web developers can use CSS to design and redesign the content for visual presentation. If content resides in a separate XML file, it will make adding or updating the site easy and maintain the site’s presentational consistency (5).

TRANSFORMING GRACEFULLY

So why should web developers and designers adhere to standards that call for separating structure (HTML), style (CSS) and content (XML)?

Forward compatibility is one reason. Forward compatibility is the ability to mark up content in a manner today that will allow it to display in future browsers. Web documents, like printed materials, will be able to retain their long–term durability and viability (2).

Another reason is simpler development and maintenance. With web standards, all developers will be creating sites in the same language, as opposed to a ‘Tower of Babel’ model where large amount of proprietary knowledge is needed for every site.

Designers, especially ones coming from the print world, may feel artistically boxed-in by web-centric rules that separate structure and presentation, and content and presentation. Graphic artists at my workplace, The Hartford Courant, for example, prefer to design content for the web using Adobe Flash. With Flash, these artists feel they can retain total control over the presentation of the content because Flash works in a WYSIWYG-like manner.

“[Print designers] first priorities were fonts and colors instead of content and interaction,” notes Peter-Paul Koch in a 2003 article from Digital Web Magazine (10). “The web [is] a different medium, where content and interaction are far more important than pure form.”

The design possibilities displayed at www.csszengarden.com have proven to me that wholly original and creative online presentation can be and is being accomplished with CSS files and structured HTML. The designs are artistic, all while keeping the content in a functional state, accessible by all.

Mastering CSS is a challenge for designers, as is learning Adobe Flash. But CSS seems to be more than worth the effort. Building web pages with separate elements will make web content more understandable, navigable and available, whatever technology they are using to access it – whether it is a desktop browser, voice browser, a mobile phone or a PDA. Flash can’t do that.

In the end, it is the content of a web site that must be preserved. Presentation is secondary. If a site can transform its presentation gracefully, the information contained within will remain accessible and do its job fulfilling users’ expectations.

Citations:

1. Duncan, Geoff (2000). Building Characters: A Brief History of the Web War. TidBITS.com. March.20. http://db.tidbits.com/getbits.acgi?tbart=05859

2. Schmitt, Christopher (2003.) Designing CSS Web Pages. Indianapolis: New Riders, pp. 14-15, 18-308.

3. Johansson, Roger (2006). Developing with Web Standards: Recommendations and best practices. 456 Berea Street. August 24. http://www.456bereastreet.com/lab/developing_with_web_standards/full/

4. Meyer, Eric (2003). The Incomplete Divorce. October 15. http://meyerweb.com/eric/thoughts/200310.html

5. Cohen, Michael (2004). Separation: The Web Designer’s Dilemma. A List Apart. May. 14. http://www.alistapart.com/articles/separationdilemma

6. WC3 (1999). Web Content Accessibility Guidelines 1.0. May 5. http://www.w3.org/TR/WAI-WEBCONTENT

7. González, Graciela (2001). On Database Theory and XML. Sam Houston State University website. http://www.shsu.edu/~csc_ghg/presentations/ML.ppt

8. Garrett, Jesse James (2003). The Elements of User Experience: User-Centered Design for the Web. Indianapolis: New Riders, pp. 35-36.

9. Horton, Sarah (2006). Access by Design. Indianapolis: New Riders, pp. 160-161.

10. Koch, Peter-Paul (2003). Form Follows Function. Digital Web Magazine. February 6. http://www.digital-web.com/articles/form_follows_function