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 code

Your artwork must be supplied as an HTML coded table or <divs> 600 pixels wide. There is no height restriction.

Images:

  • 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

HTML:

  • 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

Example code:

<table class="stretchfull" cellpadding="0" cellspacing="0" width="100%">
    <tr>
        <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>
    </tr>
    <tr>
        <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.
        </td>
    </tr>
</table>

Download example:

A more detailed HTML example is available to download (Zip file).

Click here to download

 

Email example

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.

JCA Media Ltd © 2018