Automated emails have come a long way in the past couple of years. What used to be a text-only email, today contains various forms, dynamic links, and images, depending each company on their design.
Today, receiving formatted well designed stylish HTML emails has become a standard to most companies, which is why adopting this principle over regular text-only emails has become a must.
Developing HTML templates doesn’t require a lot of coding skills, however knowing how to code the template to appear correctly on all devices and old email clients is the real challenge.
In this blog post, I will go through a step by step guide on how to build a cross-platform-compatible dynamic email template via HTML, CSS, and PHP.
Basic guidelines
As described above, the biggest challenge with developing an HTML email template is making sure it’s cross-platform compatible. There are so many email clients such as Google Mail, Apple Mail, Outlook, AOL, Thunderbird, Yahoo!, Hotmail, Lotus Notes and etc. Some of these clients and others are light years behind the eight-ball in terms of CSS support, which means we must resort to using HTML tables to control the design layout if we really want the email template to display consistently for every user.
In fact, using HTML tables is the best way to achieve a layout that will render consistently across different email clients. Think of the template as being constructed of tables within tables within tables…
Secondly, we must use inline CSS to control elements within your emails, such as background colors and fonts. CSS style declarations should be very basic, without the use of any CSS files.
To emphasize the HTML tables rule above, see the example below, where I’ve modified the border attribute of each table to be visible. Please note that the %s is a placeholder where dynamic text and images will be filled as I’ll see soon describe (Scroll to the end to see the final email template):
As you can see above, the whole layout is built by HTML tables. We’ll be using PHP libraries to parse the %s placeholder and fill it with the dynamic text before an email is sent to the user.
Developing the static template
So let’s start programming!
Before we begin the template itself, you’ll need to begin your HTML file with an XHTML document:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Demystifying Email Design</title><meta name="viewport" content="width=device-width, initial-scale=1.0"/></head></html>
I recommend defining all tables with border=”1" as seen above since it’s easier to spot errors and see the skeleton of the layout as you go along. At first, let’s create the basic layout:
<body style="margin: 0; padding: 0;"><table border="1" cellpadding="0" cellspacing="0" width="100%"><tr><td>My first email template!</td></tr></table></body>
Set your cellpadding and cellspacing to zero to avoid any unexpected space in the table. Also set the width to 100% since this table acts as a true body tag for our email, because styling of the body tag isn’t fully supported.
Now we’ll add instead of the text ‘My first email template!’ another table which will present the actual email template display:
<table align="center" border="1" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse;"><tr><td>This is the email template body</td></tr></table>
As you can see, the width is set to 600 pixels. 600 pixels is a safe maximum width for your emails to display correctly on most email clients. In addition, set the border-collapse property to collapse in order to make sure there are no unwanted spaces between the tables and borders.
In the example above, you can see that our email template consists of five sections (rows) which is why we’ll create these rows and then add tables accordingly to each in order to complete the template.
<table align="center" border="1" cellpadding="0" cellspacing="0" width="600"><tr><td>Row 1</td></tr>...<tr><td>Row 5</td></tr></table>
At each row, we’ll create a new table in which the mythology is similar to the above. We’ll also add columns accordingly and the right paddings to align all objects to reach the desired template.
Here is the final HTML template named “template.html”, which can also be found in the project Github page:
A few observations:
- Add alt attributes where needed, in order to present text instead of images in case the email client was unable to load them properly.
- Add %s placeholders where you’d like the data to appear dynamically depending on the email use case.
- If you look carefully, the percentage values appear with an extra ‘%’. This is so the PHP library used to make this dynamic, knows how to parse the text properly.
Note! I’ve removed the URLs for security and privacy issues. Feel free to replace them with your own images and personal links.
And that is it! You’ve successfully developed your own email static template. Now let’s get our hands dirty and make it dynamic!
Building a dynamic template with PHP
On the server side, create the email send method below:
function send_mail_template($to, $from, $subject, $message){$headers = "MIME-Version: 1.0" . "\r\n";$headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";$headers .= "From: ContactNameGoesHere <" . $from . ">\r\n";$response = mail($to, $subject, $message, $headers);}
Now if you look carefully back to the template.html file, you’ll see that I’ve added %s place holders in certain places. More particularly, in the image banner element, and body text.
Now all we need to do is import the above template.html file, parse it like regular text, add the relevant text in place of the ‘%s’ and use the above send_mail_template method.
function build_email_template($email_subject_image, $message){// Get email template as string$email_template_string = file_get_contents('template.html', true);// Fill email template with message and relevant banner image$email_template = sprintf($email_template_string,'URL_to_Banner_Images/banner_' . $email_subject_image. '.png', $message, $mobile_plugin_string);return $email_template;}
After we’ve got that taken care of, we can use both methods and send our very first dynamic email!
Let’s use an example. Say a new user has just verified his email. We’d like to automate that use case on the server side and send the user a ‘Your email has been successfully verified’ email.
Assume we have the users verified email ‘[email protected]’ and the company’s email is ‘[email protected]’.
We can now send an automated email:
$from = "[email protected]";$to = "[email protected]";$body_text = "Your email has been successfully verified...";$banner_image_subject = "account_verified";$final_message = build_email_template($banner_image_subject, $body_text);send_email($to, $from, "You email has been verified", $final_message);
Finally! You can now use this methodology any way needed. After sending this example, while applying the GreenIQ’s company images and text, this is the final email template sent to the user:
Simple right?
Check out CodingStartups for more insightful posts for technological entrepreneurs and data hackers.
If you’ve enjoyed this piece, go ahead, give it a clap 👏🏻! You can also share it somewhere online so others can read it too.