Email Notifications: HTML Email Template

  • 14 January 2022
  • 14 replies
  • 1250 views

Userlevel 7
Badge +5

In working with email notifications the last couple days, I finally came up with a custom look for them that, so far, *fingers crossed*, seems to work as expected with Microsoft Outlook. 

The key was in building all of the customized look using tables and inline CSS. Outlook is pretty fussy about what it will decide to display. Although I didn’t find much in the community on this topic - I figured I couldn’t be the only one running into issues formatting the emails so I thought others might benefit from a template to get started.

I chose to make one for posting a new comment as it was quick and easy to trigger new emails.
Now I can copy this over to other notifications and just change out the message and shortcodes.

All you really need to do is make appropriate adjustments for your own color scheme, logo, and shortcodes. I recommend doing this in your favorite editor and then pasting it into the HTML editor provided by Docebo as you will lose formatting and readability when you save out.

Here is a shot of the final test email in Outlook. I covered some particulars in the footer. The code is below - I changed a few items there as well. Feel free to use this - I commented it heavily to provide guidance.

Hopefully this is helpful to someone. Feel free to ask questions about it.

 

 

<!-- Table-based template for email notifications. -->
<!-- This is a 3-column and 5-row table to offer some space around the body. -->
<!-- Border options are a must if you want to render well in MS Outlook. -->
<table style="width: 100%; border-spacing: 0px; border: 0px; border-collapse: collapse;">

<!-- Top Row -->
<!-- Adjust the height to fit your logo -->
<tr id="logo" style="height: 150px;">

<!-- Row 1 Column 1 -->
<!-- Adjust background color as desired for your branding -->
<td style="width: 15%; background-color: black; border: 0px; border-collapse: collapse;"></td>
<!-- Row 1 Column 2 -->
<!-- Adjust the source URL for your logo location and color as needed -->
<td style="width: 70%; background-color: black; text-align: center; border: 0px; border-collapse: collapse;">
<img src="https://path/to/your/logo/logo.png" alt="" />
</td>
<!-- Row 1 Column 3 -->
<!-- Adjust background color as desired -->
<td style="width: 15%; background-color: black; border: 0px; border-collapse: collapse;"></td>
</tr>

<!-- Second Row -->
<!-- Message Header. -->
<tr id="contentHeader">
<!-- Row 2 Column 1 -->
<!-- Adjust background color as desired -->
<td style="width: 15%; background-color: black; border: 0px; border-collapse: collapse;"></td>
<!-- Row 2 Column 2 -->
<!-- Adjust background color as desired -->
<!-- Swap out text as your company desires -->
<td style="width: 70%; background-color: white; padding-top: 10px; padding-left: 10px; padding-right: 10px; border: 0px; border-collapse: collapse;">
<h3 style="text-align: center; color: black;">Learning Portal Notification</h3>
<h4>Congratulations!</h4>
<hr style="width: 70%; text-align: center;">
<br />
<!-- Row 2 Column 3 -->
<!-- Adjust background color as desired -->
<td style="width: 15%; background-color: black; border: 0px; border-collapse: collapse;"></td>
</tr>

<!-- Third Row -->
<!-- Main body. -->
<tr id="content">
<!-- Row 3 Column 1 -->
<!-- Adjust background color as desired -->
<td style="width: 15%; background-color: lightgrey; border: 0px; border-collapse: collapse;"></td>
<!-- Row 3 Column 2 -->
<!-- Swap out your own message, shortcodes, and closing-->
<!-- Adjust background color as desired -->
<td style="width: 70%; background-color: white; padding: 10px; border: 0px; border-collapse: collapse;">
<p>If you are receiving this email - it is because you have been selected to help me verify that notifications are working and that the customization of the message looks the way it was intended.</p>
<p>A new comment has been posted in a forum!</p>
<p><strong>Course Name:</strong><br />
[course_name]
</p>
<p><strong>Forum Name:</strong><br />
[forum_name]
</p>
<p><strong>Comment:</strong><br />
[comment]
</p>
<p>Thank you,<br />
The Learning Team
</p>
<br />
</td>
<!-- Row 3 Column 3 -->
<!-- Adjust background color as desired -->
<td style="width: 15%; background-color: lightgrey; border: 0px; border-collapse: collapse;"></td>
</tr>

<!-- Fourth Row -->
<tr id="footer">
<!-- Row 4 Column 1 -->
<td style="width: 15%; background-color: lightgrey; border: 0px; border-collapse: collapse;"></td>
<!-- Row 4 Column 2 -->
<!-- Adjust background color, text color, and text size as desired -->
<!-- Swap out your own contact information -->
<td style="width: 70%; padding: 10px; background-color: #5f6369; border: 0px; border-collapse: collapse;">
<p style="text-align: center; color: white; font-size: 10pt;">
Your Company Name<br />
A Super Company<br />
555 Main St, Your City, State 55555
</p>
<p style="text-align: center; color: white; font-size: 10pt;">
+1 555-123-4567<br />
Your email address here
</p>
</td>
<!-- Row 4 Column 3 -->
<!-- Adjust background color as desired -->
<td style="width: 15%; background-color: lightgrey; border: 0px; border-collapse: collapse;"></td>
</tr>

<!-- Fifth Row -->
<tr id="endTable">
<!-- Row 5 Column 1 -->
<!-- Adjust background color as desired -->
<td style="width: 15%; background-color: lightgrey; border: 0px; border-collapse: collapse;"></td>
<!-- Row 5 Column 2 -->
<!-- Adjust background color as desired -->
<td style="width: 70%; background-color: lightgrey; border: 0px; border-collapse: collapse;"></td>
<!-- Row 5 Column 3 -->
<!-- Adjust background color as desired -->
<td style="width: 15%; background-color: lightgrey; border: 0px; border-collapse: collapse;"></td>
</tr>
</table>

 


14 replies

Userlevel 7
Badge +1

That’s a very nice and clean template. Good stuff.

Regarding email rendering in various clients, in our tests we had discovered that Outlook on Windows was the worst to assure expected look and feel, everything else we tested was more predictable and consistent, including Outlook on Mac as well as Outlook web.

Userlevel 7
Badge +5

That’s a very nice and clean template. Good stuff.

Regarding email rendering in various clients, in our tests we had discovered that Outlook on Windows was the worst to assure expected look and feel, everything else we tested was more predictable and consistent, including Outlook on Mac as well as Outlook web.

 

Thank you - 

Yeah - I learned quickly that Outlook is the big hurdle. My first attempt with standard div tags looked fine on mobile but looked like garbage in Outlook on the desktop. The advice - I decided to implement - was to make everything in table format.

Userlevel 3

@Winnie Cairney - Perhaps this could help with a notification template?

Userlevel 4
Badge

Thank you for sharing! I know from experience that getting the emails to look decent in Outlook for Windows is a huge challenge. And your code looks so much neater than our current solution. 

Userlevel 6
Badge +1

Looks good.  We have something similar but annoyingly Outlook blocks the logo unless the users mark the email as safe.  

Userlevel 7
Badge +5

Thank you for sharing! I know from experience that getting the emails to look decent in Outlook for Windows is a huge challenge. And your code looks so much neater than our current solution. 

Thank you. Simple and consistent is what we were trying to achieve.

Userlevel 7
Badge +5

Looks good.  We have something similar but annoyingly Outlook blocks the logo unless the users mark the email as safe.  

Yeah - we still deal with that from emails we get from other platforms and business emails from other companies. Haven’t conquered that one yet.

… If I had a nickel for each time I did  right click → Download Pictures...

Userlevel 7
Badge +5

Looks good.  We have something similar but annoyingly Outlook blocks the logo unless the users mark the email as safe.  

Yeah - we still deal with that from emails we get from other platforms and business emails from other companies. Haven’t conquered that one yet.

… If I had a nickel for each time I did  right click → Download Pictures...

:joy:@gstager If we all got nickels for each time we had to do that, there would be no more nickels left in circulation.

Userlevel 7
Badge +3

Theres a couple of great free “email builder’s” out there that help handle the construction for across device types and programs. I always joke, when it comes to designing HTML emails, just channel all the best practices of the early 90’s, all the tables and local styles you can handle! 

Userlevel 3

Thanks for this - very useful!

I agree with others that when Outlook receives the notification it changes it a bit :-(

In Docebo the copy and text looks good (like Arial), but when it gets to Outlook it appears in what seems to be Times New Roman (I think this is the default HTML font?!?).

When I view the same email on my iPhone it looks like Arial too!

Is there anyway to put a default font in the HTML code so that it defaults to Arial?  Sorry if this is obvious - I’m a complete HTML novice here :-)

Thanks!

Userlevel 7
Badge +5

@Sean 

Sure - Just add the font-family to the style part of the cell elements you want to change.

For example…

Consider Row 3 Column 2 in the code shared earlier in the thread.

In the  <td>  tag we do some styling. Adding the font-family as shown should format the contents of that cell. Repeat for other cells you wish to change.

This will only work on machines that have the specified font installed on the system - otherwise it will default to something else like Times New Roman.

It may be good to include a couple backup options for cases where a user doesn’t have that one.

font-family: Arial, Helvetica, sans-serif;

 

Hopefully that helps.

Userlevel 7
Badge +3

Looks good.  We have something similar but annoyingly Outlook blocks the logo unless the users mark the email as safe.  

Yeah - we still deal with that from emails we get from other platforms and business emails from other companies. Haven’t conquered that one yet.

… If I had a nickel for each time I did  right click → Download Pictures...

The security team is saying “but if I had a nickel for every time someone loaded a virus to their system from a an email image….”

Userlevel 7
Badge +5

The security team is saying “but if I had a nickel for every time someone loaded a virus to their system from a an email image….”

LOL - Those are the emails you’re not supposed to open in the first place.

 

Userlevel 3

@gstager WOW!  Thanks so much for a quick response on that - can’t wait to try it tomorrow.  Really appreciate your help!

Reply