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 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

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, including this site here. Note, this is not a Broadgun Software website. It does have a good explanation about sending images in emails. You should always consider how your email will present to the user if the image does not show.

The methods to put an image in the body of your email using pdfMachine are:

1. Publicly available image

Make the image publicly accessible on the internet and insert a url using either the image button on the email editor or by editing the html. This can still be blocked by some webmail services.

   

2. Insert a base64 encoded image.

You can get a base64 encoded version of your image from online websites. You can then enter this into the HTML in SOURCE mode within the pdfMachine editor. How (and whether) this is received is dependent on both your send method, webmail services and the email client of the recipient. Many, including Outlook, block it. For example if your send method is Outlook the image will be replaced by a box with a cross in it. The size of the email will be increased.

3. Attach the image

Send the image as an attachment instead of putting it in the body.

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. You could also switch into Source mode in the editor and write or edit the HTML yourself. Instead, many people like to copy existing formatted text and paste it into the editor. You can do this, however you need to be careful:

  • 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.

Further information

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