Article

Creating HTML for Email

« Go Back

Information

 
Full Story

It's possible to create your own HTML email from scratch or add your own HTML to an existing template layout in the Poppulo system. Follow the tips below to make sure your HTML emails looks great, renders consistently and delivers to your recipients as intended.
 

Code like it’s 1999!

  • Writing HTML for email is very different to writing HTML for a website. Most email clients have very poor support for CSS, so instead we must use tables. Never define the width, height or position of any important element using CSS positioning; place each element: image, piece of text in it’s own table cell. Use accurate table widths and alignments to organize your content:

e.g. <table width=”100%” border=”0” cellspacing=”0” cellpadding=”0”>
<tr><td width=”20”>…</td></tr> etc.
 

  • Use inline CSS for all your styles. Linked CSS files will not work

e.g <a style=”color: #CC0000” href=”http://www.poppulo.ie” >Poppulo</a>

  • Avoid <p> tags as padding and spacing is applied differently in different email clients
     

  • Use padding on table cells for the most consistent spacing across email clients

e.g. <td style=”padding: 5px 10px;”>My Heading</td>
 

  • Use nested tables, rather than rowspan or colspan, for the best results

 

Use Images Wisely:

  • Remember that almost 50% of email recipients won't see images automatically. For this reason provide meaningful ALT text for all important images. You can also style your ALT text, which will mean an improved experience for users of certain email clients. Never use images where live text would be more appropriate.

  • Never rely on background images. There are some workarounds available but many major email clients such as Outlook 2010, Outlook.com and Lotus Notes do not support background images, so it's best to avoid them.

 

What to Avoid:

Animation

  • Flash is not supported in the email environment, so avoid any embedded SWF files.

  • Animated gifs are supported quite well apart from Outlook 2007/2010, which will only render the first frame of the animation. If there is any important information in the animation make sure it makes sense when only the first frame is viewed, or with images turned off. Otherwise use a static image. 

Video

  • Embedded video is not supported by the majority of email clients. Placing a video directly in your email may also cause deliverability issues. Instead create a thumbnail image of the video and link this to the video hosted on an external website.

Forms

  • Forms are not supported in email clients and may also cause deliverability issues. e.g. surveys, registration forms, search boxes. Instead, host the form on an external website and link from the email to the form.

JavaScript

  • Many web widgets, such as the standard Facebook “like” button, use JavaScript. While these may look great on your website, their use in an email could mean it gets automatically blocked. For this reason it is best to avoid any kind of interactive element that relies on JavaScript.


Testing

  • Testing is one of the most important steps in creating your email. If you don’t know which email clients your recipients are using it is important to test your email thoroughly on all major email clients. This will ensure all your efforts in design, HTML and CSS are viewed as intended.

  •  The email clients we recommend testing in are:

    • Outlook 2007/2010, Gmail, Outlook.com, Yahoo, Thunderbird, iPhone/iPad.

  • Many of the email clients which have poor HTML and CSS support (i.e. Outlook 2007/2010 and Lotus Notes) are widely used in professional organisations, so make sure you’re happy with how your email looks in these clients.

 

Coding HTML Drops:

A HTML Drop allows you to code your own HTML email completely from scratch and send it out through your Poppulo account. As well as the tips above there are some things to note about coding a HTML Drop:

  • Include a Doctype, HTML and Body tag in your code.

  • Make sure all links are set with absolute URLs.

  • If you’re hosting your own images ensure that they are also using absolute URLs; you can also upload your images to the Poppulo library.

  • Make sure all linked images have border=”0”.

  • You do not need to include an unsubscribe link in your HTML - one will be automatically added after your own HTML in the footer of the email.

 
Steps to create a HTML drop:
  1. Create a New Campaign

  2. Select a Flyer type

  3. Select the HTML Drop template from the Library

  4. Import your HTML

 

Note: HTML Drops are single page emails, they do not make use of our Microsite.
 

Related Articles

​​

Was this article helpful?

   

Feedback

Please tell us how we can make this article more useful.

Characters Remaining: 255

 

Contact Support

Don't see what you're looking for?
Contact our support team who will be happy to answer your query.

Contact Us