12 Email Marketing Design Tips

Published by

Build Using Tables, Tables and More Tables

Tables may be from the 90s, but have proven to be the most reliable way to build emails and receive the best looking results across all email clients, without fail. Some clients, Outlook 2007 and Gmail will not render modern styling such as margining, padding and floating.

Use inline styling to make your emails look pretty and avoid them being stripped down of all CSS by certain email clients and browsers.

TIP: set widths directly within cells and not in the table itself, making sure you use numbers and not percentages for consistent email client compatibility:

<table cellpadding=”10” border=0”>
 <td width=”250”></td>

Select the Right Font for You, and Your Subscribers

Choosing a font for your email marketing is limited to a small selection of ‘web-safe’ fonts to ensure your emails can be read across all internet devices and email clients. Here are the fonts you can choose from:

Top Email Marketing Design Tips

Be sure to keep your chosen font consistent throughout your emails by using set sizes for Headings, Subheadings, body text and links. Keep your headings under a font size of 28 to avoid ‘shouting’ at your customers and to allow them to be read comfortably on a mobile device.

Emails are scanned, not read. Paragraphs should not exceed four lines of text throughout your emails to allow your customers to absorb all content when scanning through.

Choose Appropriate Imagery

Select your images to help tell a story throughout your email when scanning through or glancing at first sight. Be careful not to say ‘too much’ in your images as 60% of email clients block images from displaying by default.

email marketing design tips

Don’t forget to link your images to the related content, product or promotion.

Do Not Use Background Images

Position your images alongside related text to ensure you attract your customer’s eyes to the message or product you are promoting.

A common way to align your images within an email is to use a ‘float’ command, for instance <img style=”float:left”… />. However this is not recommended because certain email clients such as Gmail and Outlook 2007 will not render this command correctly, causing your images to be positioned haphazardly. A simple solution to this problem is to use an ‘align’ command directly into the image tag, for example <img align=”left”… />.

Remember not to use background images in your email marketing as they may not render correctly or at all in Outlook.

Include ALT Tags – a Text Alternative for Images

Fundamentally an ALT tag is used to describe an image to viewers when the image is not being displayed. Search engine spiders also use ALT tags to translate what an image in representing.

When choosing a description for an ALT tag it is important to ensure you are explaining the purpose of the corresponding image, for example, if the image was an icon of a cog to represent ‘profile settings’, a good description of ALT tag would be < … alt =”settings” />.

Avoid PNGs

Avoid using PNG file formats when inserting images into an email. Older email clients such as Lotus Notes 6 and 7 do not support PNG images, therefore the recommended file formats for your images are JPEG or GIF.

Organise and Prioritise Your Content

Emails are increasingly being read on the move on a wide variety of mobile and tablet devices. Keep this in mind when constructing your HTML emails by remembering a few key essentials:

  • Prioritise your email content by positioning the important messages, offers and products at the top of your emails.
  • Keep the design simple with short, punchy content to help busy, distracted viewers absorb as much information as possible.
  • Insert clear call-to-actions by using bolder fonts, links and button images to capture the eye of scanning readers.

White Space is Your Friend

White space is commonly underestimated and considered a ‘waste of space’, however this is not true. White space can act as a resting point for the reader’s eyes, helping to navigate around the email. Emails containing little white space can look busy and make it difficult for the reader to focus on a specific section.

Include Company Information and Unsubscribe

It is important for your subscribers to instantly know that all email campaigns received from you, are in fact, from you. Position your logo and website link significantly and consistently on all of your emails for consistent brand recognition. Remember, it is a legal obligation to include an unsubscribe link on all email campaigns.

TOP TIP: Your emails should remain between 500 and 650 pixels wide as many email clients have relatively narrow reading panes by default.

Increase Website Traffic with Links

Encourage subscribers to visit your website by adding links throughout your email marketing campaigns. Be sure to also include a link to the online version of every campaign to ensure your emails can be viewed in full when certain email clients fail to display your content how you built it.

Be Confident when Sending Your Emails

There are approximately 35 popular email clients used by your subscribers, each with a unique way of displaying emails. Be thorough when testing your emails by using such processes as cross-client testing. To help, there are online tools available to do this for you such as Litmus!

Use a Template to Make Your Life Easier

To help make your email marketing consistent, build a template to use for every campaign, taking in all the notes from this article.


Design & Content