Chapter 10
Editorial Style

Only connect!
—E. M. Forster, Howards End

The measure of good editorial style is whether the content is useful—whether it meets clear user and business goals. Content should meet real, carefully researched user needs. Too often corporate and institutional web teams produce content designed primarily around internal goals and organization charts, forgetting that users couldn’t care less what your mission statement is, or how you are organized.

In this chapter we focus on writing style and composition best practices specifically as they apply to the web, mobile, and social media channels.

Style

Online writing is best presented using short segments of texts written in a clear, concise style and with ample use of editorial landmarks. This style supports the scanning style used by most web users. But online prose does not have to be stripped down to a few headlines and bullet points to be effective: readers will engage directly with longer written materials that are relevant, accessible, and interesting.

Writing for engagement

Engaging content is relevant and targeted, and does not waste the users’ time or demand unnecessary effort. Start with a clear content strategy, defining what you have to say, to whom, and what questions they want answered or tasks they want to achieve (see the section on “Content Strategy” in Chapter 1, Strategy.) From there, respect your users by anticipating their questions and providing answers in a way that is conversational and interesting, and that responds to diverse ways of consuming information.

Desire lines

Desire lines are the pathways that arise from many people taking the same path, usually in opposition to built routes and pathways. These alternate routes typically cut across a space that was intentionally left untouched, like a protected green space, or they provide a more direct route than a corresponding sidewalk that has angles and bends. A desire line is a natural expression of impulse, visibly demonstrating how we prefer to navigate our environment when given the option, rather than following a predefined journey based on choices made by the designer. Understanding and embracing desire lines is an excellent means to designing spaces, products, and services that map to preferences, and that people want to use. In landscape design, one approach to a new space is to wait for the desire lines to emerge before marking the paths and pouring the concrete.

There are multiple methods for detecting desire lines in the digital landscape. One is through field studies, observing how people work with digital products to accomplish their goals. New projects can benefit greatly from field studies of comparable products, observing ways in which users who are familiar with the products follow the paths defined by the design and architecture, and where they veer off and create a more desirable path to achieving goals. Another approach is to track paths through web site content using techniques like eye-tracking and web analytics, and to adjust the content and architecture over time to map more closely to actual use patterns.

An understanding of desire lines is critical when working with content chunks because you must provide a path. One of the only benefits of long, complex documents is that all the required information is probably contained somewhere on the page. Even if it’s difficult to find, at least it’s there—somewhere. Users can make their way through the document without having their experience constrained by predefined paths and trails. But as when you wander in the woods, there’s no clear path to getting where you want to go, and it’s easy to get lost. Content chunks are much easier to use and navigate between, but the path from one to the next must be logical, direct, and clearly marked to help people reach their desired destination.

Conversation

The content on your web site is most often an answer—to a question, to a need. As Ginny Redish points out in her book Letting Go of the Words, “Every use of your web site or mobile app is a conversation started by your site visitor.” The key is to understand what the conversation is and engage with your visitors in a way that satisfies their goals. To do this, you must anticipate what questions people will have at various points as they work through your site content and features.

The first step is to make sure your information is relevant to your users. You don’t want to be a bore, droning on and on about things that are deeply meaningful to your organization but that are immaterial to your web site users, who have questions and needs they have come to you to resolve. Review your content and remove anything that has questionable value to your target audience. From the content that remains, identify conversation starters to associate with the content. What questions would someone ask that would prompt you to share the content in response? Remove anything that is tangential, and revise what remains. Then identify follow-on questions and answers, and in this way construct the nodes you need to build out to support the conversation with your users.

Content chunks

In Chapter 4, Information Architecture, we discuss the concept of content chunking, and how modular content informs the architecture and structure of a site. From a stylistic perspective, good content chunks focus on purpose and audience. In most cases, users are looking for specific information, and then are looking to move on. When content is divided into chunks, it’s easier to find. When chunks are the right size, users can get what they need without much effort.

But what makes a right-sized chunk? You don’t want to divide up content so much that users must visit multiple pages to get a complete answer and accomplish their goals. The granularity of a chunk should correspond to whatever size is required to answer the essential questions that make the content relevant to your users in the first place. Which brings us back to the conversational aspect of your content and your content strategy. Take your content strategy—defined by matching business goals with an understanding of users and their questions and “desire lines”—as a starting point. Use the content strategy as a starting point for creating coherent and comprehensive content chunks. Use the architecture of your site to create paths that map to your users’ logical paths, making it easy to move from one chunk to the next in getting all questions and needs answered.

Headings are a key component in the success of a content chunking strategy. When headings are used as hyperlinks, they are signposts marking the path from one content chunk to the next. As page and section headings, they confirm users’ arrival at the desired destination. Headings should be descriptive and clear. They should start with keywords (see “Keywords,” below) that are familiar and quickly recognizable, and should entice users to read on by speaking to the question at hand.

Clarity

Keep the subject matter of each page focused, and express the subject using language that is clear and concise. This topical focus helps the reader evaluate the page content quickly and has many advantages for search engine visibility, where a clear and quickly identifiable content theme is important to search ranking.

Here we summarize best practices for web writing, drawing on several sources, including Ginny Redish’s Letting Go of the Words, Strunk and White’s The Elements of Style, and the Federal Plain Language Guidelines.

Prefer the standard to the offbeat. With so many competing sources, a unique voice may distinguish your pages, but beware of going over the top. There is a fine line between engaging and annoying.
Address users directly. Use “you,” “I,” and “we” to make the information inviting and personal, and to further reinforce the conversational nature of the discourse.
Use active voice. Sentences that use active voice place the actor before the action, and are easier to comprehend than sentences that use passive voice. “We will mail your package on Friday,” not “Your package will be mailed on Friday.” (One trick for determining whether a sentence uses passive voice is whether it can accommodate a “by ____” at the end: “Your package will be mailed on Friday by us.”) Also, putting the actor at the beginning of a sentence conveys energy: “We sometimes fail to deliver packages on schedule,” not “There are occasional cases in which we are unable to deliver a package on schedule.”
Keep it short. Short sentences naturally follow from using active voice. As Strunk and White point out, “Brevity is a by-product of vigor.” Focusing on short sentences reinforces the best practice of cutting out unnecessary words. And short paragraphs are easier to read and understand, and also add white space to the page to make it more inviting.
Use plain language. The objective of plain language is to write clearly so that users can “find what they need, understand what they find, and use what they find to meet their needs.” Plain language does not mean dumbing down your text. It means writing clearly and conversationally so that people can understand what you are saying without needing to expend a great deal of time and energy. As Ginny Redish explains, “Write so that busy people understand what you are saying the first time they read it.”
Write for a global audience. Remember that you are designing documents for the World Wide Web and that your audience may not understand conventions specific to your corner of the world. For example, when including dates, use the international date format of day/month/year (14 March 2009). Spell out abbreviations that might not be familiar, such as state or province names. Also, consider that any metaphors, puns, or popular culture references that you use may make sense only in the context of your language and culture.

The “dirty dozen” unnecessarily complex words

A group of United States federal employees, the Plain Language Action and Information Network (PLAIN), created the Federal Plain Language Guidelines in the 1990s (www.plainlanguage.gov). Since that time, plain language has been written into law in the United States, where federal agencies are obligated to ensure that they follow plain language best practices for presenting information that is simple and easy to understand. Agencies can meet their obligations by following the Federal Plain Language Guidelines.

One of the guidelines is to “pick the familiar or frequently used word over the unusual or obscure.” The guidelines reference a table of “Simple Words and Phrases” that pair a complex word with its simple equivalents. Here we list what they call the “dirty dozen.”

addressees—you
assist, assistance—aid, help
commence—begin, start
implement—carry out, start
in accordance with—by, following, per, under
in order that—for, so
in the amount of—for
in the event of—if
it is—(omit)
promulgate—issue, publish
this activity, command—us, we
utilize, utilization—use

Putting content first

Make sure the text you present is of immediate value. Avoid empty chatter such as “welcome” messages from unit managers or instructions on how to use the site. Don’t use the first paragraph of each page to tell users what information they’ll find on the page. Start with the information, written in a concise and engaging style. The inverted pyramid style used in journalism works well on web pages, with the conclusion appearing at the beginning of a text. Place the important facts near the top of the first paragraph, where users can find them quickly. In crowded home pages, it’s often good practice to provide only the lead and perhaps a “teaser” sentence, with the body of the article available through a hyperlink.

Inverted pyramid

The inverted pyramid is a method for presenting information whereby the most important information, represented by the base of the pyramid, is presented first and the least important (the tip) is presented last. Information designed using this model begins with a lead that summarizes the information, followed by the body, where the information presented in the lead is elaborated on and substantiated, in descending order of importance. Thanks to its long use in journalism the inverted pyramid style has a number of well-established advantages:

Important information comes first, where it is more likely to be seen and remembered
This front-loading of content permits efficient scanning for information
A content-first approach benefits anyone who is working with a small “viewport,” including people using screen reader and screen magnification software and people accessing the page on a small-screen mobile device
The initial major facts establish a context for later secondary information
The structure places facts and keywords at the head of the page, where they carry more weight in search engine relevance analysis

Keywords

Keywords are the words people use when they want to find content and functionality like yours. When defining keywords for your content, use the words that your site visitors use. Positioning keywords at the beginnings of sentences, headings, and links makes scanning more effective. Initial keywords also help with link and heading lists. Applications such as screen readers give users a list of links or a list of page headings. Such features are more usable when links and headings begin with keywords than when every link or heading begins with “The.”

Keywords are also important to support effective search engine results. When readers use web search engines, they generally use words or short phrases that describe what they are seeking. Along with the text of the page title, these keywords become the crucial determinants of your page’s relevance rank in the search engine’s indexes. For search engine optimization, a good keyword strategy is to make sure that key page elements are working in concert to portray the page content accurately. Ideally, there is one keyword or key phrase for your page, and it is mentioned in most or all of the following elements:

Page title
Major <h1>, <h2>, or <h3> headings
First paragraph of text
Inbound links to the page

One thing you should never do is pack in gratuitous repetitions of keywords or use sophomoric tricks like creating white text on a white background to hide keywords. All the major search engines know that even in well-written and edited text, keywords and phrases will make up only 5–8 percent of the number of words on the average page of text. Pages with a suspiciously high keyword rate will lose search engine ranking, and pages that use hidden word repetition tricks may be banned from mainstream search engines.

The best keyword advice for good search visibility is simple: write clear, well-edited, interesting prose, and check your page titles and the other elements mentioned above to make sure the key descriptive words or phrases are featured.

Linking meaningfully

The primary design strategy in thoughtful hypertext is to use links to reinforce your message, not to distract users or send them off chasing a minor footnote in some other web site. Most links in a web site should point to other resources within your site, pages that share the same graphic design, navigational controls, and overall content theme. Whenever possible, integrate related visual or text materials into your site so that users do not have the sense that you have dumped them outside your site’s framework. If you must send your reader away, make sure the material around the link makes it clear that the user will be leaving your web site and entering another site by following the link. Provide a description of the linked site along with the link so that users understand the relevance of the linked material.

Descriptive links

Most of your web visitors are passing through on their way to some other destination and will appreciate your efforts to make the trip as straightforward and predictable as possible, with few meaningless side trips or dead ends. Key to the success of any trip is the clarity of the signage along the way, which in the web context comes in the form of links.

Links are the signposts that help users know which route is most likely to get them to their destination. Good link text gives users a description of the page that will load, allowing them to make informed decisions about which path to take. Bad link text, such as nondescriptive “click here” links or catchy but meaningless phrases, forces the user to follow the link to learn its destination. Nondescriptive links often lead to dead ends, requiring users to retrace their steps and waste time.

When writing links, never construct a sentence around a link phrase, such as “click here for more information.” Write the sentence as you normally would, and place the link anchor on the keyword or phrase that best describes the additional content you are linking to. Bear in mind that hyperlinks aren’t just a convenience for the user; they also add semantic meaning to the page. By choosing to link a particular word or phrase, you have signaled to both users and search engines that it is potentially important as a search keyword.

Poor: Click here for more information on link underlines.
Better: Link underlines help users identify links.

Creating a style guide

Even with the best intensions and great writers, an uncoordinated content development effort will produce inconsistent and redundant content. A style guide can be a great resource for establishing and supporting style guidelines. A resource like a style guide is particularly useful in a distributed content production environment, where multiple authors across the organization are contributing content to the site. A style guide can provide guidance on many facets of the site, including:

Details related to editorial style, from general concepts like plain language to specifics, such as whether to use the Oxford comma.
Guidance on best practices, including how to write effective links and headings.
Specifications for terminology and usage, such as how to handle abbreviations and how to format dates and phone numbers.

Often organizational style guides and branding standards are internal documents. However, more organizations are posting style guides on public-facing web sites. The advantage of this transparency is reputational. By highlighting a high-quality and well-executed style guide, the organization shows its commitment to providing users with quality experiences. Many style guides focus on presentational and interaction styles rather than editorial style, which is a shortcoming, since content is a huge part of user experience.

See the sidebar “Favorite Style and Pattern Libraries” in Chapter 8, Graphic Design, for a selection of excellent style guides.

Composition

The look of text layout strongly affects how readers relate to written content. The contrast produced by headlines, subheads, lists, and illustrations gives users visual “entry points,” drawing their eyes down the page and into the content. Although the heading and list markup might look excessive in print form, on the web this markup has two big advantages:

Frequent headings and lists of items favor both scanning and methodical readers by adding visible structure to the online reading experience.
The added structure of heading and list markup aids in search engine optimization and online searches for content, because the additional markup provides explicit semantic emphasis, heading keywords, and context cues that listed items are strongly related to one another.

Providing visual landmarks

Users approach a web page with a quick skim in order to form an overview of the page and determine whether the information they are seeking is likely to be found there. Even methodical readers will appreciate your efforts to accommodate online reading patterns rather than forcing readers to slow down and pick their way through your pages in order to glean information. The following guidelines support both the skimming and reading behaviors of online readers.

Titles

Web page titles are designated in the HTML document <head> section with the <title> element. The title is crucial for several reasons. The title is the first thing users see and the first thing screen reader users hear. It is the text that displays in the browse history, and becomes the default text for any bookmarks the user makes to your pages. In addition, most search engines regard the page title as the primary descriptor of page content, so a descriptive title increases the chance that a page will appear as the result of a related search query.

The page title should:

Contain carefully chosen keywords and themes for the page
Form a concise, plainly worded description of the page contents
Be unique

Some enterprises make it a policy to incorporate the company or organization name as the initial part of the page title. Although this practice is often useful, you should always consider the length of your page title. The page title also becomes the bookmark text, and many web browsers truncate long page titles (more than sixty-five characters, including spaces) in a way that makes them less legible. If your page title starts with a company name, the most relevant part of the page title may not be visible in a reader’s bookmark for that page. If you plan to include your organization name, have it come last. Start with the title of the page, then the section, and then the site—for example, Graduate Programs—Volunteer Opportunities—Peace Corps.

Headings

Browsing a page is easier when the text is broken into segments topped by headings that describe the subject of each segment. This often means breaking up long paragraphs, and using more subheadings than you would for print publication. Remember that in the restricted world of a laptop, tablet, or smartphone screen, a paragraph can easily fill the screen with a visually monotonous block of text.

Such editorial landmarks as titles and headings are the fundamental human interface device in web pages, just as they are in any print publication. A consistent approach to titles, headings, and subheadings in your documents will help your users navigate through a complex set of web pages. Choose an approach and stick with it throughout your site.

Headline style is bold, capitalizing the initial letters of important words:

Document titles
References to other web sites
Titles of documents mentioned in the text
Proper names, product names, trade names

Down style is also bold, but capitalizing the first word only:

Subheads
References to other sections within the site
Figure titles
Lists

Lists

Like headings, lists aid scanning. They also group related items visually, quickly conveying a related set of concepts through a simple typographic device. It’s easy to tell visually whether the list is long or short; with a numbered list, users know immediately how many items are in the list. And numbered lists are particularly helpful for presenting a sequence of instructions, such as required steps to complete a task.

When lists use parallelism, applying the same structure to sentences or phrases, the items are easier to scan and comprehend.

Structural markup

HTML is a markup language that adds a layer of structural meaning to documents. It works by wrapping elements, such as titles, headings, paragraphs, lists, tables, addresses, and citations, in defining tags. The result is a machine-friendly document that can be read and interpreted by software. Tags tell software, for example, that the text from point A to point B is a heading, and the following text block is a paragraph, and so on. For example, when a web author defines a block of text as the page title, web browser software can display the page title in the browser title bar, in the browser history, and as a bookmark.

On the surface, a structured document looks no different from one that uses font size and other visual formatting to distinguish elements such as headings. Functionally, however, structure gives power and utility to the web. Take, for example, the heading of this section. <b>Structural markup</b> is visually identifiable as a heading because it is bold and sits directly above plain text. But software cannot infer that it is the primary subheading of this section because <b> means nothing more than bold. If the chapter title is marked as <h1>Structural markup</h1>, software knows that the page is about structural markup, and that in turn facilitates all kinds of functions, such as returning the page on searches for structural markup or adding the page to compilations about structural markup.

When marking up text, think about what each text element is and not what it should look like. Tag each element with the appropriate HTML structural tag, and then use CSS to manage its visual properties (see “Semantic markup” in Chapter 5).

Uniform connectedness

We use the gestalt principles of perception to decode the structure of a document visually. One task in making sense of a document is determining which elements are related and which are not. Uniform connectedness defines groups of related information, frequently using “common regions,” in which elements are grouped within a bounding box or uniform background.

Structural markup provides the means to use uniform connectedness to group elements in a nonvisual and machine-readable way. A list tag in essence draws a line around several items and asserts that they are related. The <table> tag connects data in rows and cells into a single expression of a concept. Even the <cite> tag surrounds a phrase and declares its relatedness as a book, magazine, or article title. Using uniform connectedness both on the surface in the visual design and in the structural markup in underlying page code allows both visual and nonvisual users to make sense of the structure of a document.

Presenting clear links

Embedded hypertext links pose two fundamental design problems. They disrupt the flow of content in your site by inviting the user to leave your site. They can also radically alter the context of information by dumping the users into unfamiliar territory without preamble or explanation when they follow the embedded links to new pages—particularly when those new pages are outside your site.

When placing links on the page, put only the most salient links within the body of your text, and group all minor, illustrative, parenthetic, or footnote links at the bottom of the document, where they are available but not distracting.

Underlining

Underlining is a carryover from the days of handwriting and the typewriter, when options such as bold and italics were not readily available as ways to distinguish elements such as headings and emphasized words or phrases. Typographically, underlining is undesirable, since it interferes with the legibility of letterforms. However, link underlines ensure that users who cannot see colors—users with color vision issues, and users who access the web on devices that do not display color—can distinguish links from other text. For universal usability, links must be visually identifiable with or without color. Links that display within a navigation column or button bar are clearly links and do not necessarily need underlining. However, links that appear within body text should be underlined to set them off from the surrounding text.

Visited and unvisited links

Most web sessions involve trial and error. For example, finding a phone number or a price or location may involve multiple rounds of searching and following unproductive paths. The process can become circuitous if there is no way to tell where you have already looked, with repeat visits to pages that did not prove fruitful. By providing different link colors for visited and unvisited links, you allow users to identify the paths they have already taken.

Rhetoric and web design

Rhetoric is the art and technique of persuasion, through oral, written, or visual media. The contemporary World Wide Web is a unique combination of all three media, but audience reaction to your high-tech web site is still governed by aspects of rhetoric that the Greek philosopher Aristotle identified almost twenty-four hundred years ago. In The Art of Rhetoric, Aristotle outlined three major elements of rhetorical persuasion that can easily be understood in relation to web design.

Ethos

Ethos establishes the credibility of an information source. Does the speaker have the credentials and seriousness of purpose to be believed? Many otherwise distinguished and credible institutions still present a painfully amateurish web presence—government and higher education sites being especially notorious offenders—and the credibility of the host institution suffers the consequences of that poor presentation. Even small lapses can erode the ethos of a site: broken links, missing graphics, outdated content, and misspelled words all damage the overall trustworthiness of a site. Ironically, with attention to editorial detail, ethos can also be easily spoofed on the web. Many email scams depend on carefully crafted forgeries of real sites like eBay, PayPal, and personal banking sites. Beware of cheap thieves in expensive suits.

Pathos

Pathos is the art of developing a positive emotional response in the viewer. Most sites don’t develop high emotional responses in users, but a well-designed home page with attractive graphics and interesting articles and links makes users more likely to explore your site. A strong appeal to pathos is central to many marketing web sites, particularly where the user’s identification with an upscale brand image is crucial.

Logos

Logos uses reason, logic, statistics, convincing examples, and depth of information to persuade an audience. A newspaper front page or home page isn’t just about packing the maximum amount of news into a given space. Over weeks, months, and years, a news source builds credibility with an audience through the sheer depth and breadth of information, carefully presented news photography, and information graphics, now augmented on the web with audiovisual media.

Review your rhetoric

Go to your home page and do your best to see the site anew, the way a stranger might, who knows you only through your web presence. Does the rhetoric of your site support or erode the user’s sense of the credibility, trustworthiness, and humanity of your enterprise?

Chapter 10 Editorial Style