HOLD: Proposed addition to design manual - responsive email templates

_config.yml

@@ -76,6 +76,10 @@ secondarynav:
   url: guides/effective-forms.html
   internal: true
   category: Guides
+- text: Responsive email
+  url: guides/responsive-email.html
+  internal: true
+  category: Guides
 # - text: Filtering patterns
 #   url: guides/filtering-patterns.html
 #   internal: true

guides/responsive-email.md

@@ -0,0 +1,100 @@
+---
+layout: page
+title: Responsive email
+category: Guides
+---
+
+- [MIME](#mime)
+- [Common Elements](#common_elements)
+- [Message Conent](#message_content)
+{: class="toc"}
+
+<div class="content-67 content-first">
+
+Email communications should be clear and easy to understand, whether it is sent by a person or auto-generated by a system. System-generated emails often don’t receive the same attention as personal messages or bulk mail, and they often miss an opportunity to reinforce the brand experience. This guide describes the common elements to consider when building an email communication strategy utilizing system-generated content.
+
+### Before we begin, make sure you
+{: class="h4"}
+
+  1. Understand your audience, 
+  2. Figure out what you need to communicate
+  3. Discover the best available options to communicate with your audience (text messages and push notifications may also be options)
+
+</div>
+
+<h2 id="mime">Multipurpose Internet Message Extension (MIME)</h2>
+
+Although most email clients support HTML formatted messages, there are exceptions. To ensure that your audience can see your message, make sure you send a plain text version with the HTML formatted message. 
+
+MIME is the standard that enables plain text and HTML formatted messages to be sent together in one message. If the email client supports HTML and the user has not expressed a preference for plain text messages, then the HTML version is shown. Otherwise the plain text version is shown.
+
+
+<h2 id="common_elements">Common elements</h2>
+
+All emails indicate who the email is from, a subject or reason for the email and a signature to close the message. Some messages may also include a notice.
+
+---
+
+### From field
+
+No one likes getting a message from `no-reply@agency.gov`. Make it easy for recipients to reply to the message if they have questions, and make sure the account is monitored.
+
+Use a friendly name with the email address. For example,
+
+    Consumer Financial Protection Bureau <complaint-hotline@consumerfinance.gov>
+
+There may be situations when there is a need to be more specific about the sender, such as addressing recipients at institutions or other external agencies.
+
+	CFPB Extranet Support <extranet-support@consumerfinance.gov>
+
+The from field should generally correspond to the signature line, described below.
+
+---
+
+### Subject
+
+The subject should clearly indicate the reason for the message. Don’t duplicate information in the subject that has already been communicated in the “From” field.
+
+For example,
+
+> Your account activation was successful
+
+Not,
+
+> CFPB Extranet: Account activation success
+
+Also, make the subject as specific as possible and phrase it in clear, friendly language. As a guide, the subject line should sound natural when read out loud.
+
+---
+
+### Closing or signature
+
+Include the full name of the organization. If the nature of the email is specific to a team, office or division of the bureau, then include that. Don’t add more information unless it is helpful to the recipient. Including a phone number also makes it easy for the recipient to respond if they have questions.
+
+Example from Consumer Response.
+
+> Consumer Financial Protection Bureau  
+> (855) 555-1234
+
+Example from Extranet Support Team.
+
+> Extranet Support Team  
+> Consumer Financial Protection Bureau
+
+---
+
+### Notice
+
+A notice may be used at the bottom of the email if required. There are currently no rules describing when an email should or should not include a notice.
+
+The current notice language follows.
+
+> Confidentiality Notice: If you received this email by mistake, please notify the sender of the mistake and delete the e-mail and any attachments. An inadvertent disclosure is not intended to waive any privileges.
+
+<h2 id="message_content">Message content</h2>
+
+Language and tone should be appropriate to the audience.
+
+Refer to the other guides in this design manual that apply to your message content.
+
+Test your messages with a sample of recipients and ensure your messages are accessible.