1. Best Practices
  2. Writing for the Web

Writing for the Web

F-pattern scanning

Visitors to web pages tend to scan in an F pattern before stopping to read: scanning content horizontally across the top, then down the page, then across again.

Some other common reading patterns have been identified, but the F-shaped scanning pattern is dominant.

Once readers find the information they are seeking, they will invest time in the finer details of web copy. If they can’t easily find the content 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. This also results in more sentence starts in the left margin and reduces the cognitive load on your readers.

  • Emphasize key messages. An inverted pyramid model of writing, where conclusions are presented first puts the most important information at the top of your pages. Explain your most important ideas in broad strokes first, then share the finer details as you move further down a page.

  • Justify all text to the left. Meet the readers eyes where they naturally go. Consistency in the position of the start of sentences and paragraphs leads to easier scanning.

  • Use lists. Ordered (with numbers) and unordered lists (with bullets) itemize important information or ideas, each on their own line.

  • Use tables to display tabular data. Use tables help to simplify content and reduce the time it takes 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 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 through your text with images, video, audio, and graphics. Introducing other 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 Canadian Press (CP) Stylebooks, 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

Faculty of Health Sciences Inclusive Style Guide. This I-EDIIA-focused writing guide provides advice on how to engage with issues concerning race, gender, and sexual orientation, among other intersecting identities. 

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

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, word length, and sentence length.
  • Scores are matched to an reading-ability level, from kindergarten through college.
  • Ability / difficulty levels are relevant to all users, regardless of their level of education. Complex writing structures can mean a higher cognitive load for anyone under differing reading circumstances: e.g., size of screen, location, time of day, and primary language of the reader

Though we are in a university environment, scoring at the college level for our web pages should not be our goal. When we aim for scannable content, avoiding complex sentence structures and conventions such as frequently asked questions style, our reading levels should rate at a 10th grade level or lower.

  • Use the reading scores to identify content that may be more complex than necessary.
  • Review this content against best practices for writing online content.
  • Spend the most time on high-traffic pages that also score high on the index.

Learn more: Siteimprove Automated Readability Index

The "accordion" container format

When to use

Using collapsible or "accordion" containers (see Accordion Container Example) as a layout tool can improve usability / user experience, especially for mobile users.

The headings of each collapsible section, when well written, can provide a broad summary of page content without requiring a lot of scrolling.

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 and not to overwhelm the user.

When not to use

Too much content inside each collapsible section can lead to disorientation and reduce content discoverability. Don't use collapsible containers to stuff more and more content on a page.

If a user has click to open one container after another, they may lose confidence that the information they want is going to be shown.

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 is better managed by 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 as a crutch or a tool to cram a lot of content onto a single page. Long sections of content should be reworked and broken into smaller sections with headings for scannability.

  • Don't overuse accordions for 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:

  • the use of this format tends to lead to a large batches of unorganized content
  • if the questions posted are actually frequently asked, it might be because the information is not actually found elsewhere on the website
  • they often appear to be made up
  • they are often crafted with a repetitive grammatical structure, such as "How do I…" that requires a lot of thinking on the part of the user to parse; they are not scannable / skimmable
  • if your 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 information they provide into themes and under thematic headings rather than questions
  • keep question-style headings very brief; better yet, rework the question into a heading without the question mark
  • ensure the information provided is actually hosted somewhere else on your site; provide only very brief answers, then link to the web pages where more information is available
  • use only true questions that are indeed frequently asked – i.e. "exceptions to the rule" and other clarifying information, that not everyone needs. Information that everyone needs should already be on your other pages

    Article – "No More FAQs: Create Purposeful Information for a More Effective User Experience"

Avoid posting "welcome to my website" text. While it is nice to strike a friendly tone, that the reader is welcome to the information on your site is already implied by making your website public.

Instead, reserve your highly visible front-page space (it's your prime real estate!) for a strong headline and "30-second elevator pitch" rich with keywords ­– i.e. provide a brief description of your organization so that any reader can quickly understand what you do and why it is important.

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

Just don’t include a page or a promise of information 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. Make 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, as A-L-L C-A-P-S instead of as two separate words.

Wherever you do include text in all caps, enter the text in sentence case or title case and then use the 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.