This is a continuation of the previous article I had posted called Email 101 which was an introduction to what makes a good email. In this article we will be looking a step further into the code that constitutes an effective email.
HTML Structure
The first thing to remember when coding any webpage, including emails, is that valid code is the starting point. If you don’t have the W3 Validator bookmarked, or another plugin installed in your browser to do this, now is the time to know this site. With that said, there is a lot of debate about which Document Type to use today because of the support of newer features is limited to newer browsers or programs. While in previous years I would have recommended a XHTML Strict Document Type, I no longer feel that is the case. In fact, with many end users taking advantage of a mobile device or a webmail program in the web browser the best option today for programming emails is an HTML5 Document Type.
An HTML5 Document Type has a few advantages. First it allows you to simplify the code. One of the complaints of an XHTML Strict Document Type is that the code is strict and must be well-formed. While HTML5 code should be well formed, it is not as strict as the previous XHTML Document Type. Additionally, more than likely you are programming HTML5 web pages on your website so changing the default of your editor can be a hassle. It’s still more of a personal preference at this point, but I see no reason not to use it.
However, should you choose to go this route, be aware that some of the newer elements are untested and may not work in all clients. So if you want a video, it should work when the user clicks to “View this Email in a Browser” but it might not work from within their email client. Also there is currently no published support for the canvas in emails, so use it at your own risk.
Below you can see the basic HTML5 document structure.
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Untitled Document</title> </head> <body> </body> </html>
This is just like any other document. However, unlike other HTML documents, no CSS styling should be within the Head tags of this document. All styles should be written inline. This is the simplest form of an email and a blank slate to begin working with. Next we will add in the basic table structure.
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Untitled Document</title> </head> <body> <table width="600" border="0" cellspacing="0" cellpadding="0" align="center"> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> </table> </body> </html>
Here we added a table with a single column and 3 rows. This is a very good starting point for anyone coding HTML emails because as we previously learned, a good email has a clearly defined header, a body of content and a footer with some links and unsubscribe notices. In the most basic format all emails conform to this structure. This does not mean that your structure cannot be more complex. In fact, I expect that most emails become more complex than this. Also note that the align attribute, despite the fact that it is deprecated in HTML5, still exists. This is because most browsers have come to recognize that as centering a table even though by the HTML5 standard it is invalid. Without this the table would align left. And for those more familiar with HTML who may want to try the “margin:0 auto;” centering tactic, be aware that not all clients respect this at the moment.
Now that you have your base we will look at the 3 sections and treat them as individual sections. In short this means, that the table you just created is your “container”. In web design, this would have been more likely to be a div tag, but since those are not as supported as tables we use this structure. Then inside these few table cells, we can insert nested tables which will give us the structure that we need to replicate advanced HTML designs with simple tables. So if you wanted to do something simple like having a logo image on the left with social icons on the right you could do something like this:
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Untitled Document</title> </head> <body> <table width="600" border="0" cellspacing="0" cellpadding="0" align="center"> <tr> <td><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="logo.jpg" alt="Logo"></td> <td style="text-align:right;"><img src="facebook.jpg" alt="Facebook"><img src="twitter.jpg" alt="Twitter"></td> </tr> </table></td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> </table> </body> </html>
As you can see from the above example, what we have setup results in a logo image being placed on the left cell aligned to the left by default, and the Facebook and Twitter images are in the right cell, with the “text-align:right” which sets them to the right hand side. This creates spacing and separation for a professional look.
This same tactic can then be used to create some of the most common email layouts. For instance, in the main body, you can easily set the width of the columns to create a simple two-column layout with links down the right or left side. Or create a simple full width text with 3-column product display using a 2 row table with a single row with a colspan of 3 followed by a row of 3 table cells.
While it may be difficult for some experienced web users to get used to this approach, once you get the hang of it, there is not much too it. Tables are not complex and neither are emails. But then again, the message that emails portray is not one of complexity. They are only a step in the process of marketing and should be pointing prospects to a landing page or to call in or any other marketing outlet so that true marketing campaign ROI can be measured.