Email Technical Guidelines
Supplying your own code
You may wish to code the content of your email yourself. We are happy to recieve HTML, CSS and images but these will still need to meet the same editorial guidelines. In addition, there are technical guidelines that will also need to be adhered to. If they do, we can place your code and images in directly into our template.
Using email design programs
A number of email design programs exist, such as MailChimp, DotMailer or even Microsoft Word, that allow you to design an email using drag-and-drop. We do NOT accept the code produced using these programs.
The HTML (the code behind emails) they produce contains a great deal of proprietary code that causes problems when brought into our template. In addition, pictures are usually not resized correctly as this is done when the associated service sends the email, not at the design stage.
If you supply code from one of these design programs you will still incur a design charge as we need to rewrite the code. We will advise you in advance if this is the case.
Your artwork must be supplied as an HTML coded table or <divs> 600 pixels wide. There is no height restriction.
- Use images for decoration only, and NEVER to convey critical information
- All critical information should be formatted as HTML
- Do not use background images as these are not universally supported
- Style images with <img src="#" style="display:block;" /> to maintain structure in email programs such as Google Mail.
- Use full width images where possible as these scale responsively on mobile devices
- Reduce image filesize are far as practical
- Do not use HTML to resize images
- Use tables or <div> tags to build your layout
- If using nested tables or <div>, only go two layers deep
- Only use CSS inline, as shown below
- Apply CSS directly to the cell or <div> as inherited styles do not work properly in all email programs
<table class="stretchfull" cellpadding="0" cellspacing="0" width="100%">
<td valign="top" style="font-family:Helvetica, Arial, sans-serif; font-size:14px; line-height:150%;" class="imageresizefull">
<img src="#" width="600" height="200" alt="" />
<td valign="top" style="font-family:Helvetica, Arial, sans-serif; font-size:14px; line-height:150%; padding: 30px;">
Text with <a href="#" style="color: #fc3a99; text-decoration: none; font-weight: bold;">Link</a> here.
A more detailed HTML example is available to download (Zip file).
Get in touch
Get in touch with us and we'll answer your questions or get right back to you. Simply use the contact form or call us.
We're based in beautiful Suffolk but if you need to us we can easily arrange to meet you wherever suits you best.