...
- Add alternate text to all photos, especially photos with text.
- After you've inserted a photo into the email, select it, and type into the alt text field in the left sidebar.
- Alt text should include any text that's within the photo, or a basic description of what's in the photo. If it's a headshot of a person, simple type in their name.
- Don't use images that are larger than necessary. Images can slow down your email and consume a lot of data, which is especially problematic for people with limited internet.
- Full-width images should be 600 pixels wide.
- Half-width images should be 300 pixels wide.
- For bonus points, run your image through tinypng.com before uploading it to further shrink the file size.
- Only use all caps for acronyms. Screen readers read anything in all caps letter by letter, not as a word. If you wish to emphasize text, use bold. (don't use underlines, those should be reserved for links only).
- Do not use underlines unless it's for a link! Users expect underlines to be links, and it will be confusing if they are not.
- Do not use phrases like "click here", "use this link" for links/buttons. Link text should make it clear where the user is going, with as much context as possible. "Sign up for our newsletter" "Read more about ____" "Apply now" are all decent examples of button/call to action text. When an action doesn't make sense, link text like "student resources", "list of business organizations", "our career team" might be appropriate. (This is done because screen reader users sometimes navigate by link to "skim" content. If the text linked doesn't provide enough context, a user will have to spend time figuring it out.)
- Likewise, don't include the entire URL as text in your email. Don't use: "https://www.reallylongurl.com/morewordscontinously" (this is because screen readers will spell out every letter in the link. You can imagine how tedious that is.)
- Pay attention to header hierarchy. In the case of our email templates, the H1 is used exclusively for the department name, and after that the main headers of the email are H2s. H3s should be used as subheaders of H2s.
- Design note: Please don't bold headers. They are already styled to be large.
- Use sentence case for links, buttons, and headings
...