School of Health and Human Sciences

Website Content Guidelines

Website Content Guidelines

website guidelines

On average users look at your webpage for only 10-20 seconds.

Create scannable pages with  simple clear text and easy to identify links. This improves usability, accessibility and Search Engine Optimization (SEO)

Try to make every word count.

Avoid Welcome Messages

  • “Welcome to our website, our program, etc …”
  • “We invite you  to look … “

Everyone by default is welcome!

Important Information First

  • State conclusion or purpose or most important info first. Users may never get to the bottom of the page.
  • Answer the who, what, when, where, why questions as soon as you can. Don’t build up to it.

Simple Words and Tenses

When possible,  use simple words and tenses.

  • Use simple verb forms. For example:
    • Have been selected – are selected
    • Will have been done – is done
  • Use simple words. For example:
    • Obtain – get
    • Prior to – before
    • Purchase – buy
    • Utilize – use
    • Request – ask for
  • Use the language of your audience.

Plain Language For Everyone, Even Experts from the Nielsen Group

Clear Descriptive Headings and Subheadings (h1,h2,h3)

Headings indicate to screen readers, search engines, and regular users, the key topics  on your pages. Proper use of headings is good for accessibility and SEO.

  • Use headings to structure content.
  • Do not just make text big and bold to “look” like a heading.
  • Do not use headings to make text “look” large or small.
  • Do not skip headings levels.
  • Make headings interesting.
  • Use passive voice  if it makes sense.
  • Use questions in headings.

Short Sentences and Paragraphs

  • Make your point quickly. Usually not more than 20 words per sentence.
  • Short concise paragraphs.
    • Shorter than for printed material.
    • Not more than five sentences per paragraph.
    • One-sentence paragraphs are OK.

Chunking Content –  The Importance of Formatting

Example: before formatting content and after formatting content

This means breaking the content into smaller more manageable readable pieces.

You can use the following strategy:

Search your text for:

  • Paragraphs and sentences that you can convert  to  bulleted lists.
  • Long sentences. Do you have sentences that span 3-4 lines? Break into shorter sentences.
    • Usually not more than about 20 words per sentence.
  • Text that you can pull out and use blockquotes <blockquote>. For example:

    This is interesting text that should stand out!

  • Words that can be deleted and sentences that can be simplified.
  • Key words and phrases to make  bold – do not make more large blocks of text bold (everything is bold, nothing stands out).

Also you can add:

  • Add captions to images if possible.
  • Whitespace – leave large margins around elements on page.
  • Use horizontal lines to separate sections: <hr>
  • Use tables for data.

Example 1: This sentence can be changed to a more readable bulleted list

“The statement of purpose must be a professionally written document that is double-spaced using 12-point font, 1-inch margins, and that is a maximum of 2 pages in length.”

The same information in a more scannable form:

Requirements for statement of purpose:

  • Professionally written.
  • Double-spaced.
  • 12-point font.
  • 1-inch margins.
  • 2 pages in length is maximum.

Example 2: This paragraph can be simplified

The XYZ minor is designed for undergraduates with any major who are interested in a career in XYZ or personally interested in the topic. This minor should be of special interest to undergraduates planning to pursue careers in the allied health fields, with businesses or non-profits providing services or products to XYZ adults and their families, or students interested in researcher in XYZ.”

The same information in a more scannable form:

The XYZ minor is designed for undergraduates with any major, who are interested in a career in XYZ, or personally interested in this topic.

The minor is of special interest to undergraduates planning careers in:

  • Allied health fields.
  • Businesses or non-profits providing services or products to XYZ adults and their families.
  • Research related to XYX.

 

Pronouns and Active Voice (with the exception of headings)

  • Use “you” and “we”: This makes for a shorter cleaner sentence.
  • Use active voice. It is  usually shorter and easier to read.
    • “The handbook should be downloaded by the student before…”  in active voice  “You should download the handbook before …” or simply, “Download the handbook before..”
    • “The following framework was proposed by the committee.” in active voice “The committee proposed the following framework.”

Links

Links labels should be clear, descriptive, and easy to understand. A clear label is easier to All users, especially screenreader users. It also improves SEO.

A user should know what will happen or where they will go BEFORE  they click on a link!

 

  • Click here is not a good  link label.  Instead of  ” Click here to download the student handbook”,  write “Download the student handbook”.
  • Users should know in advance what happens when they click on the link.
    • If the link opens a PDF or anything other than an HTML page, inform the user.
      Write Strategic Plan (PDF) instead of Strategic Plan.
      On a mobile device, for example,  a user may not want to wait for a PDF to load.
    • Email links should be clear. For example: jane_smith@uncg.edu rather than Jane Smith. In the second case, it is not clearly an email link.
      It is frustrating to click and inadvertently open an  email program that you do not use.
  • Don’t embed important links in the middle of dense paragraphs. Put them in a menu or sidebar.
    • If you never see or read the link you will not click on it.
  • Labels should be as short as possible.
  • Don’t user urls as link labels :  https://hhs-sites.uncg.edu/people?role=faculty – unless the URL is memorable like Iforgot.apple.com.
  • Don’t open links in a new window.
    • For mobile devices and screen readers this may be confusing. Some people may not realize a new window or tab has opened – when they try the back-button it does not work, as the new window or tab has no history. Everyone knows about the  back button.


Better Labels for Website Links: the 4 S’s for Encouraging Clicks from the Nielsen Group

File Names

Consistent human and machine readable and sensible file names.  It is  easier to find the image or document in a Google search. It is also easier for you to find your document in 2 years from now when you have forgotten what you called it!

  • Examples of file names:
  • Do not use spaces in file name – in a browser address bar the space is converted to “%20” so the file name “easy to read.docx” renders as “easy%20to%20read.docx”
    • Use dashes or underscores to separate words.
  • Do not use punctuation in files names. syllabus
  • Be consistent and descriptive. If your files have versions it may be useful to have dates. For example:  phe-112-02-syllabus-fall-2021.pdf

Multimedia

Images

  • Do not upload an image directly from a camera and then resize  with the image handles in WP.  It might “look” the right size, but the actual file size has not changed.
  • Use alt text for images, unless the images are purely decorative.
    • Do not say “Image of …” in alt text. Alt text is read out by screen readers and it is frustrating to hear “image of ” 10 times, when the user knows the object is an image.
    • Alt text should convey the meaning, not just describe the image. For example: If you have an image of a magnifying glass to indicate search, the alt text   ‘search’ is more meaningful than ‘magnifying glass’.
  • Provide a text version if you use an infographic.
    • Note that contact info, email addresses, and urls in your graphic cannot be cut and paste and screenreaders cannot “read” pixels.
    • Check for adequate contrast between foreground and background. See WebAim contrast checker.

Video

  • Use YouTube.
  • Use captioning – always.
    • YouTube automatic captioning is the easiest.
    • Edit the captions to add punctuation and correct errors.
  • Allow controls to display so user can start and stop video. This is the default when you embed a YouTube video in a webpage – do not change that if given the option.
  • Video should be short!  With few exceptions, no longer than 30-60 seconds.

Audio

  • Include a text transcript.

References