Top 5 Tips for a Better HTML Email Design

Posted on Dec 23rd, 2010 in HTML Email Blog

Designing HTML email is one of the key steps in email marketing. A good looking HTML email will bring you a higher open rate than a plain text message. But when a HTML email comes in a distorted format which makes it unpleasant or even unreadable, you can't expect a high response from your subscribers. And moreover, bad HTML code may trigger anti-spam filters which will block your message. This will definitely hurt your deliverability and sender reputation.

That's why you need to make sure that your HTML email looks well in different email clients and web-based email services. We recommend that you create email accounts on widely used email services such as AOL, Gmail, Hotmail, and Yahoo and send a test copy of your HTML email to yourself. If you encounter any problems that need your attention, you can always fix them before you email the message to the whole list.

Here are top 5 tips that will help you avoid most common mistakes while designing an HTML email:

1. Code Your HTML Email Manually

The use of HTML editors such as MS FrontPage, DreamWeaver, HomeSite and others has some down sides. These programs add an extra HTML code to the message source which may render differently in different email clients. So, code your HTML email manually, or at least clean your HTML source if you used an HTML editor tool. And don't copy-paste your email text directly from MS Word. Copy-paste it through a notepad to eliminate specific MS Office tags.

2. Avoid Background Color and Images

Don't waste your time and efforts for background images and color because they are not displayed in email clients.

3. Use <DIV> Instead of <P>

If you are still using the <P> and </P> tags to separate paragraphs in your text, replace them with <DIV> and </DIV><BR> tags. <P>…</P> tags don't always work as expected and in some email applications, in particularly in Yahoo, the paragraphs stick together when the email is received while <DIV>…</DIV><BR> always work.

Do this:

<TABLE width="430">
<TR>
    <TD>
      <DIV>Would you mind to share with me your honest opinion on<BR>'G-Lock
EasyMail'?</DIV><BR>
      <DIV>We would really appreciate it if you could answer our survey:
      </DIV><BR>
      <DIV>1. Does 'G-Lock EasyMail' work for you? How well? Please <BR>explain.
Tell me about some people you'd recommend the product.</DIV><BR>
      <DIV>2. If we remove the Sent Manager module from the program, will you
miss it? </DIV><BR>
      <DIV>3. Will you miss the Split Tester? </DIV><BR>
      <DIV>4. Will you miss the Bounced Manager?      </DIV><BR>
…
    </TD>
  </TR>
</TABLE>

Instead of this:

<TABLE width="430">
<TR>
    <TD>
      <P>Would you mind to share with me your honest opinion on<BR>'G-Lock
EasyMail'?</P>
      <P>We would really appreciate it if you could answer our survey: </P>
      <P>1. Does 'G-Lock EasyMail' work for you? How well? Please <BR>explain.
Tell me about some people you'd recommend the product.</P>
      <P>2. If we remove the Sent Manager module from the program, will you miss
it? </P>
      <P>3. Will you miss the Split Tester?</P>
      <P>4. Will you miss the Bounced Manager?</P>
…
    </TD>
</TR>
</TABLE>

Use < DIV >

Use < P >

4. Upload Images to Your Server

Instead of including images from a local disk, upload the images to your web site and link to them from your email.

Firstly, this ensures the images will be displayed correctly within the message when a recipient opens it because some email clients show the images inserted from a local disk as attachments in addition to displaying them inside the message.

Secondly, images linked from the web site contribute to a smaller message size. Some servers have filters sensitive to email size. So, if your HTML email has a big size, it may be blocked. Make sure your message is no more than 100 KB. Faster the message loads, more chances the recipient will read it.

And don't forget about the ALT tags for the images. If the email client blocks the images by default, the recipient will see the alternate text instead which can make him decide whether to load the image or not. So, be sure your alternate text tells exactly what they will see on the image.

5. Avoid CSS, Flash, Animation and Scripts

CSS is good for a web site and this is where it should stay. Don't use CSS in the HTML email because email clients don't recognize it and your message will come in a distorted format. The same thing applies to any kind of flash, animation and scripts. In addition, HTML emails containing scripts are often blocked by anti-spam filters.

If you want to send a video to your subscribers teaching them how to use a program or service or something else, place the video on your website, create a small image (screenshot) of the video with the "Play" button on it, include this screenshot into the email and link it to the web page where the video is. When a recipient hits "Play" in the email, the web page with the video will open. For an audio, just include a link to the web page with your audio file.

If you don't have enough skills in HTML, you can always request an HTML email design from us. We'll create an exclusive HTML email template for you that you will be able to use in your email campaigns. We'll test the design in most popular email clients and web services to ensure it renders peroperly.