Writing for the Web: What’s Different?

Web and print documents offer different affordances for how the audience will navigate through information. Below are different considerations web writers must think about:

Use links to direct readers to related articles, background information, and the source of your information. Why settle for including only a small quotation when you can send your readers to the entire article? Clicking a link is a lot easier than driving down to the library to find the book or article in question. You can also use internal links, which make it easier to jump around inside a single document or connect to other pages within your website. Google Docs, for instance, has a table of contents feature that will link together all the parts of your document. If you have a blog, then you can link to earlier posts that are relevant to what you’re talking about.

Writing for the web means thinking about all of the different contexts in which your work can be found. That’s why it’s important to always title your work. In addition, once people arrive at your pages, you should have broken big chunks of text into smaller sections, with section headings, so they can find what they want quickly. Anything that takes longer than 10 minutes for the average person to read should be broken up into multiple posts or sections. Instead of thinking in terms of articles or essays, try to think more about paragraphs (blogs) and sentences (tweets).

Writing for the web also means that you are part of an information ecology. Other people may find your writing through a search engine or an RSS feed. They can easily search your text for keywords or zip instantly to a specific chapter or section.

Writing for the web also has built-in community features—it’s a lot faster and easier to get feedback from your readers and have discussions about your texts when you put them online. Communities are what make writing for the web so much fun! Before, authors had to wait weeks, if not months (or even years!), to get feedback on their work. By that time, it was old news. Now, writers can post a blog and get comments in only a few hours or less. Interacting with your audience members will help you tailor your writing style and topics to better suit them, so pay attention to what they say.

Writing for the web also means writing with media. You can include color, images, andvideos with your texts. You can include animation and sound. You can write in the white space around words and play with designs to better show off your work. You can create videos or podcasts. You are no longer turning in grey pages of text to a professor; you are writing to a real audience, and you need to use all the tools available to connect with that audience and show them that you share their values.

In addition, the web is no longer accessed only on desktop computers and laptops. Visitors to your online work may be using a mobile phone’s small screen, which means those readers will have different needs than readers using a full-size monitor. Conversely, Internet TVs are becoming more common, and many people use iPads or Android tablets as their primary device for reading the web. With such variety in screen sizes and resolution, the challenge becomes making sure your content looks good across multiple web browsers, platforms, and devices. Since you can’t be sure how people will access your work, keep the design elements simple so that browsers can accommodate it. Flash movies, for instance—once the standard for animations on the Internet—are not compatible with iPhones and iPads.

What’s the Same When Writing for the Web?

Coherence, clear organization, good grammar, solid mechanics, appropriate punctuation, and correct spelling—these are the rules by which you are expected to play when writing. Although people might tell you that nobody cares about this stuff online, unless you’re talking to your closest friends and family, your audience will expect or at least appreciate it if you put some effort into your writing.

Think of it this way: it takes time for someone to read what you write. Why not respect your readers’ time and intelligence by making sure your text is clear and free of obvious errors? You will look smarter, worth taking seriously. This is your ethos, the way you come across to your reader, the face you put forward to the virtual world. Better this be good than bad, better thoughtful than thoughtless.

If readers know that you respect their time and attention, they’ll be a lot more likely to read your work carefully and respond to it. Don’t waste their time, and they’ll be more likely to give it to you.

The Rhetorics of Web Pages

When you write and design web pages, whether you code using HTML and CSS or you use an online platform such as WordPress or Weebly, you are still making meaningful rhetorical decisions in thinking about audience, purpose, genre, and context. This chapter section outlines some of the rhetorical affordances websites can offer that are important in thinking about how audiences get their information. Keep in mind, this section is not a how-to guide on how to create a website; you will not find step-by-step directions or software tutorials. There are plenty of other sources for such tutorials on the web. You are encouraged to consider your overall strategy and purpose in writing before getting down to specifics. Once you know the best ways to appeal to your audience, the rest is easy.

Hyperlinks Are the “Tubes” of the Internet

While former U.S. Senator Ted Stevens’ metaphor of the Internet as a series of tubes is inaccurate, we can reasonably think of hyperlinks as the paths (or if you want to get sci-fi geeky: wormholes) through which we travel across the World Wide Web. Click a link and almost instantaneously you will move to a new page within a website or—seemingly magically—to some new website hosted halfway around the globe. In fact, the importance of hyperlinks cannot be overstated: there is no web without hyperlinks connecting one text to another (or more often, one text to many).

Thus, understanding how to create effective hyperlinks is important because, when you create hyperlinks, you are adding your pages to the World Wide Web. The following sections will help you to effectively use hyperlinks in your web writing.

Click Here to Learn More about Hyperlinks

One of the most common mistakes that people make is using the “click here to . . .” hyperlink. Consider the following example:

“As reported at Engadget, the buzz this week on tech news sites is Apple’s ‘iPhone tracking software.’ Using data from cell phone towers and wifi networks, iOS constantly stores the phone owner’s location in an unencrypted file on the phone. Click here to learn more.”

Well, duh! Because Internet users know that that if they click links, the browser will take them to another web page, it’s redundant to say “click here.” That’s why the words are underlined and a different color than the rest of the text. Here’s a quick fix:

“As reported at Engadget, the buzz this week on tech news sites is Apple’s ‘iPhone tracking software.’ Using data from cell phone towers and wifi networks, iOS constantly stores the phone owner’s location in an unencrypted file on the phone. Learn more.”

Setting your links to open into new windows is not recommended. Your readers can be confused by this action and often do not realize that the browser has opened a new window—they will try clicking on their back buttons, only to find they no longer work. Web-savvy users can always force content to open in a new window anyway, so it’s not like you’re eliminating the option for anyone who wants it. Sven Lennartz’s article “Should Links Open in New Windows?” from Smashing Magazine^[1] has an excellent discussion of this issue. For now, though, just remember to have your links open in the same window.

Use Contextual Hyperlinks

Most people won’t click on a link unless you let them know why they should bother doing so. Let’s consider the example above of the post about the iPhone. Where you put the link can let the reader know whether you’re just citing the article mentioned as a source. If you put it at the very end of your text, this usually signifies that it’s your main source of information and that users should click the link to it to learn more.

For example, a company who puts a press release on the web featuring a new product might add a “learn more” link at the end pointing to the product page on their website. The company wants you to read the press release first, then follow the link.

However, in many texts, we can better assist readers by putting the links in context, which can be done by linking to something meaningful in the text. Using contextual links, we can create effective transitions for the reader to the next web text, and better connect the texts we write to those on other web pages. Here are two different revisions of the previous example that illustrate this concept:

“As reported at Engadget, the buzz this week on tech news sites is Apple’s ‘iPhone tracking software.’ Using data from cell phone towers and wifi networks, iOS constantly stores the phone owner’s location in an unencrypted file on the phone.”

“As reported at Engadget, the buzz this week on tech news sites is Apple’s ‘iPhone tracking software.’ Using data from cell phone towers and wifi networks, iOS constantly stores the phone owners location in an unencrypted file on the phone.”

In the first example, the link is emphasizing where you got the information and where readers should go to learn more about it. The second example emphasizes what the link is about. Since you mentioned Engadget earlier in the sentence, users will probably realize the link will go there. But it could also go to a Wikipedia definition or to a link on Apple’s app store. In any case, the meaning of the two examples is slightly different. The first provides direct indication of where the reader will go on the web, and the other indicates to the reader what will be learned. If you’re reporting news or items from another blog or website, it’s typical to put a link to the original source in the text.

Yes. There Are Punctuation Rules for Hyperlinks

Just as with other types of writing, punctuation has a role in creating hyperlinks:

Exclude ending punctuation from hyperlinks. When hyperlinking text that has punctuation immediately following it, do not include the punctuation in the hyperlink. Consider again this example:

“As reported at Engadget, the buzz this week on tech news sites is Apple’s ‘iPhone tracking software.’ Using data from cell phone towers and wifi networks, iOS constantly stores the phone owner’s location in an unencrypted file on the phone.”

See how the comma following Engadget is not included in the hyperlink? Do the same thing if hyperlinking text at the end of a sentence followed by a period; don’t include the period in the hyperlink either.

Leave off quotes and italics from titles in hyperlinked text in prose. Another style rule involves hyperlinked titles. Bloggers and other social media writers will often include the title of another post or web page in their writing, and then link that title to the original web page. When doing so, be sure to capitalize the title, but do not include quotations as you would in print with smaller works (e.g., a blog post title or news article) or italics as you would with larger works (e.g., a website title). Here’s an example using a modified version of the Engadget post:

“As reported in The iPhone Tracking Fiasco and What You Can Do About It, the buzz this week on tech news sites is Apple’s ‘iPhone tracking software.’ Using data from cell phone towers and wifi networks, iOS constantly stores the phone owner’s location in an unencrypted file on the phone.”

Yes, this is contrary to what writers do in print, where quotations and italics are added to emphasize that the text is a title of a work, whether it is a small or large work. In web writing, the formatting for the hyperlink will emphasize the title that you have already capitalized. The reader can click the link and immediately see what kind of work it is; adding quotes or italics adds unnecessary additional emphasis.

EXCEPTION: if you include a bibliography in your web writing, then you should follow the conventions for punctuating titles of the citation format you adopt for your references, whether or not you choose to hyperlink the title of a reference that is also available online.

Headlines

The one thing that you never want to see in your web pages—whether on your blog or your own website—are grey pages with nothing but text: no links, no headlines, no images. People like to scan and skim on the web. This is no surprise. Readers have skimmed and scanned ever since newspapers started cramming their pages with information centuries ago. We are hunters and gatherers searching for information, as web content strategist Ginny Redish likes to say in her book, Letting Go of Words.^[2] We don’t read, we hunt. If we do not think your page offers the information we want, we move on. Quickly.

Consider the image below that uses an eye-tracking heatmap to show where a person’s eyes go to first on a web page and where they look the longest. The dark orange circles—where the eye looks first and longest—are at the headings and images on the page, visual elements that stick out. This helps us understand how a user gathers information on a web page.

Consider the times that you have used a search engine to look for information on a particular topic. You type in your keywords and Google shows you 150,234 results. How do you choose what to read? The page title that is displayed to you in the search engine results influences you on whether or not to visit that web page. And then once you visit a web page from your search results, you often skim the headings (when available) to find what you need. If the headings aren’t yielding fruitful indications that you are in the right place, then you may leave and try another search result—even though the information you seek is actually there.

Or think about the times you have jumped on your favorite news site (e.g., CNN, ESPN, Wired, etc.). Much like when reading newspapers, the first thing most readers do is skim the headlines looking for something to catch their interest. Readers do the same thing when they visit a blog that they haven’t been to before. As Copyblogger points out,^[3] at the beginning of his tutorial about writing headlines for the web, “Your headline is the first, and perhaps only, impression you make on a prospective reader. Without a compelling promise that turns a browser into a reader, the rest of your words may as well not even exist… . On average, 8 out of 10 people will read headline copy, but only 2 out of 10 will read the rest.”

Editors of professional news publications and serious bloggers know this, and they typically spend significant amounts of time coming up with the right headline to attract readers. Whether you are keeping your own weblog, creating an informational page for a client, working on a wiki page, or building a personal portfolio website, you’ll need to take some time, too, to create page titles, headings, and subheadings that invite your reader to explore and understand the content you have created.

Can I Use Catchy Titles and Headings?

Catchy titles and headings can be helpful in some writing contexts, such as in news publications or a blog, where the goal is to attract a loyal following of readers. They might not be such a good choice for a business website or other more formal professional writing situations, depending on the overall tone that is being set for the site.

Think about the purpose of your text. Are you trying to help users locate specific bits of information or answer specific questions they may have? If so, then simple direct headlines and subheadings are probably the best choice. But if you are trying to encourage web users to stop and read your content, then a catchy title can be a good idea, especially if it leads to catchy, engaging writing.

If you choose to use catchy titles for your web pages, beware of making them enigmatic. They should at least hint at the focus of the content. Otherwise, readers who are actually interested in the specific focus of the page may not realize what it’s about. Over at Econsultancy, a community for digital media marketing specialists, Chris Lake suggests using awesome adjectives^[4] as an easy tip for creating catchy headlines:

Headlines that include awesome adjectives tend to attract a lot more interest/clicks/retweets/links than those that avoid them. For example, “16 bitchin’ shortcuts and commands for Twitter” beats “16 shortcuts and commands for Twitter.” Adjectives can be highly persuasive. Try to incorporate them into your headlines.

But Lake also talks about using important keyword phrases in headlines. The best advice? Make your titles and headings catchy AND informative if you are trying to attract attention.

Don’t Forget About Your Other Audience: The Search Engine

There’s a computer audience that will be important for your website: search engines. How often do you use a search engine to find new content? Most web surfers use them all the time.

When you use a search engine, you aren’t actually searching the web; you are searching a database of website content information selected and maintained by the search engine provider. Search engine companies employ computer programs known as “bots” to surf the web and gather that information. They then employ a ranking algorithm that uses various factors to determine where (and if) a web page should show up in a search for specific keywords.

The good news is that the advice for writing good titles and headings for human readers will generally work well for search engines. Informative titles and headings help search engines to index your content. Like your readers, search engines predict that the titles and headings reveal the main content of your web page, and they use the keywords from within them in indexing your content. Better titles and headings equal better search engine ranking results for your web pages. The practice of “writing” for search engines is known as search engine optimization (SEO).

Dammit, Jim, I’m a Writer, Not a Graphic Designer! (Or, Who Gives a CRAP?)

It’s easy to get by in most college writing without thinking about visual design or graphics. About the most visual design college writing asks for is that you emulate the MLA or APA document format, pretty barebones visual designs in themselves. Create your text with letters and numbers, and plug it in.

The web, though, is a different place. To be a web writer, you have to expand your definition of “text” beyond merely copy (the alphanumeric symbols on the page you might have previously thought exclusively constituted all writing) to include visual design as well as the use of fonts, images, layout, video, and other media.

A good starting point is to learn some basic design principles. To think about the visual design of your pages, you need a design vocabulary: a set of terms you can use to talk about what you like and don’t like in a web page.

While there are many different sets of terms you could learn, returning to Chapter 5 to familiarize yourself with contrast, repetition, alignment, and proximity (CRAP) is a good place to start. It’s going to be hard to make progress with visual design without understanding CRAP.

What would the web be without images? Pretty boring, right? Consider using relevant visuals on your web pages to enhance the meaning of the copy that you have written. Here are a few important tips to follow:

There are three main file formats for images that you can currently use on the web: GIF, JPG, and PNG. GIFs work well for icons and other graphics with large areas of simple colors, but because GIFs are limited to 256 colors, they are a poor choice for photographs. JPEG (or JPG, as they are commonly called) is a lossy format^[5] (like MP3s) that supports millions of colors and can work well for photographs. In fact, JPG is likely the default file format that your digital camera uses, but beware. The more JPGs are compressed to reduce file size, the more image quality (information) they lose. PNG is a lossless format that can support both a small range of colors, like GIFs do, and millions of colors in photographs, like JPGs do, only without any visual quality loss. However, these have larger file sizes. Given all these considerations, you may need to experiment saving your images in the different image file formats to determine which provides the quality you need at the lowest file size.

Make sure your visuals are appropriate and relevant to what the rest of the text says on the page. Don’t pick a visual just because it looked “cool” when you found it. Visuals should enhance your meaning.

Make sure your images are of good quality. JPG “artifacts” and pixelated images (caused by making a very small original image larger) look unprofessional and sloppy. A good rule of thumb is to stick with the “high” setting when saving JPGs.

Crop images to remove unnecessary information (e.g., when creating screenshots, remove the browser window) and to focus the reader’s attention on what is important in the visual. Cropping an image to exclude extraneous detail can dramatically improve the image’s effectiveness.

Beware of stretching images out of proportion if you prepare them in an image manipulation program. Don’t make your images look like they came from a distorted reflection in a fun house mirror.

Provide captions when using multiple visuals in longer web texts. Captions will orient the reader to your reason for including the visual. Otherwise, readers have to guess your intentions in doing so.

Reduce very large images using a graphics program. While HTML provides a method for defining the width and height of an image, this method does not change the file size. You don’t want your reader to have to wait for that 5MB image file to load when you could have easily resized and resampled the image to 50KB or less. Almost any standalone or web-based image program can be used to reduce your image file sizes, and the results can dramatically increase the speed at which your pages load.

Alt-text should be used to provide image descriptions for those who cannot see the image, offering better accessibility.

Accessibility

Accessibility is perhaps the most important standard for excellence in technical communication. In this context, “accessibility” refers to how easily readers of all abilities can read and understand your writing. For instance, an accessible document for a person who has low vision would be a document that has Optical Character Recognition (OCR) text, alternative (or alt-) descriptions of images or content that is not screen readable, and formatted headings to organize the document. Beyond formatting, and instead of bold or italic text, such a document would use punctuation and signal phrases to convey emphasis, and employ clear, straightforward sentences rather than overly complex ones. While it is clear that these accommodations would be especially useful for a reader with low vision, these same features further enhance clarity for all readers. Accessibility is helpful for all readers!

What counts as accessibility changes depending on the genre of the technical document. At minimum, the design of your document should be useful, easy to navigate, with all information easy to locate. Captions on videos, spoken cues throughout an oral presentation, and unique, informative titles for individual web pages on a site all add to their accessibility and ultimate readability. Furthermore, websites and e-learning documents must meet Americans with Disabilities Act (ADA) requirements for accessibility. The ADA National Network provides additional information about the ADA.