Scribd
Upload
31 views3 pages

Email HTML Best Practices

Uploaded by

elasticrubin
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
31 views3 pages

Email HTML Best Practices

Uploaded by

elasticrubin
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

BEST PRACTICES OF HTML

Email marketing is one of the most powerful and effective forms of marketing today. It is quick
to deploy, offers immediate and highly measurable results, enables advanced segmentation and
personalization, and delivers a high return on investment.

However, achieving maximum results from your HTML email requires experience and expertise.
Simple mistakes in the implementation of HTML emails can seriously affect delivery or usability.

To help marketers optimize results from their email marketing efforts, we Have created this guide
to create effective HTML email.

Below are the Best Practices Guidelines:


1) The text should not be placed inside paragraphs: Paragraphs may seem like one of the simplest
HTML tags, but it creates trouble in some esps. Mostly issues will be seen in Outlook.com and
Yahoo! Mail. Outlook.com enforces 131%-line height and a margin of 1.35em under each
paragraph. Yahoo! Mail, on the other hand, adds no margin whatsoever, making paragraphs look
jammed together. Paragraphs are not supported by esps.
2) Images needs to be block level element: Creates white spaces between images.
3) Padding, Margin should be avoided: Outlook does not support some CSS properties, such as
margins and padding when applied to certain elements, including <img> and <div>. Yahoo Mail
seems to not show any margins. Avoid using padding, margin
4) Avoid using classes which are not defined
5) Span, div tag should not be used: These tags are not supported by esps
6) Embedded fonts like: <link
href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet'
type='text/css'> should be avoided
7) Email designers commonly use what are called web safe fonts in their emails. Unlike web fonts,
web safe fonts are the default fonts found across the majority of different operating systems and
devices. A few you might be familiar with are Arial, Times New Roman, Tahoma, and Verdana,
Calibri. Use Web safe font as inline
8) JavaScript is not supported by esp's. When it comes to email HTML, note that all best practices
from web development goes out the window.
To make the look consistent, you should:
a) Use table-based layouts
b) Use ONLY inline-styles, and only very simple such.
c) If you embed images, try to make sure that the e-mail looks decent even if images are not
loaded. So, use of Alt, title is must for all images.
d) Test your emails in at least three or four email clients like Yahoo!, Gmail 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 colours look like you want them to and more.
e) 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 is a blank screen when you send it. Delivery
problems often occur when mailing image-only emails."

HTML should follow below points to make it a standard email:


a) Pre header: A preheader is the short summary text that follows the subject line. This gives a
hint to the subscriber on what message is this email about before you open it.
b) Email Layout: Studies indicate that an ideal email width is 500 to 650 pixels, so, the user should
not scroll the mail horizontally, and also the vertical height should not be too much longer. If you
have multiple products or categories to display, a navigation bar can be key. Limit yourself to four
or five sections for better visual emphasis and include clear and appealing calls to action.
c) Visual Impact: If you are using an image, it’s important to provide fallback colour and alt-text
for the image. Avoid background images layered behind text.
d) Copy and Content: Use short sentences and paragraphs. Use design elements like spacing and
dividing lines to distinguish the content sections from one another. Use bullet points to showcase
benefits. Ideal font size for body copy is 14 pixels and titles are minimum 22 pixels which provides
a decent readability on mobile phones. Double check your copy for spellings and grammar.
e) Footer: An ideal email footer should not only include the organization’s contact details, but
also links to main segments of your website, key services or products, and social sharing etc.

Why does the HTML email go to spam?


- If you have broken code, you can get filtered as spam
- If you don't have a good balance between HTML elements and text, you can get filtered as spam
- If you have JS in your HTML code, you can get filtered as spam.
- If you have blacklisted domains in your code, you can get filtered as spam.
- Not deliverability related but if you use divs or use external CSS or CSS on the the <head> your
email will most likely not render properly.
- Spam words in the HTML.

You might also like