1. Best Practices
  2. Writing for the Web

Writing for the Web

Find our Writing for the Web workshop in the (Requires Net ID to view).

 

F-pattern scanning (not reading!)

Visitors to web pages scan content in an F pattern before stopping to read it. The "F-pattern" describes the scanning of content horizontally across the top first, then down the page, then across again.

Other common reading patterns have more recently been identified, especially related to reading on mobile devices, but the .

Once readers find the information they are looking for, they will invest time to read the copy. If they can’t easily find the information they seek, they will exit the page.

 

  • Write in short, simple sentences.
    Ensure information is understandable for a non-specialist.

  • Headings are critical.
    Ensure readers and search engines can quickly learn what your content is about through the use of strong headings/subheadings throughout your pages. Headings should include keywords that are highly relevant to the information that comes next.

  • Chunk content in brief paragraphs containing one idea.
    Chunking means that more sentences start at the left margin. This reduces the cognitive load on your readers.

  • Emphasize key messages.
    Use the inverted pyramid model of writing. This means that conclusions are presented first—i.e. the most important information is at the top of your page. Explain your most important ideas generally, then share more details as you move down the page.

  • Justify all text to the left.
    Meet the readers eyes where they naturally go. Consistent left alignnment of sentences and paragraphs leads to easier scanning.

  • Use lists.
    Use ordered lists (with numbers) and unordered lists (with bullets) to itemize important information or ideas.

  • Use tables to display tabular data.
    Use tables to simplify content and reduce the time it takes for your readers to analyze repeating sets of information. 

  • Minimize line length.
    The optimum line length for readability ranges from 60-115 characters. Line length is impacted by font style and size (pre-set in styles sheets or "CSS"), as well and screen-size breakpoints (i.e. whether your users are reading on a desktop, tablet, or phone).

  • Spell out acronyms on first reference.
    The first time an acronym / initialization / abbreviation is used on a page, it should be followed by the full term in brackets. Use the <abbr> tag when that same term appears again on the same page to help with user recall.
    For example:

    • First use of initialization on page is followed by a definition in brackets, such as –
      Websites must conform to WCAG (Web Content Accessibility Guidelines) standards.

    • Next use of initialization makes use of the <abbr> tag and title attribute, such as –
      Refer to the WCAG documentation.

  • Add hyperlinks to background information rather than including long passages of text on the same page. Outbound links can also increase perceptions of credibility. Learn what good link text looks like.

  • Incorporate multimedia. 
    Break up longer text with images, video, audio, and graphics. Introducing information through multiple formats provides visual interest, strengthens the impact of your content, and helps the user understand and recall your information.

Writing style

Queen’s University recommends following the guidelines set out in the , as well as the Canadian Oxford Dictionary for spelling.

The Queen’s University Writing Style Guide outlines styles particular to the university: exceptions, preferences, or Queen’s-specific conventions that are not covered by CP or Oxford.

Queen’s Writing Style Guide

Copy editing, typos, and spelling

  • Create a workflow process for proofreading. Ensure another person reviews new content for accuracy and grammar/writing style issues.
  • Use your Siteimprove account to find broken links and spelling errors. Learn more about quality assurance tools

Link text and accessibility

Inclusive Language

Review internal and external guidelines that outline general principles for writing about age, disability, neurodivergence, mental health, race and ethnicity, Indigeneity, sex and gender identity, sexual orientation, religion, socioeconomic background, and other intersecting identities.

Resources include:

Readability

Access your Siteimprove account to see the readability scores for individual web pages.

  • Scores are determined by elements such as the number of words in a sentence and word length.
  • Scores are matched to an reading-ability level, from kindergarten through college.

Though we are in a university environment, we do not want our web content to score at a college reading level. Aiming for a reading levels at the 10th-grade level or lower.

Reducing reading levels online is relevant for all users, regardless of their level of education. Complex writing structures plus the circumstances of the reader can mean a higher cognitive load for anyone. Reading can be made even more difficult because of a small screen size, a noisy location, slow internet connection, time of day, and the primary language of the reader.

  • Use reading scores to identify pages to review against best practices for writing online content.
  • Focus on pages with high reading levels and high traffic statistics.

The "accordion" container format

When to use

Use collapsible or "accordion" containers (see Accordion Container Example) as a layout tool to improve usability / user experience. This is especially true for mobile users, as it reduces scrolling.

The heading and text before each collapsible section should provide a quick summary of the content within the collapsible containers.

The accordion format can be especially useful when guiding people through a multi-step process, where information can be shown a little at a time.

When not to use

Don't use collapsible containers to stuff more and more content on a page. 

Too much content inside each collapsible section can lead to disorientation and reduce content discoverability.

Too little content insider multiple containers means a user has click to open one container after another without much reward. 

Having all the content of a page in full display at all times can sometimes be a better approach. Usability studies and eye tracking shows that people are willing to scroll if the information is valuable and formatted properly for scanning.

In other cases, lengthy or complex content may be better managed across more than one page.

[example of accordion style]

Example of an accordion container

  • Do use accordion containers to guide users though stepped information

  • Do ensure that headings and content within each collapsible area is succinct.

  • Don't use collapsible menus to cram a lot of content onto a single page. Long sections of content should be reworked and broken into smaller sections with headings that can be scanned.

  • Don't overuse accordions for a long list of frequently asked questions (FAQs). The accordion style is often adopted for formatting FAQs, but FAQs themselves can be problematic. Learn more about FAQs below

Writing approaches to avoid

Why the FAQs format is not great online:

  • Providing a list of questions and answers tends to lead to a large batches of unorganized content
  • if the questions posted are truly asked frequently, this may be because the information is not found elsewhere on the website
  • the questions often appear to be made up
  • lists of questions are crafted with a repetitive grammatical structure, such as "How do I…"  of "What is..." that requires more work for the user to parse; it is hard to scan sentences that all starts with the same word
  • if the questions are not framed exactly as the reader is asking them in their head, they may miss skip over it
  • they don’t make for great mobile content, as you can't see much of the page content at one time

If you are committed to including the FAQ format:

  • use it in moderation
  • organize the questions under thematic headings
  • keep the questions very brief; better yet, rework the question into a heading format (exclude "how do I" or "what is," etc., and the question mark
  • provide only very brief answers, then link to the web pages where more information is available (i.e. ensure the information provided is also integrated—and therefore discoverable—within the structured content of your site)
  • include only questions that are truly asked; this might include "exceptions to the rule" and other clarifying information, that not everyone needs

Don't post "welcome to my website" text.

While it is good to aim for a friendly tone, use your highly-visible front page (your prime real estate!) for a strong headline and "30-second elevator pitch" that explains that value of your unit/service/initiative.

This content should be rich with keywords, so both your reader and search engines can quickly understand what you do and why it is important.

Don’t publish empty pages, "under construction" messages, or "coming soon" information.

Don’t include any promise of information. Just leave it out until it is ready to publish.

If you must include a note about content to come, only do so when you can indicate the date when the new content will be available. The be sure to follow through on that promise.

Keep the use of all caps to a minimum:

  • Styling text in all caps means there are fewer distinctions between letters. when all the letters are the same height (without ascending or descending stems) and take up the same amount of space, text is generally harder to read.

  • Search engines and screen readers will interpret the words in all caps as initialization. A screen reader will read it out loud one letter at a time, i.e. as A-L-L C-A-P-S or individual letters instead of two separate words.

Wherever you do include text in all caps:

  • Limit it's use to fewer than 25 characters.
  • Enter the text in sentence case or title case and then use the text-transform attribute to display it in capital letters. For menu items, this is done through the website's CSS.

Using inline styles, the source code would look something like this:

<p style="text-transform:uppercase">this text is entered as lowercase letters but rendered in all caps</p>

And the browser would display it like this:

This text is entered as lowercase letters but rendered in all caps.

To avoid hosting out of date content, only include content you "own."

Don’t duplicate content from another site. You won't know when that content is updated / your copied content becomes out of date.

Instead, reference that content by providing a brief description of the concepts it covers (indicating why it may be relevant to the reader) and provide a link.

  • Nix the jargon.
  • Explain complex or niche terms.
  • Keep key terms consistent across your site.

The table format is reserved for displaying tabular data.

In the past, tables were used to place content in a particular position on the page. Newer coding rules and responsive design have superseded that practice. Additionally, the semantic html tags that are used to indicate table headers and cells make the use of tables for layout purposes semantically incorrect.