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.
e.g <a style=”color: #CC0000” href=”http://www.poppulo.ie” >Poppulo</a>
e.g. <td style=”padding: 5px 10px;”>My Heading</td>
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
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.
How to use HTML Drop
Note: HTML Drops are single page emails, they do not make use of our Microsite.
Related Articles
