Best Practices

To preserve consistency across CLAS websites, we ask that you keep these "best practices" in mind when you edit existing web pages or add new ones.

1. Use the right heading
2. Add alternative text to all images
3. Avoid underlining
4. Use numbered lists and bullets correctly
5. Know the difference between single and double line breaks
6. Use the built-in spell-checker
7. Type dashes correctly (-- or —)
8. Try to use one space after a period
9. Be consistent
10. Check for broken links often
11. Use descriptive text for links

1. Use the right heading

If you click the Paragraph Format drop-down menu at the bottom of the text editor toolbar (see below), you will see a few different heading types.
text editor toolbar screenshot

  • Use Normal for normal-sized text, like this.
  • Use Heading 2

    for top-level headings.

  • Use Heading 3

    for sub-level headings. Text set in Heading 2 should always precede text set in Heading 3.

  • Do not put an additional paragraph space after the headings. Hit Enter once after typing a heading, and begin typing where the cursor is blinking. The text will appear beneath the heading with the right amount of space between it and the heading (even if it doesn't appear this way in Edit mode). Read more about line breaks and spacing.

  • Headings may not necessarily look the same in Edit mode as they do in View mode. This is okay. If you're worried that a heading didn't "take," make sure you have selected "Full HTML" in the Text Format menu below the body area. Then, click "Save" and check the page in View mode. If the headings are still messed up, contact Web Services.

  • Do not add links to headings. Think of headings only as labels that introduce subsequent text. Add links only to normal next.

2. Add alternative text to all images

Alternative text provides a textual alternative to non-text content in web pages, particularly images. Adding alt text to images is the first principle of web accessibility, as it makes websites accessible to visually impaired people (whose screen readers read the text of web pages aloud [but cannot analyze images]), as well as to those whose browsers don't support the display of images (alternative text displays in place of images). Think of alt text as a hidden caption that describes the image in a very clear, very brief way.

To add alternative text to an image, click the image icon in the text editor toolbar, or right-click on the image. You will see a field called "Alternative Text."

When adding alt text to an image, keep the following in mind:

  • Alt text should be accurate and equivalent in presenting the image's content (e.g., "Buckingham Fountain").
  • It should be succinct; a few words usually suffice.
  • Do not preface your description with the phrase "image of" or "picture of," etc. Just describe the content.
  • Read the text that accompanies the image on the web page. Try not to be too redundant in your alt text.
  • If the image is also a link, you must describe the image as well as the linked-to page (e.g., "Buckinghham Fountain; Wikipedia entry for Chicago").

For more information on alt text and accessibility standards, consult the W3C guide or WebAIM site. For detailed instructions about uploading images, read the Uploading Images section of our Guide to Using Drupal

If you'd like to embed a video in your website, you will also need to provide captions and a transcript. Contact Web Services for more information.

3. Avoid underlining

Web Services has disabled this feature on many text editors. If it is enabled on yours, please don't use it. And please don't add underlining tags to your website's HTML code. Underlining has become synonymous with linking: where there's an underline, users assume there's a link. Even if you want to underline a link, please don't. The CLAS websites do not use underlining. (Boldface and italics are okay.)

4. Use numbered lists and bullets correctly

Use a numbered list only when you want to emphasize the order in which something is (to be) done. Use bullets in all other cases, but remember that both numbered lists and bulleted lists are, in fact, lists and should be populated by more than one list item. Use the list buttons in the text editor toolbar to create lists (see below); they will insert bullets and numbers for you. Do not use keyboard shortcuts to insert "bullets" or use asterisks. For more information, consult the W3C guide.  

Text editor toolbar screenshot

5. Know the difference between single and double line breaks

In Drupal's Edit mode, hitting the Enter key once will create a double line break. If you want a line of text to appear directly beneath another line of text (or an image, etc.), create a single line break by holding down the Shift key and pressing Enter.

Example:
The man forgot to eat breakfast. (Now I will press Shift + Enter.)
He was hungry all day. (Notice how the new text appears on the very next line; this is called a single line break. In HTML, it is represented by the <br/> tag.)

The man forgot to eat breakfast. (Now I will press Enter.)

He was hungry all day. (Notice the double line break. In HTML, this is represented by the <p> tag.)

6. Use the built-in spell-checker

It's easy to make mistakes when updating a web page. The text editor toolbar has two helpful options. If you click the "ABC" icon on the left (see below), Drupal will run a spell-check on the entire body area at once. If you click the "ABC" icon on the right, Drupal will check your spelling as you type, underlining misspelled words like a word processor does. Either is an excellent way to ensure that your text is free of typos and reflects well upon your department.

Text editor screenshot

7. Type dashes correctly (-- or —)

Most word processors automatically convert two hyphens (--) into a dash (—). The Drupal text editor does not. You may use two hyphens (do not use a single hyphen with spaces on either side), or you can create a smooth dash using the following keyboard shortcuts. On a PC, hold down the ALT key and quickly type 0151. On a Mac, press the following keys together: Option, Shift, Hyphen(-).

8. Try to use one space after a period

If you tend to put two spaces after ending punctuation marks, please use only one when you are editing online. (The two-space convention originated with typewriter use, as typewriters did not kern their lettering. Drupal uses well-designed, professionally kerned typefaces.) 

9. Be consistent

The College doesn't maintain a style guide of its own, so we ask that you determine your own formatting for things like phone numbers (which can be formatted with or without hyphens and parentheses), abbreviations (periods or no periods?), and dates (hyphens or slashes?). The most important thing is that you choose a format and use it consistently throughout your website. 

10. Check for broken links often

We recommend that you check your site for broken links on a weekly basis, to ensure that your site remains usable and credible. 

11. Use descriptive text for links

Before they click on a link, users should have a good idea of where the link will take them. Drupal allows you to hyperlink text, so you don't have to paste long, messy URLs into the body area. 

  • No: For more information, click here. [More information about what? What will the user find "here"?]
  • No: For more information about our Graduate Program in XYZ, click here. [This is better, but "here" is such a small word; users may not notice that it is linked.]
  • Yes: Read more about our Graduate Program in XYZ. [very clear; action-oriented]
  • OK: For more information about our Graduate Program in XYZ, visit http://wwwabcdefg..... [This can work if the link is short, or if you want the user to take particular note of the URL.]