html email

Posted on 2012-08-24
Last Modified: 2012-08-28
I'm creating an HTML email to send out to clients.  Basic layout no funny animation stuff just text and pics.

2 questions:

a)I read that tables are a better way to do the layout for html mail because email apps etc may not render divs/css properly. Should I use tables (I prefer to use divs)?

b)Can/should I use HTML 5 or 4 and CSS 2.x or 3?

Question by:tf2012
    LVL 58

    Assisted Solution

    Yes tables are better - div's may work but depends on the client how and if they are rendered.
    Any css should be inline - no external style sheets etc.
    LVL 16

    Expert Comment

    For Email do not use <DIV> and CSS must be in line, do not try to place your CSS in the body header as it will invariably fail to render correctly.

    Only tables will render correctly, both in the latest desktop based email progams and free web based email services (Gmail etc.)

    Additionally, background images do not generally work, while having your images sourced online and not inline will raise the chance of your mail being identified as SPAM.

    Other things to avoid is relying on percentage based widths for positioning, use specific widths and ensure your syntax is correct. It is also worth keeping your CSS styling as simple as possible.

    Finally, never use the <tbody> element - this will be an absolute red flag for SPAM filters.

    In respect to which version of HTML - avoid anything other than the simplest of HTML formatting (no HTML 5) and make sure you convert all special characters and entities in your text.
    LVL 1

    Author Comment


    "Additionally, background images do not generally work, while having your images sourced online and not inline will raise the chance of your mail being identified as SPAM."

    it sounds like using css background-image is a no-no, and sourcing the images from a server is a spam flag.  So how should I include images in the email?  How is this generally accomplished?

    LVL 16

    Accepted Solution

    Background images do not "generally" work out, background colours can be used.

    You can use "server side" images in the text, but you need to check the ratio of text to image.

    Meaning, as the ratio of text to image decreases the chances your message will be identified as spam increases.

    Most "professional" level anti spam filter techniques now take the actual size on the image in to consideration, so that if you have a message that has for example 5 paragraphs of text (which is quite a lot of text) but you have a server side image that is 500 pixels wide by 960 pixels high, you would still get a high spam probability.

    However, if the image was 500px by 300px then the probability decreases!

    Sometimes the images are sent as inline attachments, but the increased bandwidth resulting from this does not guarantee your message will get "through". Again the rules regarding the ratio of text to image applies.

    What you need to avoid is the tendancy to make the entire message from images (GIF/JPG) which we often see people doing - these type of messages always end up in the junk pile.
    LVL 1

    Author Closing Comment

    great info, thanks

    Featured Post

    Free Trending Threat Insights Every Day

    Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

    Join & Write a Comment

    Suggested Solutions

    Title # Comments Views Activity
    WCAG audit tools 1 40
    Bing Maps 1 23
    How to include jquery as a global using webpack 1 39
    Powershell output to HTML 1 0
    Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo‚Ķ
    Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
    This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
    The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

    754 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    16 Experts available now in Live!

    Get 1:1 Help Now