NOTE: The following guide was designed for websites built in the Drupal 7 platform on campus. This platform has been replaced on campus with the new Drupal 9 platform, which provides updated branding, features, service, and security, as well as an updated user experience. For guides and helpful instructions on the new Drupal 9 platform, please refer to the Drupal 9 SiteNow documentation.

To be consistent across CLAS websites, please use these best practices when editing existing web pages or adding new ones.

1. Use the correct 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 correct heading

If you click the Paragraph Format drop-down menu at the bottom of the text editor toolbar, you will see different heading types.

• 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). Learn more about line breaks and spacing.

• Headings may not 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. 

• 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 people who may need ot use a screen reader because of a visual impairment or who are using a browser that doesn't show the image. Think of alt text as a hidden caption that describes the image clearly and consciously. 

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, please:

• Be accurate and equivalent in presenting the image's content (e.g., "Buckingham Fountain").
• Be succinct; a few words usually suffice.
• Do not preface your description with the phrase "image of" or "picture of."
• Try not to be too redundant in your alt text from what is on the page. 
• If the image is also a link, you must describe the image as well as the linked-to page (e.g., "Buckingham 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 this 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. 

3. Do not underline as a text style

CLAS websites do not use underlining in the text editor for style. Boldface and italics are okay. This is because underlining has become synonymous with linking: where there's an underline, users assume there's a link. 

4. Use numbered lists and bullets correctly

Use a numbered list only when you want to emphasize a numerical order. Use bullets in all other cases, but remember that both numbered lists and bulleted lists are lists and should be populated by more than one list item. Use the list buttons in the text editor toolbar to create lists; 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.  

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 spell-check

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. Both are excellent tools to ensure  your text is free of typos. 

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. 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 — and is no longer needed). 

9. Use the University of Iowa Style Guide

The University of Iowa has an editorial style manual that guides proper style for all public communication. We use AP style, with some exceptions. Visit the university brand website for sample messaging and to download the latest version of the style guide.  

10. Check for broken links often

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

Users should know where the link will take them before they click. Hyperlink descriptive text in your page copy. Do not use click here for hyperlink text. 

• 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 https://grad.uiowa.edu. [This can work if the link is short, or if you want the user to take particular note of the URL.]