HTML for Email guidelines

There are a few HTML ground rules, that need to be followed. This should be considered for: 

• HTML you upload into the HTML Upload and Dynamic HTML Upload creation methods, and

• the HTML pasted into the HTML Editor.

1. There must be no reference to external scripts or CSS files at all. 

2. External fonts are only permitted from Google fonts, and must be imported using the @import url method within the style tags, e.g. 

<style type="text/css"> 

@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap'); 

</style> 

It is essential that no fonts are attempted to be imported using the link href method, in the HTML document's head. 

3. Avoid importing any HTML created using a third party full Email Service Provider. We cannot support the upload of HTML documents created using such tools. You can, however, opt to use a robust, dedicated HTML email creation solution such as Stripo. However, should you opt to use custom fonts, please do bear in mind checking if you need to make adjustments to accommodate for point 2. and specifically for Stripo, please take extra care to check your email design in mobile view, as theirs also works differently to most solutions. 

4. Although not essential, don't forget to apply *companyinfo* and *unsubscribe* nearer the end of your document, in an appropriate way, to help pull through these essential sections, in a formatted, rather than unformatted, way. *companyinfo* pulls in the centrally-stored company information on your account, such as company number and address, whereas *unsubscribe* pulls in the centrally stored unsubscribe line on your account. These are legally required and will be forced in unformatted into your message, if not supplied in the HTML code. 

5. Ensure the HTML is properly nested and correctly structure, with an opening HTML tag head section, a body section (using both opening and closing body tags) and a closing HTML tag. 

Creating a HTML Upload design

1. Initial email settings:
Always ensure these are applicable to the message. You can return to edit these settings after you have finished creating your message.

Subject line:
Avoid, "Save £££" and "Amazing Money Saving Deals!!!" for example as these are likely to be filtered out by corporate spam blockers. Other words to avoid include CAPITALISED words, words regularly associated with medicine or those related to making money.

Use contents of HTML title tag
Select this to instruct e-shot to take the <title> tag from the HTML page and use as the subject line for a message.

Identity:
Set up identities, each containing 'from name', 'from address' and 'reply-address', in the Settings page so you only need to select one ID from the drop-down.

Monitored links (HTML)

To offer you more control over how links and images are handled by e-shot, we’ve introduce attributes that you can define within your HTML code. These allow you to customise elements such as friendly names, link validation, and image hosting.

Link Attributes:
eshot-friendly-name="XYZ" – This attribute is used to automatically specify a friendly name against a link within your email.

eshot-monitored="false" – This attribute is used to declare whether a link should be monitored by default.

eshot-validate="false" – This attribute is used to declare whether a link should not be passed through e-shot’s validation service by default.

Example use:
<a href="http://www.e-shot.net" eshot-friendly-name="Homepage" eshot-monitored="false">Hyperlinked Text</a>

Image Attributes:
eshot-externally-hosted – e-shot will automatically download any images referenced on your HTML where it can. Alternatively, you can use the eshot-externally-hosted attribute to force e-shot to use the path you have already specified.

Example use:
<img src="http://www.e-shot.net/logo.jpg" eshot-externally-hosted="true" >

HTML for email is not the same as HTML for websites!

While website technology enjoys plenty of multimedia and stylesheet support, emails are less flexible and require attention to detail and thorough testing to ensure good performance across various email applications such as Outlook web, Outlook app, Gmail etc.

The easiest way to build a bulletproof email, use our Smart Editor which compiles all the necessary code for you but if you intend to write your own HTML, we would encourage spending time to understand some of the principles involved. There are ample excellent resources available online which include checklists, pre-built templates (which require only editing of text to apply to your organisation) and detailed guidance on specific display issues.

Example resources we like:

New to email coding?
https://explore.reallygoodemails.com/new-to-email-coding-heres-where-to-start-2494422f0bd4

General Getting started with HTML email
https://www.smashingmagazine.com/2021/04/complete-guide-html-email-templates-tools/