9 hands-on design tips for effective email campaign – Part I


Email marketing can be a wonderful tool, if done right. In fact, email marketing does not have to be all about pushing readers into clicking on call-to-action buttons (although it is very effective at that). It is also about keeping your brand in their mind so that when they do need your services, they will think of you and not your competitors.

Good email marketing does not only create benefits for the sender. It should provide real benefits to the readers too. It should help them solve problems, keep them informed and provide added value. After all, that is what they expected when they signed up.

The problem is often that subscribers do not make a conscious decision to sign up. Next to that, more and more people read their emails on a variety of devices. Ensuring a proper layout on each device can raise quite some questions. And you surely want to avoid a user's spam folder. Consequently, we can safely state that email marketing is a rather complex subject.

It is not easy to get noticed between the hundreds of emails that crowd a recipient's inbox. And it is equally important to avoid sending your emails to a user's spam box. Therefore, it is essential to put considerate effort and thought into your email design. Let's examine some best practices for elaborating the concept design of your emails, as well as some pitfalls that can hurt performance.

Brand optimization

People recognize your products and offers mostly by your brand. Therefore, it is important to:

  • Include your brand name in the From name.
  • Use a recognizable From address and an existing reply-to address.
  • Put some effort into personalization by including the recipient's name in the To field.
  • Display your logo clearly and use your brand colors. If possible, reflect the design of your website.

Next to that, be careful with your subject lines. Use an informative and short subject line and avoid spam-triggering words or capitals for entire words or phrases. Also, only use UTF-8 special characters if they are really relevant and create added value.

Pre-header & header

As not all users are able to view the HTML version of an email, you should always add a link to an online version of the email in your header. This allows users to click through and view the email in a web browser.

A few email clients like Gmail, Outlook or iPhone show a snippet or preview text (usually limited to 100 characters or less). In this case, the snippet text is pulled out from the first few lines of an email's content. Use this valuable property to build on your subject line to draw the user in.

Most emails nowadays contain a so called Johnson Box (or preview pane), which is essentially a box of 400x300 pixels found at the top of emails, containing the key message of the email. The purpose of the box is to draw the reader's attention to this key message first, and hopefully grab their attention, enticing them to read the rest of the email. The Johnson box should always contain a line of text that describes the content or purpose that motivates your recipient for further reading. It is recommended to try to keep the header less than 150 pixel in height, to avoid pushing your main message and call-to-action below the Johnson Box.

Email layout & visual impact

Currently, emails can be read on a wide variety of devices, such as desktops, laptops, tablets and smartphones. Therefore, it is not always easy to come up with an ideal layout that covers all devices. For emails that are read on a desktop or laptop, the ideal width is 500 to 650 pixels. For smartphones however, you should opt for a maximum width of 320 to 550 pixels. Nevertheless, the current trend is to implement responsive design, which provides an optimal viewing experience across almost all devices.

Additionally, you should take into account the following considerations:

  • A vertical layout is preferable over a horizontal one, as vertical scrolling is easier on most devices.
  • Text and images should be used in a correct proportion. If the balance is off, emails will have a greater chance on triggering a spam filter.
  • If you have a lot of content to cover, include a table of contents in the top of your email.
  • When displaying a broad range of products or categories, provide a navigation bar.
  • Make sure that key offerings are taken up in separate sections which are visually emphasized.
  • Put a lot of effort into call-to-action buttons, as the design should naturally lead the user to the call-to-action. You do want your customers to easily find and click them. The same approach should be followed for product offers and feature headers.
  • Whenever images are used, it is important to provide fallback colors and alt-text for the images, as not every email client will be able to display them correctly.
  • Try to avoid background images layered with text, as they are not supported across all email clients (e.g. Outlook).

Content & copy

Most users have a crowded inbox and quickly scan through their emails. As you do not want to waste their time and risk a potential unsubscribe, make sure to use short sentences and paragraphs.

Additionally, legibility is crucial if you want to convince recipients to read an entire email. Therefore, use design elements like spacing and dividing lines to distinguish content sections from one another. Also, if you want to put focus on specific headers or sub-headers, put them in a bold typeface. Or reversely, if you only want to draw attention to certain words, put them in a bold typeface and leave the remainder in a regular font.

When offering products, it might be a good idea to use bullet points to showcase their benefits and put additional emphasis on them. In this way, the customer will get a clear overview and you might just persuade him enough to click through [H].

As text is the core of most emails, you should take special care of the fonts that you are using. If you want to play safe, you can stick to web-safe standard fonts like Arial, Georgia or Tahoma. However, there are ways to setup non-standard fonts in an email by including @font-face CSS tags in your styling. It is important that you do not forget to provide one of the web-safe fonts as fallback font, in case an email client cannot render the chosen font correctly. Also make sure to choose a large enough font size as you never know on which device your recipient will read your email. The ideal font size for body copy is 14-16 pixels and titles are best shown with a minimum of 22 pixels.


Stay tuned for the next tips:

  • Footer
  • What you need to avoid
  • What you can consider
  • Mobile emails
  • Test your email


Eager to know more?
Download our Guidelines on " Designing and sending emails".