Getting Started

Quick Start Guide by Role

Have an email you need to make, but don't know where to start? Check out this quick start guide to get going.

Marketing/Revenue

1. Choose an ESP: Determine which one is the best given the goals of the emails. Refer to the ESP section for details about each tool.
2. Write good copy: Refer to the Copy section to write copy that's on-brand.
3. Create the email within the ESP: If possible, use an existing template within the ESP. These are ready to go and just require editing within the WYSIWYG editor, so they're the fastest option. Need help? Refer to the relevant ESP help sections for guidance: MailChimp, Marketo, Intercom, Eloqua (TBD)
4. Need something more custom?: If an appropriate one isn't available and you need to create a more custom email, get in touch with a Designer or Developer for help with creating the email.

Design/Engineering

1. Choose an ESP: Choose an ESP. Determine which one is the best given the goals of the emails. Refer to the ESP section for details about each tool.
2. Create the email within the ESP: If possible, use an existing template within the ESP. These are ready to go and just require editing within the WYSIWYG editor, so they're the fastest option.
3. Need something more custom?: If an appropriate one isn't available and you need to create a more custom email, check out the templates already available in the Example Templates section. Choose a template that most closely addresses your needs, and if a good match doesn't exist then you can start out with the basic template. The basic template contains all of the atoms and molecules. You can use that as a base and remove the pieces you don't need.
4. Write good code: Review the Frontend Guidelines to get a sense of the best practices and get a feel for how the code is structured. Play close attention to the Cross-Email Client Guidelines which will help you develop the most bullet-proof email as possible. Also, be mindful of providing the Accessibility affordances.
   • Use well supported CSS: Wherever possible, use CSS that's well supported across email clients, particularly the ones that are in our Email Client Support chart. Campaign Monitor has a great chart that displays the CSS support across email clients.
   • Validate it: Use the process described in the Frontend Guidelines to validate the HTML. When working with often complicated email code full of nested tables, it's easy to forget a closing tag which can really mess up your layout in some email clients. Pass it through this tool to check for errors.
   • Compress it: Use the process described in the Frontend Guidelines to compress the HTML and CSS. In an effort to get email size as small as possible, compress the HTML. Smaller emails mean they load faster and avoid being clipped by email clients when they surpass file size maximums (Gmail's max is 102KB). Luckily, image sizes aren't included in this- only the text, full URLs, and HTML is counted.
5. Use the Bounce Email Style Guide as reference: If you need any additional components, refer to the Atoms and Molecules to add them a-la-carte.
6. Templatize it (optional): Are you making a recurring email that needs to be edited within an ESP in the future? Refer to the relevant ESP Template Language sections for guidance: MailChimp, Marketo, Intercom, Eloqua (TBD)
7. Test it: Developing emails that render well across email clients is a tricky beast. Luckily, our templates have been thoroughly tested to ensure you're being set up for success. That being said, as emails are being tweaked there's always the chance that it could look amiss in a given browser on a certain OS. The goal with testing is to catch these before emails are sent out so that we can confidently send high quality, high performing, on-brand emails.
   1. Review the Cross-Email Client Guidelines: We have Cross-Email Client Guidelines that set you up for success. Refer to the Email Client Support chart to identify the top clients we support.
   2. Test in Email on Acid: Email on Acid is a handy tool for testing emails across email clients. Use the profile named "Treehouse Email Client Matrix" to test the email against the email clients defined in our Email Client Support chart.

Overview of Email Service Providers (ESP)