Emailer Design Compatibility

Compatibility Factors With Email Design

Guidelines to Design Browser Compatible Email Templates

When designing an email, stick with the email designing best practices to ensure that your emails render beautifully across all email clients, web browsers and on mobile devices. Due to the availability of numerous email clients and the limited support they offer to CSS, it’s crucial for marketers to follow very specific rules & do's/Don'ts when it comes to email design. This brief guide will help you understand the key points that you should keep in mind to ensure that your email is displayed properly on each and every email client.

Key emailer designing guidelines that should be followed in order to ensure browser compatible mailers are stated below:

• Avoid using HTML5
• Use "table" instead of "div"
• Use html attributes like bgcolor
• Avoid CSS3 specific code
• Use HEX values "e.g. #FF9000" for colors instead of rgb
• Use padding instead of margin
• Avoid "div" and deeply nested tables
• Don't over-optimize your HTML code
• Make sure the message is still readable even if images are blocked
• Don't use Javascript, Flash, embedded video, iframes, forms or external CSS code

Design for the 600 Pixels:

Email recipients use variety of email clients to view and read emails. The space an email occupies when opened depends upon number of factors such as advertisements, menus, and toolbars. Therefore, the emails wider than 550-600 pixels can be opened and read easily regardless of the device used. Though, this could be a standard size of an email, marketers can also opt for 700 pixels to be on safe side.

Go With The default System Fonts:

Email templates are different from a standard website due to their limited support to web fonts and CSS. To avoid ambiguities in the mail text display due to general lack of support available for handling web fonts, stick with web-safe fonts like Arial, Helvetica, Tahoma, Times Roman, and Georgia.

Ask yourself whether you really need an animation in your email. While most email clients support animated GIFs, Outlook 2007 does not. Email clients that do not support animated GIFs will likely show the first frame of your animation sequence.

Keep Eye on Text-to-Image Ratio:

Emails having heavy and slow loading images are most likely marked spam by clients, resulting in a serious reputation dent. To avoid this, keep a balanced image-to-text ratio in your emails when shooting an email marketing campaign. Most email clients block images from being appeared in the mailer. Therefore, include text in the mailer that best describes the main point of your communication, the offer, the announcement and call to action. Ensure that the important text of your email should be viewable upon opening the email. A balanced text-image combination helps to keep mailers browser friendly.

Avoid Using Background Images:

The standard of using background images became obsolete when Outlook 2007 and a number of web-based email clients arrived. You may still use background images if you’re sure that your contacts are only using email, else avoid using background images.

Go With Mobile First Design:

The growing use of mobile phones for accessing emails led marketers think to adopt email templates that support responsive layouts. Your emails should be adopted to the mobile devices, they are being opened on, whether smartphones or tablets. That means the emails sent should be clearly visible on every device without being truncated a bit.

Since most email clients show emails with images disabled by default it is very important you check to see how your email looks with images disabled.

When begin with emailer design, adopt mobile-first design for optimal viewing across all platforms. Things that you need to take care of here are single-column layouts, larger fonts, and clear and concise messaging and calls-to-action. You can also choose multi-column layout, but keep them to limited scope as much as possible. Once emails are designed, don’t forget to test your emails on all devices and email clients.

Be CAN-SPAM Complaint:

This isn’t only needed to be in the good books of email service provider, but also a law to follow. Marketers need to ensure that their physical mailing address is in the email that users can unsubscribe from the email itself with either a single click or by replying to the email.

While designing an HTML mailer, keep in mind spam filters that scrutinize your HTML design. This is quite an important factor, since your emails might be opened on 100’s of different email clients available.

Just as with regular web design you want to be aware of image file sizes for your email. Try to keep them low to ensure they will download quickly for your subscribers.

Do Not Embed Videos and/or Flash:

Embedding videos or flash elements in your emailer is a bad idea. Most email clients flag it spam and some don’t support it at all. Rather embedding videos forcefully, attach a screenshot of a screenshot of what the video of flash player looks like and embed that. When user clicks it you can have the video/flash open in their browser.