HTML email design guidelines

---

We have numorous email clients available today - that includes the pretty newest ones and those originated decades ago. And we have a wide range of webmail clients as well. We know that technology changes day by day. So the clients that were developed decades ago may not compile and display an email as good as the newest ones do. Apart from that, not all ISPs are possessing the same design/code interpretation capabilities. So it's highly important to stick to a common standard while sending an HTML email to a wide customer set in order to have the desired look and feel (and of course the functionality as well) across all email clients and devices.

So, what I'm talking about is, we have plenty of new design techniques available today, but, the email clients that the recepients use may be from decades ago and that may not compile the newest addidiotn to code and design. Emails SHOULD NOT BE designed with a website paradigm. The codes/style sheets that you use in websites may be offensive to the ISPs in email terms. Email templates require a simple and standard HTML code level.

Let's check out what all need to be considered while creating an email template -

• The code
  • ​You should stick to inline css for styling the designs. Following new design techniques will screw up your reputation and design.
  • Total size of the template should not exceed 102 kb. Else, ISPs like Gmail will clip off your message.
  • There should be a decent code to text ratio. Different ISPs posses different measures to filter out emails. To be on safer side, do not embed a lot of code (html/css) in your message.
  • Do not use javascript or any scripting stuff inside your emails. This will not be processed and you'll be blocked in ISP level. Embedding scripts inside messages is indeed an offense.
  • Avoid CSS short hands like this - 
    p { font:bold 1em/1.2em georgia,times,serif; }
    Instead, define it in a block like - 
    p {
        font-weight: bold;
        font-size: 1em;
        line-height: 1.2em;
        font-family: georgia,times,serif;
    }
  • For layout, use html tables to have a better and reliable structure. Data aligned in html tables are not disturbed while displayed in most of the clients
• Image
  • Stay away from embedded images. It will make the templates heavy and and may trigger the ISP filters. Use remote content instead.
  • Use gif and jpg only. Even though almost all image formats are properly processed by clients, some of them will not parse bmps or pngs or any other image extensions.
  • Always specify "size" within the image embed tag.
  • Always keep alternate test for images.
  • Always define a background color inside an image embed tag. See how it looks in case if the image is not loaded. Choose a color accordingly.
  • Define something like - img {display:block;} to avoid clients adding padding pixels.  
  • Don't use "float" , instead use "align" attribute inside tag to float images.
  • Keep the width less than 600 pixels if indeded for mobile devices.
• Fonts
  • Font sets are limited in emails. Refer this link to confirm the fonts that you want to use in your emails.
  • Be aware of the fact that mobile devices will resize the fonts. So test it a coulple of times and fix a font size.
• Links
  • Too much of links in an email can trigger spam filters at ISPs. So keep only required links.
  • Don't use very lengthy URLs inside emails. Use some shortners like goo.gl to shorten your URLs whenever possible. This can help in improving reputation.
  • Some clients may display the links in its default color. Define a color within the tag to get rid of this. Example : 
  • It's a good practice to check the blacklist status of the domains that you're going to put inside your emails using some tool like mxtoolbox.com . If a domain is black listed, stay away from that.
• Videos
• It's possible to embed responsive videos inside your mailer with the help of HTML 5. Below is an example code. Don't forget to add a failback image (preferably gif) incase if the device fails rendering the videos.

<video width="100%" poster="http://myfallbackimage.jpg|gif" controls="controls">
        <source src="http://mymovie.mp4" type="video/mp4" style="padding-top:55.25%;" />
        <a href="http://mywebsite.com"><img src="http://myfallbackimage.jpg|gif" /></a>
</video>

So, I guess I've covered all the important aspects. Happy designing :)

---