Mobilize Mail > Email Design Top Tips For Designers & Developers

Get Started

Email Design Top Tips For Designers & Developers

email-design-flat

Email Design has improved over time however it’s not like coding a website, there are still quite a lot of restrictions if you want your eDM to look good in most email clients.

Web developers can fall into the trap of designing and coding email templates like they are HTML web pages. This blog article provides basic instruction on email design do’s and don’ts.

Email Design Width = 600 pixels

The most important rule to keep in mind when designing your email templates is the width. We highly recommend a maximum email template width of 600 pixels. This width ensures your email content is viewable on most email clients and devices.

Responsive Design

While the maximum width of 600 pixels ensures the content is viewable on most email applications, the smaller screens of mobile devices may not present the content attractively. Responsive design presents the eDM content to fit the screen size and by doing so our statistics show it results in a higher click rate.

Call To Actions Below the <body>

Attractive call-to-actions are vital for getting your subscribers to where you want them to be. The majority of subscribers will only glance at the top of your email messages before deciding whether the content is worth reading or not. Be sure to catch their eyes with clear and relevant call-to-action buttons.

Keep it below the <body>. Certain email clients will strip out any code above the opening <body> tag of your template.

KISS Principle for HTML

Keep your HTML as simple as possible. Email clients use very basic HTML rendering engines that will cause many debugging issues with complicated designs. To create your email messages use tables, within tables, within tables; this technique may be old-school however it is proven to provide the best rendering results across all email clients.

Keep your padding at table level. Outlook enjoys removing any padding from rows and cells, if you would like padding within a specific table cell, create a new table within the cell and apply the padding directly to the <table cellpadding””> tag.

Avoid CSS

Avoid CSS wherever possible. To add styles to your email messages, be sure to only use inline styling without taking any shortcuts:
<td style=”color:#666; font:12px; Tahoma”>
<td style=“color:#333333; font-family:Tahoma; font-size:12px”>

Align, don’t float. Floating your content will not be supported by certain email clients, to align your content use the basic align=”” tag directly within your tables and table cells (<table align=”left”>).

Avoid JavaScript

Do not include any JavaScript within your email messages. Most email clients will mistake JavaScript for malicious code and remove it from your messages.

No Flash or Videos

Do not embed flash or videos. If you want to include a video within your email message, take a screen shot of the video, add a play button and link it directly to the online video.

No <colspans=“”>

Do not use <colspans=””>. Collspans will be stripped out by some email clients compromising the layout of the other table cells.

Use Of Background Images

Some email clients will not display background images.  You can provide a default background colour that will display on those email clients.  To style the background of your email messages use the back-to-basics <table bgcolor=”#333333”>

Text & Images

When inserting images into your email messages be sure to include styled ALT tags. Roughly 60% of email clients will block images from downloading as a default, using ALT tags will ensure your subscribers still see the message you are displaying through your image.
<img src=http://website.com/image alt=”Image Description” style=”font-size;20px; font-weight:bold; color:#FF0000” />

Keep your text consistent with set styles for your headings, sub-headings and body text. Be sure only use the standard ‘web safe’ fonts to avoid any rendering issues with email clients.

View in Browser Link

Finally remember to include a ‘view in browser’ link at the top of your email, allowing your subscribers to view the message in a web browser if anything goes wrong on delivery.

While these top email design tips provide basic instruction for email template designers,  we highly recommend your business eDM templates are designed and coded by developers with specific experience in email HTML.

Comments are closed.

Get our monthly e-newsletter – valuable news & tips for email marketing & social sharing success