Writing for the Web

People read differently online. They arrive on the site with a purpose and want to accomplish that purpose as efficiently as possible. 

Most importantly, know why they’re here

Before you start writing, make a prioritized list of the tasks your users want to accomplish by visiting that page. Then help them accomplish those tasks as easily as possible. Below are strategies for writing to help users accomplish their tasks:

Make it easy to find what they need

Make it scannable

On the average Web page, users have time to read at most 28% of the words during an average visit; 20% is more likely. 

  • Chunk your content.  Chunking makes your content more scannable by breaking it into manageable sections.
  • Use short sentences and paragraphs. The ideal standard is no more than 20 words per sentence, five sentences per paragraph. Use dashes instead of semi-colons or, better yet, break the sentence into two. It is ok to start a sentence with “and,” “but,” or “or” if it makes things clear and brief.
  • Use bullets and numbered lists. Don’t limit yourself to using this for long lists—one sentence and two bullets is easier to read than three sentences.
  • Use clear headlines and subheads. And don’t forget to use proper heading structure in the Google Doc to make it easier for the person who actually puts it on the website (which may be you.)

Be clear

  • Use plain language.  Avoid library or higher ed jargon and think about writing for someone who is brand new to libraries, new to higher education, and isn’t a native English speaker. Avoid acronyms, but when that isn’t possible, spell out the acronym on the first use on each page. (Example: Washington Research Library Consortium (WRLC)
  • Use pronouns. The user is “you.” The Libraries are “we.” This creates cleaner sentence structure and more approachable content.
  • Use active voice. “The board proposed the legislation” not “The regulation was proposed by the board.”

Be brief

  • Front-load the important information. They won’t read to the end for the important information; they’ll leave. 
  • Use images, diagrams, or multimedia to reinforce the text on your page. With proper alt-text, of course. 
  • Use white space.  Using white space allows you to reduce noise by visually separating information.

Follow the Style Guide

The Division of External Relations Style Guide provides a unified and approved style for use in communications. For items not referenced in the document, consult a recent edition of the Associated Press Stylebook. For any questions about writing style, contact Robin.

LAI Style Guide

GW Libraries and Academic Innovation

Use on first reference with audiences external to LAI. Use GWLAI as an abbreviation on second reference to external audiences. Libraries and Academic Innovation on first reference and LAI on second reference to internal audiences.

GW Libraries

A division of Libraries and Academic Innovation. GW Libraries refers to the organization. Only use Gelman Library when referring to the specific building!

library.gwu.edu

When referring to the Libraries website in your text, don’t include the “http://”

Follow Formatting Guidelines

It's important that our pages maintain a consistent appearance. We are continually making tweaks to the appearance of the website to ensure it serves our users’ needs and reflects the university’s unified web presence. This consistency makes for a better user experience as people click between departments and organizations in the GW community -- as well as within the site itself.

Many of these rules may change in the new D9 site. 

Links

When linking, providing a context in the link to where the user is going when they click it. E.g., “learn how to create a page.” Do not use “here” when linking to other content, e.g., “read our page Creating and Editing a Page here.” This makes it challenging for users using screen readers, who are tabbing through links to understand what the link is for.

If you are linking to a page not on the Libraries website, choose New Window (_blank) under the Target tab when creating a link. This will help people return to our website later.

SEO: Surfacing Your Content

Search engine optimization, or SEO is methods of ensuring that search engines, such as Google.com rank our content appropriately. Presenting clear, concise information is one of the best ways of doing this. This applies to your page title and section headings as well. Make appropriate use of heading tags (h2, h3, h4) to provide contextual structure for the algorithms and screen readers accessing the page. Use alt tags with every image (this is an accessibility requirement). Make your page alias (URL) follow your group's naming strategy and match the page title as best you can to the last part. E.g., "My Excellent Library Page" = /my-excellent-library-page

Alt Tags for Images

You may not think of these semi-hidden pieces of code as writing style, but they are important (and required for accessibility). They help search engines and screen readers understand the context of your images. Is the image decorative or important to the understanding of the page? Is it a unique representation of a collection that should show up on image searches?

  • Make your tag simple and to the point unless the image needs clarification: "image: student studying under tree" or "image: tapestry depicting Sack of Constantinople from GW Libraries Crusades Gone Wrong Collection".
  • Start common image types with "book cover:" or "logo:" to give context, like "book cover: Moby Dick" and "logo: Washington Regional Library Consortium".

More on alt tags:

Font and text

  • Do not paste from a Word document, Google Doc, or any other writing tool (or the web) without using the Paste as plain text option. Using the generic paste will insert errant formatting onto the page that may cause an unexpected look and feel for the page.
  • You can use the “eraser” icon to remove formatting when needed.
  • The site will adjust font-size as needed. For section titles, use the Heading formatting options (see below) and do not increase the font size.
  • To call attention to text, use the bold or italics functions. Many audiences interpret underlined text as a link.
  • Use a single space between sentences. This is the web standard and flows much better on screens (can cause display issues when the lines wrap). Double-spacing also deeply annoys millennials. 
  • Don't change the font. Unless you are embedding foreign characters or a short chunk of stylized text (maybe as an example), you shouldn't set a font. The site will do it for you. Be sure to paste using the "paste as plain text" option whenever possible.

Headings (H2, H3, H4)

Use Headings for section titles. Select the text and then use the Format dropdown menu to choose Heading 2, Heading 3, etc.

Heading 1 is reserved. The page title, for instance, is using Heading 1 and there shouldn't be anything with that priority below it.

Headings are hierarchical and they help search engine algorithms and screen readers better understand the organization of your content. Heading 3 should only appear under a Heading 2. Typically, you would have a couple Heading 3 sections under a Heading 2.

Text Alignment

Text is aligned left by default, only use centered or justified text for special circumstances. Contact Robin for assistance with this.

Do not use spaces to align text; it will cause the text to align differently on every screen. Use indents, lists, or centering instead. 

Bulleted Lists

Highlight the text you want in a bulleted list and select the “bullet” icon. You can also indent and outdent using the icons next to it.

Tables

Avoid tables when possible. Tables will often break the page when it tries to re-flow to smaller screens/windows. Tables were never meant for formatting, just data. Contact Robin about how to set them up correctly on the page.

Paragraph Breaks and Line Spacing

Hitting enter or return on your keyboard starts a new paragraph, which is automatically formatted to have a little space above it. If you want to place some text on the next line without creating a new paragraph hit shift and enter at the same time. This will create a line-break instead (in HTML it's a <br /> tag instead of <p></p>) and wrap the text to the next line inside the same paragraph.

Responsive Design and Mobile

As you work on the format and placement of items on your pages remember that this site will change depending on the device being used. The site "responds" to the current size of its window and whether or not it is being displayed on a touch device. On compliant browsers (Chrome/Firefox/Safari) you can grab the corner of your browser and shrink it to see the page re-flow.

When the page width drops below 640 pixels, the page drops the right sidebar completely. Use the right sidebar for "value added" content, like "Are you a student? You might find..." or Twitter/Facebook widgets.