HTML Email an Introduction

HTML Email an Introduction

So, lately at work I have been charged with creating HTML email campaigns to market the trade shows to exhibitors.  Having a good understanding of HTML and CSS has enabled me to succeed in managing several campaigns.  When I started crafting the emails, I did not understand the process of an HTML based email as I had never done that before.

There are a few things to keep in mind when crafting these emails.

  1. Size of message, not file size but width.
  2. Code both HTML and CSS
  3. Images
  4. Devices used to open the email

Size of Message

You need to keep in mind when crafting the HTML email the size of screen most email programs have for the preview.  This issue is really important as you really do not want people to have to scroll, either horizontally or vertically, more than is needed.  Typically, you should keep your HTML between 650px and 850px for the width, the ultimate size is 650px.  With 650px you can manaage to get your message in most preview screens.

Code – HTML and CSS

When crafting the email, you still need to use proper W3C compliant HTML and CSS.  The big difference is the CSS.  With an HTML email, you can’t use external style sheets because many of the modern email programs block external style sheets.  Instead, you have to put the code inline.  This means you need to style your headers, paragraphs, bullets etc. as you go when crafting the message.


Have you ever gotten an email where the message is a red x in the window?  So have I!  This is very annoying and if you are like me you simply hit “Delete”.  To solve this issue, keep images to a minimum when crafting HTML emails.  The reality is, for the banner of the email you should use a smaller image, say 320px in width.  Then create the rest of the header using CSS.  This achieves two things, first if images are blocked most of the header is still visible to the reader.  Second, if crafted appropriately, your email is more mobile friendly.

Devices Used to Open Mail

If you are using HTML chances are you have an email service.  If you are using one of these services, make sure they give you reports that show the UA String at a minimum.  If you are really lucky, the service will show you the type of device in a separate report.  If you are using the string it is a bit more work to get the information but if you can export the report into Excel, or other spreadsheet, you can do a simple find and replace to highlight different devices.  In a later post I will show you how to read a string and a good free service to use.  Furthermore, I will discuss how to craft an email for mobile devices.