HTML Email Design Guide - The Basics!

by Roland Pokornyik

Difference between web vs email

Email clients have many inbuilt limitations that do not exist on the web. The biggest problem is that there are no real standards in the email market and email clients use really different approaches to decode HTML content.

This is the reason why email HTML is the toughest HTML to code on the globe. We need to include many “hacks” in the code to be able to create a great looking email in Outlook, Gmail and Yahoo mail for example.

The key message is that: Not everything is possible in email that’s available on the web.

Some examples:

  • embedded video in email: tricky question, rather not supported (safe workaround: image/gif with link to playable online video)
  • embedded web forms in email: tricky question as well, not supported (safe workaround: fake form elements with individual URLs)
  • custom fonts in email: generally not supported (safe workaround: use web safe fonts or fonts as image)

Rule #1 – 600px is still the optimal width

  • Screen resolutions were too small back in the 90s (in 1024 x 768, 600/650 px is still the maximum which could fit in the screen for example in Yahoo or Aol Mail).
  • Many email clients have a preview window which has a limited size – 600 px is a safe size to go for (Outlook, Thunderbird, Apple mail).
  • You cannot be certain that your email displays in full size 50-75 characters per line is the optimal line length for readability (Source: Baymard.com).
  • People view emails on mobile (one column, 600 px width, large font sizes = mobile first thinking is still the safest way of optimizing for mobile, but has cutbacks).
  • Optimize your images for this width (small and large images as well) as well.

Rule #2 – Email is built up like “LEGO”

Email is built up from “LEGO” like – square – elements. Triangular or circle elements cannot be coded into HTML email. Nor overlapping elements.

Since email is based on a table layout, these are the basic building blocks:

  • Columns
  • Rows
  • Cells

If you cannot represent the structure of your email in an excel, that email design won’t be possible in email HTML. Only if you replace structures with images in the design!

Rule #3 – Use the basic “LEGO” blocks (Title, Text, Image, Button) separately

The basic elements of an email design are Text (Title is a type of text), Image and Button. These elements can be used in any HTML email.

The safest approach is to have these elements separately in your email design!

Rule #4 – Background images are not supported in Outlooks

We encourage everybody to use Images and Text separately, but we also know that this might be a huge design cut back in many cases.

In case you really need to write text or place a button on an image, you can do it by using a background image (on a Box element in EDMdesigner).

One important point is that in Outlook only the body background image (which is the main background of your whole email template) works. Other background images won’t show up! This is the reason why you have to have a backup plan – a background color – for Outlooks or totally forget background images and use image, text, button separately.

Rule #5 – Use web safe fonts for highest compatibility

The safest approach is to use only web safe fonts in email design. This is the reason why we only support Arial, Georgia, Tahoma, Times New Roman, Trebuchet MS, Verdana and Helvetica in EDMdesigner.

If you really need to add modern fonts to your email template, you have to do it with image(s). But be prepared, since your image may be scaled down to the size of a mobile screen and it may happen that your text won’t be readable on mobile.

Rule #6 – Reordering top-down, left-to-right

EDMdesigner’s editor reorders Multi-column structures automatically to one column on mobile screen. It means if you have a 3 column structure on your desktop email design, the content of these 3 columns will be reordered to 1 column on mobile in the following way: 1st column on top, 2nd column in the middle, 3rd column in the bottom.

The above shown example represents two cases:

  • Left side case: If we use two Multi-column elements (two rows, two columns) the reordering will work the shown way. First row’s first column (1) on top, first row’s second column under (2, 3), second row’s first column under (4, 5) and second row’s second column in the bottom (6).
  • Right side case: If we use one Multi-column element (one row, with two columns) the reordering will work the shown way. First column on top (1,2,3) aned second column under (4, 5, 6).

Reordering on mobile can be switched off in EDMdesigner’s editor. So for example if you don’t want the small social icons to be reordered into one column, you can do it with the editor easily.

Rule #7: Obey the rules & follow these steps

  • Clarify the goal of your email
  • Compose your message
  • Collect related visual content (images, video urls, social icons, etc)
  • Build up the layout – skeleton – of your email (on a paper or right in EDMdesigner)
  • Optimize your images for 600px width (images smaller than 241px won’t be stretched to full-width on mobile in EDMdesigner)
  • Add your text and images right into the editor
  • Format your text right with the editor
  • Position your containers, images with padding and margin
  • Check out the email preview while designing
  • Send test email(s) and check spelling, URLs, image positioning, briefly everything before sending (exporting) your newsletter

We hope that this high level HTML email design guide will help you to design and create professional email templates with EDMdesigner.

A more detailed email design guide is coming soon, with illustrations and in-depth descriptions. Stay tuned!