Sending Stylish HTML Emails with Confidence: A Guide to Best Practices

I was working on a fairly straightforward personal project. One of the tasks was to write a background process to send stylish HTML emails with options in the form of "actions."  I needed to refresh my knowledge of HTML email generation best practices. Are you interested in hearing them? 

  • Utilize a responsive layout: Check to see that the email is optimized for a variety of devices and screen sizes. The email will look good on desktop, mobile, and tablet devices thanks to this.
  • Use CSS inline: External CSS stylesheets are not supported by most email clients. In order to guarantee that the email will appear correctly in each and every email client, it is best to use inline CSS styles.
  • Stay away from JavaScript: Since JavaScript isn't supported by many email clients, you should avoid including it in your email templates.
  • Check out your email: Test your emails in various email clients with an email testing tool to ensure that they are displayed correctly.
  • Make small images: Large images may cause some email clients to block images by default and increase the size of the email. As a result, keeping the images small is best.
  • For images, use alt tags: The alt tags will be displayed in their place if the images in your email are unable to be loaded for some reason. Even if the images do not load, this ensures that the email can be read.
  • Use a version in plain text: Since many email clients do not support HTML, it is best to include an email in plain text as well.
Here is some sample c# code: 

using System;
using System.Net.Mail;
using System.Text;

public class EmailService
{
    public void SendEmail(string recipient, string subject, string changes, List<string> actions)
    {
        var client = new SmtpClient();
        var message = new MailMessage();
        message.To.Add(recipient);
        message.Subject = subject;

        // Build the HTML body of the email
        var body = new StringBuilder();
        body.Append("<html><body>");
        body.Append("<table align='center' width='600' cellpadding='0' cellspacing='0' style='border-collapse: collapse;'>");
        body.Append("<tr>");
        body.Append("<td style='background-color: #0077c9; padding: 20px; text-align: center;'>");
        body.Append("<img src='https://www.example.com/logo.png' alt='Company Logo' width='100' height='100'>");
        body.Append("</td>");
        body.Append("</tr>");
        body.Append("<tr>");
        body.Append("<td style='padding: 20px;'>");
        body.Append("<h1 style='color: #0077c9;'>Changes Since Your Last Visit</h1>");
        body.Append("<p>");
        body.Append(changes);
        body.Append("</p>");
        body.Append("<ul>");
        foreach (var action in actions)
        {
            body.Append("<li><a href='#'>" + action + "</a></li>");
        }
        body.Append("</ul>");
        body.Append("</td>");
        body.Append("</tr>");
        body.Append("<tr>");
        body.Append("<td style='background-color: #0077c9; color: #fff; padding: 10px; text-align: center;'>");
        body.Append("Copyright © 2021 Example Company");
        body.Append("</td>");
        body.Append("</tr>");
        body.Append("</table>");
        body.Append("</body></html>");

        message.IsBodyHtml = true;
        message.Body = body.ToString();

        // Send the email
        client.Send(message);
    }
}

Comments

Post a Comment

Popular posts from this blog

Resharper 4.5

Finally, after being away for a couple days, I was able to upgrade to Resharper 4.5. After using Resharper for a couple years I'm so used to Resharper that it would be hard to use Visual Studio without it. The new version has been improved. I noticed right away that the solutions are loading faster and Visual Studio is more responsive. All licenses purchased after Dec 21, 2007 qualify for a free upgrade to ver. 4.5 If you haven't used Resharper I recommend to give it a try. ( http://www.jetbrains.com/resharper/download/ )
Read more

Fix bugs, then write new code

I have found this to be a good practice after finishing an Iteration. The code is fresh in your mind and you can fix the bugs faster than if you wait until a couple weeks later. Fixing those bugs should be included in your iteration planning. Back in 2000 Joel Spolsky wrote his well known 12 Steps to Better Code article and he makes some interesting comments regarding having your code ready to ship at all time. ( http://www.joelonsoftware.com/articles/fog0000000043.html )
Read more

Flag Arguments

Passing a boolean as an argument into a method is not good practice. It complicates the method signature, indicating that this method does more than one thing. It does one thing if the flag is true and another if the flag is false! A method or function should do one thing and do it well. In order to avoid passing flag arguments you should split the method or function into two, using a very descriptive name for each of the methods. Try refactoring the code in your current project and see if this small change improves the readibility.
Read more