Best Practices Designing Emails

BV-Blog

In the last few months, most of design time has consisted of designing HTML email for our clients and ourselves. Whoever predicted that email was going the way of the dinosaurs couldn’t be more wrong.

At this point, after many rounds of trial and error, I’d like to think I have a very good grasp on designing emails for successful delivery. Developing artfully designed emails to implement across the most popular marketing automation/email marketing programs has been challenging. Overcoming that challenge to see a flawlessly designed email delivered right to your inbox does provide a great sense of satisfaction.

Designing for Email Deliverability

However, this success does not come easy. There are numerous factors that come into play with email design and its impact on deliverability. To begin, like all marketing activities, you need to know your audience. Find out which email program your audience utilizes most, such as Microsoft’s Outlook 2010 or Google’s Gmail. This exercise will not be made in vain, as email clients render HTML emails differently; making a big impact on how you design and code your emails.

Utilizing CSS in Emails

A component of email design to pay particular attention to is using CSS in your emails. CSS is the code that makes HTML emails visually pleasing, but it can also be the most frustrating part of designing for emails. A terrific resource for utilizing CSS in email is the Guide to CSS support in email clients.

Best Practices & Design Guidelines

Based on my frustration and heartache designing HTML emails, here are a few best practices or guidelines I would advise you follow to develop the artfully crafted, successfully deliverable emails you desire:

I.Strategic Use of Tables

For using tables when coding, most email clients don’t support CSS layouts.

Here’s an example:

<table border=”1″>

<tbody>

<tr>

<td>row 1, cell 1</td>

<td>row 1, cell 2</td>

</tr>

<tr>

<td>row 2, cell 1</td>

<td></td>

</tr>

</tbody>

</table>

For a reference on tables visit W3Schools to get more detailed information. If you require more information on coding, go to Quackit. This website will generate tables for you.

Also, using “Nested Tables” when coding makes the code a bit messier, but will help you overcome the margining and padding issues you may encounter. A “Nested Table” means to put a table within a table which will help you achieve the right look when dealing with complex graphics and/or copy.

II.Utilizing Inline CSS

As stated earlier, most email clients do not support CSS layouts; however, they will support some basic CSS elements (refer to guide from Campaign Monitor) using inline styles. This requires that you embed the CSS within the code. Note: you cannot use external CSS files in emails like you can on regular websites.

Here’s a basic example of inline CSS

 

 

 

Sample text here.

 

There are many tools online to help you with inline styles. The most useful inline style site I have found is Inline Styler. This site has saved me numerous headaches.

III. Maintaining Email Width

Most marketing automation/email marketing programs limit the maximum pixel width of your email to accommodate the variety of email preview panes, like in Outlook and Gmail. As a rule of thumb, its best to stay under 600 pixels when designing for emails.

IV. Images & Graphics 

 

Images and graphics are where email designers want to spend most of their time and have the most fun, but this can also be the most difficult to master. The illustration element of emails is what really makes emails standout, but not all email clients support background images. Some viewers will specifically turn-off images until the reader elects to show “pictures”.

Given this, I recommend limiting usage of images in HTML emails. Limiting images does not have to hinder the design of your email as layout and formatting can be just as powerful as images in email design. Don’t forget to test your layout with the images disabled, since many readers will only view the email in this format. Just as Robert Browning, the notable poet/playwright, said “Less is More”.

Outside of images and graphics, other ways to enhance your email design is using background colors to convey your core design. Keep in mind, it is important to maintain readability to the viewer while utilizing background colors.

Another best practice is to never embed your images in the email. Always have your images hosted on your server. This will also save you time if images need to be changed quickly in a multiple part email series.

Lastly, remember to optimize your graphics to a suitable file size. No one likes waiting for images to download. While everyone is on hi-speed internet these days, where there is little patience with delays in loading.

V. Unsubscribing

It’s common practice that most HTML emails are only sent after an opt-in process. However, keep in mind that you need to make opting-out just as easy as you made optin- in, or the ramifications could be detrimental to your email deliverability. If you make it hard to unsubscribe, you’ll surely lose respect from your audience.

VI. Viewing Options

Give your readers other ways of viewing your email. Simple text is always best for the minimalists. For others, you can enhanced the experience by having a link that will take them to a browser, in which case you can go all out because you can use all aspects of HTML and CSS, like on a website. As best practice, I usually put a text link at the top that allows users to view the HTML version in their preferred web browser.

VII. Don’t Over Complicate the Content

Companies use emails and newsletters as a way to keep contact with their clients and nurture their prospects. It cannot be stressed enough that you shouldn’t overload your emails with too much information, as no one wants to read a multiple page email. Your content should have descriptive headers and concise copy that entices your readers to act on the “calls to action” you have identified in your emails.

VIII. Test, Test & Test Again

Similar to designing a website, you must test amongst various browsers and operating systems, in this case in multiple email clients and versions. There are over 20 popular email clients, each with their own standards, without considering the outliers.

With these standards in mind, I suggest you check out the “Email Standards Project” website. The information on this site is always being updated with email client standards and potential problems you may encounter.

 

That’s a Wrap

 

With these best practices in mind, ensure your emails are: designed with tables; inline CSS; under 600 pixels in width; using minimal graphics and copy. And remember, make it easy to unsubscribe and test, test and test again!


– Software Delivered as Promised. No Surprises.

Print Friendly

Insight written by Bryan Villanueva

Creative Director at Rand Group

Ask Bryan a Question or call (866) 714-8422

Follow Bryan: