Mike Parry May 24, 2021 It can be daunting writing HTML from scratch especially if you haven’t written any HTML email code before. As someone who has code email for over 15 years I promise you it is not as hard as it looks and everyone had a day one someday. Being able to read, write and understand HTML is a fantastic first step into understanding the internet and is a valuable life skill even outside of the email marketing environment.
In this post I will guide you through the first simple steps of hand-coding your first email. Before we even get started it is worth pointing out that email code is quite different from ‘modern’ HTML you might find on the web, and without boring you will a long history lesson you just need to know that there are roughly about 15 000 different type of email clients and so the way email is coded is to try and wrestle some control over such an incredibly vast rendering landscape.
Setting the width of your email
It is industry standard practice to set widths of emails between 600-700px wide. This is mainly because this is the sweet spot of most desktop email client preview panes. In other words this is the ideal width for an email to display without is needing any responsive CSS to allow for it to change widths dynamically. Creating responsive email is beyond the scope of this post but will be discussed in a future post.
<table cellpadding="0" cellspacing="0" border="0" width="600" role="presentation" style="width:600px;"> <tr> <td/td> </tr> </table> Email clients are not reliable when it comes to displaying containers with set widths but the most reliable method is to set a width using HTML and CSS on a table. Note it is not common to use div tags in email coding.
Cellpadding, cellspacing, and border are also all set to zero this acts more like a CSS reset in most clients and creates a blank canvas for the developer to place content in. Creating white space and padding can be achieved using more reliable methods.
Nesting content
Nesting tables within other tables is one of the core concepts of email development. It is used to create layout as well padding. It is important to be able to break up your email designs into tabular layouts. More complex designs are only made possible with tables nested within other tables.
Colour and center content
A few email clients will completely ignore the colour set on a body tag as well as any layout instructions so it is common practice to place a holding table in the body of html with creates the email background colour as well as centering the email content within.
<body style="background-"> <table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff" style="width: 100%; background: #ffffff"> <tr> <td> <!-- Emailcontent --> <!-- Emailcontent --> </td> </tr> </table> </body> </html> CSS should be inline
Email clients on average do not support externally linked CSS files and a few of the main email clients like Gmail strip out CSS embedded within the head tag of the html document. It is common practice to write as much of the CSS for an email inline.
So for example HTML and CSS on the web would normally be written like this
.intro a { font-family: HelveticaNeue-Light, Helvetica, Arial, sans-serif; font-size: 12px; line-height: 18px; color:#0e0e0e; text-decoration: none; font-weight:300; } <div class="intro"a href="" class="intro"/a/div> In email would written like inline like this
<a href="" style="font-family: HelveticaNeue-Light, Helvetica, Arial, sans-serif; font-size: 12px; line-height: 18px; text-decoration: none; font-weight:300">Buy Now</a> At this point it is worth mentioning HTML can quickly be littered with masses of messy repetitive html and css. Code created in online email building tools or WYSIWYG editors are also some of the worst culprits. Coding using these tools can add huge amounts of useless repetitive code. Hand written code is nearly always much more concise and less repetitive.
When you start coding find pieces of code you find you use over and over again and make a macro of this piece of code so you can reliably and quickly reuse it when necessary. This will hopefully keep the email code neat and as clean as possible.
Spacing out content
Unfortunately this topic is one of the more complex topics in email and even for the web. Default html cellspacing and cellpadding are unreliable and should be avoided. CSS margin and padding are bizarrely fairly reliable for controlling space horizontally but are slightly less reliable for controlling space vertically. While CSS can and should be used in responsive email this post will focus just on creating some space simple using html and some inline CSS.
To create some vertical space an empty table cell with a set height as well as an invisible character set to the same font-size is a very reliable method for creating vertical space.
<tr> <td height="20" style="font-size: 20px; line-height: 20px; mso-line-height-rule: exactly;"> </td> </tr> This would create 20px of vertical space the mso-line-height-rule: exactly; code makes sure Outlook clients adhere to what has been specified.
Creating horizontal space is slightly more complicated and it is at this point when nested tables are usually used. For example if I had a 600px wide email but wanted 20px of padding on the left and right margin I would then add the content into a smaller table that would sit inside the 600px width table. So 600px -20px of the left and -20px for the right would mean I would add a 560px wide table inside a table cell.
<table cellpadding="0" cellspacing="0" border="0" width="600" role="presentation" style="width:600px;"> <tr> <td align="center"> <table cellpadding="0" cellspacing="0" border="0" width="560" role="presentation" style="width:560px;"> <tr> <td align="left"> </td> </tr> </table> </td> </tr> </table> Adding images
Images are not always enabled in email clients and by some recent estimates it could be as much as 40% of email clients do not allow images to display by default. For this reason it is important to remember not to rely on images for creating a layout and ideally the email would still function perfectly well with images turned off. It is important to always have a good balance of images and text. While you might often come across emails that are made entirely of images this is bad practice and should be avoided. Image only emails are less accessible and don’t convey any content messaging if images are disabled.
Be sure to use descriptive alt attributes on all image tags. Not only does this help with the accessibility of the email but will also display in some email clients when images aren’t displayed.
Wrapping up
The last and important point to remember is an email needs to include all the legal and email specific parts that make it an email before it can be sent. Subject line, pre-header, Unsubscribe, Company Address are all important and sometimes legal requirements. I have blogged previously about the bare minimum you need to get an email sent.
What’s next
In a future blog post I’ll discuss making emails responsive and why outsourcing email development can be so important for a business.
Digital & Social Articles on Business 2 Community
(68)
