How to Use Website Design in HTML Emails

Most designers now use HTML email for marketing, and it continues to grow. Email is not a web page, nor should every email be HTML.

That said, however, since HTML email is here to stay, it should be done well, and look professional.  Your HTML emails should be easy to read and easier to act on.  

Just a couple of quick “must-do’  reminders for your emails, whether HTML or text: All commercial emails should be permission based, and should have a quick and reliable way for subscribers to get off your list. 

The biggest advantage of using HTML for emails is the ability to format copy.  Here are a few Web site design elements  to follow  in creating HTML emails. 

Whether you’re using a template or writing your own code, use a web design application like Frontpage or Dreamweaver, or a similar program.  The newer programs tend to be more complex, so if you’re familiar with the 2003 version of Frontpage, you’ll probably find you have a winner, and can craft an email campaign very effectively.

  • Use a full URL.  When you’re designing your email in HTML, use a full URL, such as: “http:// www.mysite.com/ emailblast/images/myphoto.jpg.”     This will allow the graphic or hyperlink to work when delivered regardless of the server. If you do this instead of embedding images directly into your HTML email, the recipient’s email program won’t strip the embedded image or improperly display your entire email. 
  • Use a white background. If you have table cells in your HTML email, use a white background.  If you choose a colored background, you may either conflict with the font color, or run into problems with the email being properly displayed.
  • Use clear coding. State the colors, font styles, and font sizes in your HTML coding.  This will keep other Web based email programs from applying their own style sheets, and distorting your email upon delivery. 
  • Use common type of type. The most commonly used  type for email marketing is Serif, or Sans-serif. Some copywriters, especially in newsletters, will use a combination of the two for contrast and readability.
  •   Use readable size of type: The size of type most commonly used for body text is 12-14 point, although it’s not uncommon to see up to 120 point type for bold headlines.  Remember, your headline is to seize the reader’s attention.  Larger, bolder headlines stand out, and therefore seize attention better and more quickly.
  • Use color. Color, used judiciously, can add big impact…to both headlines and attention-grabbing copy.  Strong colors grab attention better than weak colors.  Too much color, however, is overpowering.   
  • Use hyper-links. If you want forms in your email, use hyper-links to website forms.  Rather than embedding forms in your HTML email, direct your email recipients to a form on your Web server.  Not only will the form show up correctly this way, it also provides you with a way to track the email response through the hyperlinks.  A non-supported or non-responsive form can significantly detract from, or just plain stop a prospect from taking action.

There is a time and place for illustrations in your emails.  Illustrations are used to:

  1. Present the product or service in a way that builds its perceived value.
  2. Emphasize the important points…before/after photos, how this works…
  3. Establish credibility…with charts, tables, graphs, client photographs.
  4. Create an attention point.

Design elements are different in email than they are on your website.   However, you want to create an extension of the web site’s branding into your email.  This helps subscribers make the connection in their minds between the email and the company sending it. 

You want your subscribers to recognize you.  Easily and quickly. Seeing design elements common to both your website and your email shorten the brain connection time.

Use good design…every time.  Write content that connects…your subscribers with the message.  Put them together…and “Wallla”… magical moments.

One thought on “How to Use Website Design in HTML Emails

  1. Check out iThemes. It’s my platform and I love it. They have great templates and an awesome Team to help if you need it.

Leave a Reply

Your email address will not be published. Required fields are marked *