Brand and Content Best Practices

Keep layouts, components, text, and images in a consistent style across your site. Each page should look like it belongs to the same site. Each paragraph should sound like it has the same writer.

Make your menu clear, short, and easy to predict. First, find the main reasons people come to your site. Then build the menu around those tasks. Use specific words that your visitors already know. For how-to steps, see Building Your Menu.

Use the Yale logo correctly and the same way every time. Follow the logo rules in Yale Identity.

Check your site on a regular schedule. Make sure links work, images display, and content is still correct. For a schedule and checklist, see Regular Auditing and Web Maintenance.

Each page has one H1, which is the page title. YaleSites makes the page title the H1 for you.

Use sentence case for headings inside the page (H2 and lower). Capitalize only the first word and proper nouns, such as Yale University or President Maurie McInnis.

Use heading levels in order. Do not skip from an H2 to an H4.

Pick the component that presents your content best. For example, put frequently asked questions in an Accordion instead of one long text block. To compare your options, see Building with Blocks.

Visitors use desktops, phones, tablets, and other devices. Make your browser window narrow to preview your page on a small screen. Make sure that elements stack in a clear order and stay easy to use.

Use as few acronyms and as little internal jargon as you can. Visitors from outside Yale may not know them. On each page, spell out the full name the first time you use it. Add the acronym in parentheses only if you use it again later on that page.

A call to action (CTA) is short button text that asks visitors to do something, such as go to another page. “Learn more” and “Read more” are common. Try more specific words that tell visitors what they get, such as “Discover how” or “See upcoming events.”

Make sure the button goes to content that matches the words. For example, use “Watch how” only for a link to a video.

Remember: keep CTAs short, at five words or fewer.

Do not point to a place on the page, such as “see the image below.” On a phone, the layout changes and the image may not be below. Name the item instead, for example “see the campus map.”

Write link text that makes sense on its own. Screen reader users often hear links without the text around them. The link text should say where the link goes.

Do not use “click here” or a bare “read more” as link text. For more, see Web Writing Best Practices.

Choose campus photos that support your mission and tell your unit’s story. Good photos make a strong first impression and draw visitors in.

Do not use photos that show:

• Clothing that is not appropriate
• Litter, pollution, or other negative details
• Clearly outdated scenes
• Text on top of the image, such as a poster or flyer
• Generic stock scenes, when a Yale photo would work better

Keep photos on a page at about the same size, except for the banner image at the top. This gives the page balance.

Use the same orientation for all photos on a page. For example, if your first photo is horizontal, make the others horizontal too. For how YaleSites crops and sizes images, see Working with Images in YaleSites.

Give every image a clear description (alt text) for screen reader users. The only exception is a decorative image. For how to write alt text, see Creating Accessible Content.

Follow the Yale Verbal Identity Guidelines and write with your visitor in mind. Keep pages short enough that visitors do not scroll forever. Use components to break long content into sections that are easy to read.

Watch for awkward line breaks in headings and text. A different word or a shorter phrase often gives a cleaner break.