Email

A system for sending messages from one individual to another between computers or terminals using software.

Types

Primary

Multiple images, stylized text, multiple columns, video thumbnails, gifs, background image, background color or background gradient.

Guidelines

Emails are designed at 1000px width, though they are coded to be 640px wide. They are designed at about 1.5 times their coded size to maintain great image quality for high-DPI displays. Due to the scaling difference, the values below reflect the sizes to design at 1000px.

Colors, padding, etc. can be changed to match designs. However, the following should never change:

  • Background color outside of email
  • Body copy font
  • USANA logo color
  • Footer content color
  • Disclaimer copy section

Best Practices for email design:

  • Design with mobile in mind
    Emails should be no more than three columns. They should be designed so the layout can collapse to a single column on a mobile device.
  • Design to HTML
    Due to a lack of enforced email standards across email clients, we are forced to code using tables and inline styles. This means that essentially everything in email is made up of squared sections.
Do
  • Use heading markup for the details that reveals content underneath. 
  • Make sure the disclosed content comes right after the trigger that discloses it.
  • Use a button element as a trigger for disclosure. 
Don't
  • Make controls focused and or activated.
  • Think that they can activated by voice.