Designing HTML emails

When sending HTML emails you need to take into consideration the fact that your recipients may have different email clients than you do. Different email clients render HTML in different ways. The HTML email won't necessarily look the same in the recipient's email program as it looks in your email program. There are a number of different factors that cause this. For example, different email clients use different engines to render HTML, email clients add their own styles on top of yours, email clients do not universally support CSS and some email clients may not display HTML at all. Mail servers may also strip out some elements of the HTML.

Keep it simple

If you want anything but basic formatting then you need to put a bit of thought into how your email will be viewed by the recipients. The more complex HTML the more likely the message is viewed differently by the client.

  • Use tables with shim.gifs to resolve spacing issues if required. Don't have a complex nesting structure within the tables.
  • Use inline CSS and FONT tags.
  • Keep the email width to 600px or less.

Copy and pasting formatted text

The safest way to create the HTML email in pdfMachine is to either use the buttons on the editor to format or to switch into Source mode in the editor and write the HTML yourself. Instead, many people like to copy existing formatted text and paste it into the editor. Some editors insert superfluous code that will not be understood outside of that editor. eg Microsoft Word uses classes and styles that are only relevant when in Microsoft Word.

<p class=MsoNormal style='mso-layout-grid-align:none;text-autospace:none'>
Fragments of HTML copied may rely on things that are not copied accessible from the client email. For example styles that are included in style sheets. There will be no style sheeets in your email body.

How do I send images in the body of my HTML email?

There is no guaranteed method to send images in a HTML email. You cannot be sure that images in emails are displayed to the end user as part of the email body. This is true irrespective of whether they come from pdfMachine, pdfMachine merge or from another application. Email servers and clients - both yours and the recipients - can block the emails and images along the way. There is a lot of information about this available on the web. You should always consider how your email will present to the user if the image does not show.

To put an image in the body of your email using pdfMachine you must use publicly available image. You can either use the image button on the email editor or you can directly edit the html of the email.

Use the image button in the pdfMachine email body editor

Use the image button as shown

You can either use an image that is already publicly available by using the url option or you can use the upload option. if you select upload image then the image will be uploaded to the Broadgun server and available for a month. If you want the image to last longer then use the url of a publicly available image where you control the location.

   

Edit the HTML in the pdfMachine email body editor

If you are familiar with HTML then you can edit the email body HTML in Source mode within the pdfMachine email body editor. The 'change mode' button will toggle between preview and source mode.

   

Attach the image

If it is essential that the image arrives then send the image as an attachment instead of putting it in the body.

Further information

The following links are not related to Broadgun Software, but show how to create HTML emails and demonstrate how to avoid some of the pitfalls associated with HTML emails.

MailChimp Knowledge base : About HTML Email

envatotuts+ : Build an HTML Email Template from Scratch