1Lyris Connections Blog Excerpts From Our Most Popular Posts

HTML for Emails – What you Need to KnowBy 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.

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.