Best practices for HTML email design to ensure emails display correctly and consistently on desktop and mobile devices. Visit http://blog.lyris.com/ to accelerate your digital & email marketing campaigns.

1. 1
Lyris Connections Blog
Excerpts From Our Most Popular Posts
HTML for Emails – What you Need to Know
By Lyris Marketing Team
Designing HTML emails for a newsletter isn’t as difficult as it used to be in the
past. With the emergence of visual HTML editors like Dreamweaver, Coffee Cup,
TextMate, and others, you can now build and view your templates side-by-side.
However, you will still need to have a good understanding of HTML in order to
use these tools.
If you are fortunate enough to have an in-house designer or
design team, then you won’t need to worry too much about
coding email templates yourself. This is a great benefit,
as you can simply upload or copy and paste the HTML
template into your Email Service Provider (ESP) platform
and start creating your message. If you are even luckier
and your ESP uses a WYSIWYG editor, small changes are
easily incorporated since you don’t need to know HTML; the
changes you make on the visual editor will automatically
change the HTML code.
However, if it was only that simple we would all be doing it. Designing a regular template is not the same when it
comes to designing an email template. Many HTML and CSS properties used in modern Web design are not supported
in email and email programs like Outlook, which can cause rendering and display problems with your email message.
Therefore, it’s advisable to adhere to some basic best practices for HTML email design to avoid any complications with
the way your emails display.
Here is a list of key points to bear in mind that will help you achieve the best results:
HTML Coding
1. Use tables for layout and design of your message and make sure all your <table> tags are opened and closed
properly to avoid any issues. A maximum table with a width of 600 pixels is also suggested.
2. Use inline CSS for styling, as browser-based services like Gmail or Hotmail will strip out your DOCTYPE, BODY, and
HEAD tags.
3. Avoid using shorthand, e.g. <p style=”font: italic 14px Verdana; color: #000”></p> Instead, use <p style=”font-
style: italic; font-size: 14px; font-family: Verdana; color: #000000”></p>
• Avoid complex colspans and rowspans as these will make revisions a nightmare if you try to reuse
the templates.
• Avoid Java script, DIV, Flash, or any dynamic scripts – most email clients will not allow these to
function properly.

2. lyris.comCopyright © 2014 Lyris, Inc. All rights reserved.
About Lyris Inc:
Lyris (@Lyris ) is a leading global provider of digital marketing solutions that help companies engage with customers
in more meaningful ways. Lyris products and services empower marketers to design, automate, and optimize data-
driven interactive marketing campaigns that facilitate superior engagement, increase conversions, and deliver
measurable business value. Lyris’ high-performance, secure, and flexible digital marketing platforms improve
marketing efficiency by providing automated digital message delivery, robust segmentation, and real-time digital
channel analytics. The Lyris solutions portfolio is comprised of both in-the-cloud and on-premises offerings – Lyris HQ
and Lyris LM – combined with customer-focused services and support. More than 5,000 companies worldwide partner
with Lyris to manage and execute sophisticated digital marketing campaigns across email, social, Web, and mobile
channels. Learn more at www.lyris.com.
Keep up with the latest industry trends, developments and best practices for
continuously optimizing your digital marketing campaigns.
Visit Lyris Connections Blog
Images
1. Use image file types GIF or JPG for best results.
2. Use alt text, as images are usually turned off by default. This ensures that the reader is aware of what should
be there.
3. Avoid background images; email programs like Outlook will strip them out. Use a background instead.
4. Use absolute image paths instead of relative, e.g do not use <img src=”/images/myimage.jpg”> Use instead
<img src=”http://www.yoursite.com/images/myimage.jpg”>
• Define image height and width attributes so that when images are not loaded, your layout is still intact.
Links
1. Make sure you abide by CAN-SPAM RULES and provide an unsubscribe link in all your communications.
2. Avoid setting or changing a link color, as some email clients will change this by default.
3. Try to shorten URLs whenever possible; this can help improve the look and feel of the text version.
4. Include a link to update subscriber preferences where applicable.
In addition to the recommendations above, it has become common practice that email templates be created using
a responsive design for mobile devices. Today 70% of all readers tend to open an email on their mobile devices
first. This is important to keep in mind because not having a mobile-optimized template can affect your open rates.
Further, it’s important to test each template before sending out your email to ensure everything is displayed the way
it should by having adapted it to the various email clients and platforms. I suggest using our partner Litmus, as it
offers the most comprehensive selection to test the rendering of your templates.