Creating HTML Emails

The world of email design is incredibly inconsistent, with each email client having it’s own advantages & restrictions. Below is a list we’ve compiled of the most important guide lines to take into account when creating your own HTML emails.

  • Many graphical HTML editors, such as Dreamweaver, are designed for creating web pages not emails. So no matter how good the design looks within the editor itself, you’ll end up running into issues with various email clients. We recommend using a simple text editor (Notepad/Notepad++) or using our SchoolSend system with our built-in template designer.

 

  • Structurally, emails need to be written with <TABLE> tags – not <DIV> tags. Despite most web designers favoring <DIV> it’s not fully supported in all email clients, <TABLE> tags are the only reliable way to display & structure your email content.
 

  • Keep your tables to a maximum of 650 pixels in width, this helps to ensure your email is viewable in email client preview panes as well as on mobile devices.

 

  • Browser based email clients will strip <BODY>, <!DOCTYPE> and <HEAD> tags. So when it comes to styling emails external .css files and <STYLE> tags are a big no, stick to inline style attributes, and these should be written in full inside of <TR>, <TD> and <SPAN> tags i.e.

<td align="left" style="font-family: Arial, sans-serif; font-size:15px; color:#000000;">

 

  • Avoid using background images as these are sometimes ignored, so you’ll end up with a plain white background instead of one that shows off your lovely background image. However background colors are widely supported.

 

  • They say a picture is worth a thousand words, but that doesn’t mean you should forget your alt text. Many email clients prevent the automatic download of images within emails or prevent them entirely so alt text is a great way to still get your picture across.

 

  • Too large an email size or too many images can increase the chance of being flagged as spam, or even worse, prevent the email landing entirely. It’s recommended to keep image sizes small with a ratio of 80% text to 20% images to ensure a good deliverability and that your email is still understandable without images.

 

  • Embedded videos are still widely unavailable in most email clients, the best practice is to either link to a webpage containing the embedded video or avoid video entirely.

 

  • Be careful hyperlinking text with a different link as some email clients will flag the message as spam or junk, for example;

<a href="http://www.google.com"> www.google.co.uk </a>

 

For a complete list of email compatible CSS click here.

Posted in Uncategorised.