Welcome to Benchmark!

HTML Email Tips for Web Designers

Feb 25 2009, 08:10 AM

Note: This article is valid only for people using their own custom HTML. If you use our pre-designed email templates you don't have to worry about this.

An HTML email communication might look good on your computer but fail completely on the contact's because it depends on graphics, fonts, and CSS files which only reside on your system. When you are creating your email in outside HTML editors like Microsoft Publisher, Dreamweaver, or FrontPage, remember that you are designing for email and not a website. If you design the email as if it were a web page, it may not display correctly in your contacts' different email and web mail clients.

  • Do not reference external CSS files.
    Most email clients (Gmail, Yahoo, .Mac, AOL Web, etc) wont reference these external files, because it interferes with their own CSS coding. Use in-line CSS if you have to use CSS at all, and make sure you test your email in the top email clients so you can check for mistakes and inconsistencies.

    i) Reference to external CSS file will not work
    <link href="css1.css" rel="stylesheet" type="text/css">


    ii) Putting css style in the head of the email and calling the it in the body will not work
    <style>
    .main{font-size:16px;}
    .subhead{font-size:14px; font-weight:bold; color:#cc0000;}
    </style>
    <span class="subhead">Newsletter Article</span>

    Use Inline Stylesheet:
    <span style="font-size:14px; font-weight:bold; color:#cc0000;">Newsletter Article</span>

  • Do not use one large image that takes up your whole email.
    Most email programs will block images by default, so all your recipients will see a blank screen when you send it.

  • Make sure your email is not too wide.
    The idea is to design an email that will fit in the viewing area of most email clients. A width of 650 pixels is ideal and would fit in most email client windows. If you have any doubts about this, set up a few free accounts with Yahoo!, Gmail and the like, and send your email to see how it shows up.

  • Remove junk code from your HTML.
    If you have used Microsoft Front Page, Microsoft Word, or Microsoft Publisher to design your email, please note that your template will include all sorts of junk code that can break up your layout and cause problems. At worst, sloppy code can get your email filtered into the spam file. Make certain you clean up unwanted/empty tags, unnecessary attributes, comments and other junk code before you you upload your email. The following are some examples:
    <v:shape>
    <o:column>
    <b:Xl>
    ![endif]


  • Flash, JavaScript, ActiveX, embedded movies and sound files do not work in an HTML email.
    Even though those things may make your email cooler, anti-virus software will block all those things. Save the movies, sound files and more for your landing pages and link to them from your email.

  • Make sure all links to images are complete, Web-based URLs.
    In many cases where this has become a problem, we've found that clients have linked to images on their hard drive rather than on a Web page.

    Relative URL (will not work): <p><a href="lastpage.htm">This text</a> is a link to a local page, either on your computer or within the same website.</p>

    Full URL (will work): <p><a href="http://www.microsoft.com/">This text</a> is a link to a live webpage on the World Wide Web.</p>

  • Test your emails in at least three or four email clients like Yahoo!, Gmail, AOL and Hotmail, just so you can check your layout and see any mistakes. You should send a test email to all the free email accounts you've created and check your layout to make sure the images show up, your links work, your colors look like you want them to and more.

Posted in Tips & Resources, Email Design & Templates

Related Blogs