Sealtiel

Posted on Feb 2, 2023 • Originally published at codefile.blogspot.com on Feb 2, 2023

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);
    }
}