The purpose of this brief guide is to illustrate and explain proper formatting techniques when designing for the Friedman School's site.
Accessibility Best Practices
Heading tags are used to structure content. It is important to ensure that the tags are used in the proper order.
Helpful Hint: Imagine all of your content as a bulleted list. Each indent represents another heading level.
Example of content with properly structured headings:
Heading 1: Always reserved for the page title. (Example: "Academics")
Heading 2: Content related to Heading 1 (the page title), and the first level of heading that content editors should use. (Example: "Degree Programs")
- Heading 3: Content related to the Heading 2 closest before (Example: "Agriculture, Food and Environment")
- Heading 2: Content related to Heading 1 (the page title), and the first level of heading that content editors should use. (Example: "Degree Programs")
A more concise demonstration of the following example:
Heading 1: Academics
Heading 2: Degree Programs
- Heading 3: Agriculture, Food and Environment
- Heading 3: Biochemical and Molecular Nutrition
- Heading 3: Food and Nutrition Policy and Programs
Heading 2: Online Certificate Programs
- Heading 3: Developing Healthy Communities
Heading 3: Sustainable Agriculture & Food Systems
- Heading 4: Program Faculty
- Heading 2: Degree Programs
Important: Do not skip the proper ordering of heading tags. Improper ordering of heading tags may cause issues for users with accessibility requirements. Additionally, improper ordering may affect the SEO (Search Engine Optimization) of the site as search engines require on the ordering of tags to understand and index content.
Practices Applicable to All Content Types
<span> tags are typically not necessary
The use of <span> tags in content is often not neccessary and can incidentialy cause nuisance display issues on the front end for users. Unfortunately, there are certain circumstances which may require us to use the <span> tag, and thus, we can not eliminate/filter its use automatically. These tags are often automatically generated when copying content into the Editor from e-mail and Microsoft Word. Please view your source code before publishing content to eliminate <span> and </span> tags.
Here are examples of an uneccessary/nusiance <span> tag:
<p>Welcome to <span>Tufts University Friedman</span> School of Nutrition Science and Policy.</p>
<span>Welcome to Tufts University Friedman School of Nutrition Science and Policy</span>
In the examples above, the <span> tag is unecessary. These lines of text should be wrapped in <p> ("Paragraph") tags only.
indicates a single space
The use of is not required to indicate a single space. Browsers can handle this functionality by simply inserting a space with your "space bar". Please view your source code before publishing content to eliminate .
It is recommended that you use the Enter key for a line break. This creates a full <p> wrapper. Please do not use [Shift] + [Enter] - this creates a single line break ("<br />") and is often not appropriate.
Practices Applicable to: Events
If you need to provide a link to another site and/or page in an Event, use the "Link" field. This will properly format the link for optimal display to the user.