Charles Nadeau

Understanding common design patterns can help you create cohesive and effective email layouts that align with your brand.

Most notification emails consist of only a handful of components:

All the components are optional in the email template except for the content.

The recipes in this cookbook describe how to create and insert design elements in the email template. You can mix and match elements to create your own email design. The following are a few common design patterns:

Company logo	Company logo with footer

Company banner with footer	Company banner with CTA banner and footer

For some inspiration, see some email designs on the Lotus Themes blog.

Designing the look and feel of emails can be challenging because HTML and CSS can be rendered differently in different email applications. Certain types of formatting can even be interpreted as spam.

Follow these general guidelines when designing email:

Follow these guidelines for images:

• Use images sparingly: Fewer images help keep the layout clean and uncluttered. Also, lots of images can trigger spam filters.
• Set the size of images with CSS: Use inline styles to size the images in your layout. Images with no defined sizes often distort the layout of emails. For added peace of mind, physically resize the images using resampling.
• Use ALT tags on all images: ALT tags display a description of the images before users allow the images to be displayed.
• Don't link to images in a closed Zendesk account: The images will be broken if the intended recipient is not registered and signed in.

This recipe shows you how to add your company logo to the email template. Example:

Ingredients

• URL of your company logo image

Recipe

This recipe shows you how to add a company banner to the email template. A company banner typically consists of the company's logo and name set on a background color. Example:

Ingredients

• URL of your company logo image
• color values for your brand identity

Recipe

1. Paste the following code block in an HTML or text editor:

   <table style="background-color: #c0c7d8;" width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation">
     <tbody>
       <tr>
         <td align="left" style="display: flex; padding-top: 0px; padding-bottom: 0px;">
           <img src="company_logo.png" alt="company logo" style="width: 100px; height: auto; margin-right: 10px;">
           <p style="font-family: Verdana, Arial, sans-serif; font-size: 24px; font-weight: bold; color: #333; margin-top: 50px;">Company name</p>
         </td>
       </tr>
     </tbody>
   </table>

2. Make any of the following changes to customize the company banner:

   Change
   Logo image	Element: img > src Replace the placeholder value of the src attribute with the URL of your logo image. Example: img src="https://www.example.com/images/logo_acme.png"
   Logo size	Element: img > style > width Change the width value to resize your logo. Example: img style="width: 120px; height: auto; ..."
   Space around logo	If there's too much space around the logo, you might need to crop the white space around the image with an image editing tool. If there's not enough space around the image, you can increase the padding of the table cell. Element: td > style Add padding to the style attribute and adjust its value. Example: td style="padding: 10px; ..."
   Format of the company name	Element: p > style Change any of the text styles or add your own. Example: p style="font-size: 30px; color: #553e3e; ..."
   Space between the logo and the company name	Element: img > style > margin-right Increase or decrease the margin-right value to increase or decrease the space between the logo and the name. Example: img style="margin-right: 15px; ..."
   Vertical alignment of the company name relative to the logo	Element: p > style > margin-top Increase or decrease the margin-top value to move the company name higher or lower relative to the logo. Example: p style="margin-top: 40px; ..."
   Background color of the banner	Element: table > style > background-color Replace the hex value of #d3d3d3 of the background-color style with your own value. Consult your branding guidelines or an online color picker such as html-color.codes. Example: table style="background-color: #d8e3fb; ..."

3. Adjust other values as needed.
4. Save the file with an .html extension and preview your changes in a browser often.
5. Preview the banner in a test email template before adding it to the email template in your account.
6. When you're ready to go live, paste the banner code block at the following location in the HTML email template in Admin Center (Admin Center > Channels > Email).

   

This recipe shows you how to add a call-to-action (CTA) banner to the email template. A call-to-action banner is usually located after the email body. It typically invites the user to do something such as join your community, use your help center, try a new product, and so on. It consists of a graphic, text, and a link set on a background color. Example:

Ingredients

• text of your call to action
• URL of a call-to-action image
• URL for a link to help users accomplish the call to action
• color values for your brand identity

Recipe

1. Paste the following code block in an HTML or text editor:

   <table style="background-color: #d8e3fb; margin-top: 12px;" width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation">
   <tbody>
     <tr>
       <td align="left" style="display: flex; padding-top: 0px; padding-bottom: 0px; padding-left: 50px; margin-top: 12px; margin-bottom: 8px;">
   
         <div id="cta-text" style="width: 300px;">
           <p style="font-family: Verdana, Arial, sans-serif; font-size: 18px; font-weight: bold; color: #333; margin-top: 6px;">Take a hand, lend a hand</p>
           <p style="font-family: Verdana, Arial, sans-serif; font-size: 14px;">Join our worldwide community to ask expert users for advice or share your own.</p>
           <p style="font-family: Verdana, Arial, sans-serif; font-size: 12px;"><a href="#">Ask the community</a></p>
         </div>
   
         <div id="cta-image" style="padding-left: 20px;">
           <img src="cta_image.png" alt="cta_image" style="width: 140px; height: auto; border-radius: 50% 50% 0 0;">
         </div>
   
       </td>
     </tr>
   </tbody>
   </table>

2. Add your call to action in the three paragraph tags. Add or remove paragraphs as needed.
3. Make any of the following changes to customize the call-to-action banner:

   Change
   Call-to-action image	Element: img > src Replace the placeholder value of the src attribute with the URL of your call-to-action image. Example: img src="https://www.example.com/images/cta_image.png"
   Image size	Element: img > style > width Change the width value to resize your image. Example: img style="width: 120px; height: auto; ..."
   Format of the call-to-action messages	Element: p > style Change any of the text styles or add your own. Example: p style="font-size: 30px; color: #553e3e; ..."
   Space between the messages and the image	Element: div id="cta-image" > style > padding-left Increase or decrease the padding-left value to increase or decrease the space between the messages and the image. Example: div id="cta-image" style="padding-left: 30px; ..."
   Background color of the banner	Element: table > style > background-color Replace the hex value of #d8e3fb of the background-color style with your own value. Consult your branding guidelines or an online color picker such as html-color.codes. Example: table style="background-color: #d3d3d3; ..."

4. Adjust other values as needed.
5. Save the file with an .html extension and preview your changes in a browser often.
6. Preview the banner in a test email template before adding it to the email template in your account.
7. When you're ready to go live, paste the banner code block at the following location in the HTML email template in Admin Center (Admin Center > Channels > Email).

   

This recipe shows you how to add a footer to the email template. A footer can contain a variety of information, including contact information, social media links, and so on. For social media links, see the next recipe, Recipe: Add social media links to the footer.

The standard email template already provides the following placeholders for a footer:

You can replace or supplement these placeholders with your own footer.

In this recipe, you'll create a footer that provides contact information. It'll replace the {{footer}} and {{footer_link}} placeholders. Example:

Ingredients

• your company's contact information
• color values for your brand identity

Recipe

1. Paste the following code block in an HTML or text editor:

   <table style="background-color: #d8e3fb; margin-top: 12px;" width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation">
     <tbody>
       <tr>
         <td align="center" style="padding-top: 4px; padding-bottom: 8px; margin-top: 12px; margin-bottom: 8px;">
             <p style="font-family: Verdana, Arial, sans-serif; font-size: 12px; font-weight: bold; color: #333;">support.eatwell.com</p>
             <p style="font-family: Verdana, Arial, sans-serif; font-size: 9px;">181 Fremont Street, San Francisco, CA 94105</p>
             <p style="font-family: Verdana, Arial, sans-serif; font-size: 9px;">Copyright 2024 Eatwell Inc All Rights Reserved</p>    
         </td>
       </tr>
     </tbody>
   </table>

2. Change the contact information in the three paragraph tags.
3. Make any of the following changes to customize the footer:

   Change
   Background color of the footer	Element: table > style > background-color Replace the hex value of #d8e3fb of the background-color style with your own value. Consult your branding guidelines or an online color picker such as html-color.codes. Example: table style="background-color: #d3d3d3; ..."
   Text color	Element: p > style > color Change the color value. Example: p style="color: #553e3e; ..."
   Text formatting	Element: p > style Change any of the text styles or add your own. Example: p style="font-family: Georgia, sans-serif; ..."
   Space from the top and bottom borders	Element: td > style > padding-top Increase or decrease the padding-top value to change the space between the top border and the text. Example: td style="padding-top: 8px; ..." Element: td > style > padding-bottom Increase or decrease the padding-bottom value to change the space between the text and the bottom border. Example: td style="padding-bottom: 8px; ..."

4. Adjust other values as needed.
5. Save the file with an .html extension and preview your changes in a browser often.
6. Preview the footer in a test email template before adding it to the email template in your account.
7. When you're ready to go live, paste the code block at the following location in the HTML email template in Admin Center (Admin Center > Channels > Email).

   

This recipe shows you how to add social media links to a custom footer.

Example:

Ingredients

• URLs to social media images to use as buttons
• links to your social media accounts

Recipe

1. Paste the following code block in an HTML or text editor:

   <table style="background-color: #d8e3fb; margin-top: 12px;" width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation">
     <tbody>
       <tr>
         <td align="center" style="padding-top: 4px; padding-bottom: 8px; margin-top: 12px; margin-bottom: 8px;">
             <p style="font-family: Verdana, Arial, sans-serif; font-size: 12px; font-weight: bold; color: #333;">support.eatwell.com</p>
             <p style="font-family: Verdana, Arial, sans-serif; font-size: 9px;">181 Fremont Street, San Francisco, CA 94105</p>
             <p style="font-family: Verdana, Arial, sans-serif; font-size: 9px;">Copyright 2024 Eatwell Inc All Rights Reserved</p>    
         </td>
       </tr>
     </tbody>
   </table>

   This is the recipe for creating a footer with contact information (Recipe: Add a footer).

2. Add your social icons to the HTML before the first paragraph tag. Example:

   <div style="padding-top: 12px; padding-bottom: 0px;">
     <a href="#"><img style="width: 30px; padding-right: 10px;" src="https://www.example.com/images/icon_facebook.png"/></a>
     <a href="#"><img style="width: 30px; padding-right: 10px;" src="https://www.example.com/images/icon_x.png"/></a>
     <a href="#"><img style="width: 30px;" src="https://www.example.com/images/icon_instagram.png"/></a>  
   </div>

3. For each social media link, change the URL for the link (href="...") and the icon image (src="...") for each social media link.
4. Make any of the following changes to customize the icons:

   Change
   Size of the icons	Element: img > style > width Make sure all the icons have the same value for width. Example: img style="width: 24px; ..."
   Spacing between the icons	Element: img > style > padding-right Change the value of the padding-right style for each social media link except the last one. Example: img style="padding-right: 8px; ..."
   Space above and below the icons	Element: div > style > padding-top Increase or decrease the padding-top value to adjust the space above the icons. Example: div style="padding-top: 8px; ..." Element: div > style > padding-bottom Increase or decrease the padding-bottom value to adjust the space below the icons. Example: div style="padding-bottom: 10px; ..."

5. Adjust other values as needed.
6. Save the file with an .html extension and preview your changes in a browser often.
7. Preview the footer in a test email template before adding it to the email template in your account.
8. When you're ready to go live, paste the code block at the following location in the HTML email template in Admin Center (Admin Center > Channels > Email).

   

This recipe shows you how to customize the email body. You'll change the typeface and size of the text, as well as the space around the email body.

The email consists of the notification message and the email conversation. In the email template, the email body is represented by the {{content}} placeholder. Zendesk replaces the placeholder with the HTML before sending out the email. Example:

Some of the HTML inserted by Zendesk contains styles that cannot be modified or overridden. For details, see Limitations to customizing the email body.

Recipe

1. Paste the {{content}} placeholder and its parent div tag in an HTML or text editor. Example:

   <div style="padding: 10px; line-height: 1.5; font-family: 'Lucida Grande',Verdana,Arial,sans-serif; font-size: 12px; color:#444444;">
     {{content}}
   </div>

2. Make any of the following changes to the styles of the parent div to customize the email body.

   Change
   Size of message text	Element: div > style > font-size Change the font-size value. Note that this change won't change the text size of the user name or the time the email was sent. Example: div style="font-size: 11px; ..."
   Text font	Element: div > style > font-family You can change the font within limits. Use web-safe fonts such as Trebuchet MS, Verdana, or Georgia. Other fonts may not be supported in all email applications. Example: div style="font-family: 'Trebuchet MS', sans-serif; ..."
   Space around the email body	Element: div > style > padding Increase or decrease the padding value to change the space around the email body. Example: div style="padding: 15px; ..." If you want to change the space on the left and right sides (say to 25px), specify two values for padding style. The first value is the padding for the top and bottom and the second value is the padding for the left and right. Example: div style="padding: 15px 25px; ..."

3. Add other inline styles or adjust other values as needed.

   Note that certain properties of the email body can't be changed. See Limitations to customizing the email body.

4. Save the file with an .html extension and preview your changes in a browser often.
5. Preview the changes in a test email template before adding it to the email template in your account.
6. When you're ready to go live, paste the code block at the following location in the HTML email template in Admin Center (Admin Center > Channels > Email).

   

You can test your changes with the test email template attached to this recipe.

Changes made directly to the email template in Admin Center go live immediately. Therefore, you should thoroughly test your changes in the test template to make sure they work as expected before adding them to the email template in your account.

To test your changes

1. Download the test email template, test_email_template.html attached below, and open it in a HTML or text editor.
2. Paste the code block for your component at the indicated location in the test email template. Example:

   <!-- Paste logo or company banner code block here -->

3. Open the test template in a browser and make the browser window narrower to emulate an email application.
4. Make adjustments to the code in the test template then refresh the browser page to see the effect of your changes.
5. Continue to make iterative changes until you're satisfied with the design.
6. When ready to go live, paste the code block for your component in the same location in the email template in Admin Center (Admin Center > Channels > Email).