Thinking with Type_ A Critical Guide for Designers, Writers, Editors, & Students - PDF Room

text | 135

the city Website, 2010. Designer: Graham Stinson. The

City is a social networking site that helps churches and non-profits

engage in community activities. Auto-detection determines whether

the reader is using a desktop or mobile phone and then re-routes

layout characteristics in order to create a custom view. Each layout

references a different CSS file; the main HTML for each page

remains the same.

structural hierarchy Designers and editors

should organize content structurally rather than

stylistically, especially in digital documents. When

creating style sheets in a page layout program,

label the elements with terms such as “title,”

“subtitle,” and “caption” rather than “bold,” “tiny,”

or “apple green Arial.” In CSS, elements such

as em (emphasis), strong, and p (paragraph)

are structural, whereas i (italic), b (bold), and

br (break) are visual. As a body of content is

translated into different media, the styles should

continue to refer to the parts of the document

rather than to specific visual attributes.

Structural hierarchies help make websites

understandable to search engines and accessible

to diverse users. A document should have only

one h1 heading, because search engines apply

the strongest value to this level of the document.

Thus to conform with web standards, designers

should apply heading levels (h1, h2, and so on)

structurally, even when they choose to make some

levels look the same. Using structural, semantic

markup is a central principle of web standards.

For more on web standards, see Jeffrey Zeldman with Ethan

Marcotte, Designing with Web Standards, third edition (Berkeley,

CA: New Riders, 2009).

structure trumps presentation