Email development best practices

These are some of the protocols I follow from a purely development point of view rather than strategic. The following hints, tips and paths to follow will help you develop robust and fully working emails across the board

26 February 2023
by Andy

Design system
Email basics
Email layout
CSS
Tables
Accessibility
Images
Buttons
Typography
Animation

Design System

Design systems or flexible frameworks aren’t for everyone. They will work incredibly well and make multi use template very powerful and scalable when done and maintained well.

A well designed and built design system generally means a much faster and efficient build, being particularly advantageous in powerful ESP’s such as Salesforce.

Service emails which use the same content block in multiple place can be coded in a way that changes and maintenance can be done at content block level and flow down into each email or template that the block is being used. If that block is being used in ten places, then the build time has is now ten times more efficicient.

I implemented using a design system while working at Cazoo.

A design system offers a library of visual style and components documented and released as reusable code for developers and/or tool(s) for designers
Nathan Curtis

Email basics

This section will contain some basic guidelines to follow when building out and maintaining the email template and can be used as a checklist. More details will be in their section.

Tables

Emails should be 600 pixels in width. This will make them behave better within the preview-pane size provided by many clients
Containers should be single column. Use nested tables with columns and rows where applicable
Use element attributes (such as cellpadding, valign, and width) to set table dimensions.

CSS

Avoid attribute selectors, keep all CSS simple
Keep all styles in the HEAD
Be aware of Outlook specific CSS (Ie capitalising ‘Margin’ when applying stylesbute selectors, keep all CSS simple

Comments

Long email tables can be confusing. Make sure you comment the start and end of each section

Outlook

No support for web fonts or fall back fonts
Outlook will alter font styling unless you have the correct doctype

Yahoo

Yahoo will add extra space to nested tables

Android

Android 6 and below don’t support media queries. The ideal is to make sure they look like the desktop version of the email rather than look broken.

Test and test again

All email clients, devices and browsers are different and generate emails in their own way. You may make a change or fix a bug in Gmail, but that change may have a knock on effect to the other clients. Make sure whatever change you make to run a test across all platforms to be sure the update is universal.

Email layout

Email is not the web!

There are no agreed upon standards that email client vendors need to support. Every single email client supports a limited subset of HTML and CSS.

At a very high level, here’s what you can expect:

Web	Email
<div>	<table> <tr> <th> <td>
<h1> to <h6>	<h1> to <h6> or <span>
<p>	<p> or <span>
<style>	style=””
em, rem	px
#fff	#ffffff

Basic email structure

<!DOCTYPE html>
  <html lang="en">
  <head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <style type="text/css">
    </style>
  </head>
  <body>
  </body>
</html>

Most email clients block external stylesheets and some email clients strip out the ‘head’ section, so we are left with inline styles.

The STYLE block in the HEAD will contain CSS presets you need to include, as well as CSS that progressively enhances any essential, inlined styles or is meant for mobile email clients.

See how to style tables correctly.

CSS

CSS Guidelines

There are some basic rules to follow with CSS styling to follow to make sure that emails respond correctly within all devices and clients. Please follow the guides in the Tables section to follow how to correctly inline style tables.

Use inline CSS
The benefit of using inline CSS is that most email providers will support this styling, which means you’re likely to get the best results without running into any formatting trouble.
Make sure all STYLE tags are within the HEAD
Most devices will be fine here, but Google are very strict in making sure that all the code is compliant. This means that Gmail and the native Android email app will ignore any style tags and display the desktop version.
Don’t use attribute selectors, avoid pseudo-classes
Although they are supported in modern email clients such as iOS and Apple Mail, Gmail does not support them. Gmail also does not support pseudo-classes like :checked and :active and only supports :hover in their webmail client. Therefore, interactive email support in Gmail is very limited or non-existent.
Stay away from background images
Outlook doesn’t support background images and will display a fall back colour. There is a way round this if you follow this guide.
Layout
All emails are built using tables. There are no agreed upon standards that email client vendors need to support. Every single email client supports a limited subset of HTML and CSS.

Tables

Table Guidelines

We only need three elements for marking up any and all content: the ‘table’, ‘tr’, ‘th’ and ‘td’ (or ‘th’) elements.

<table>
  <tr>
    <td>...CONTENT...</td>
  </tr>
</table>

As attributes, we’ll only use: align, bgcolor, border, cellpadding, cellspacing, width.

Generally speaking, you will apply border, cellpadding, cellspacing, and width to every table in your design. Sometimes you will need to align a table, too.

For table cells, you will often need to include align attributes as well as the occasional width and bgcolor.

<table border="0" cellpadding="0" cellspacing="0" width="600" align="center">
  <tr>
    <td>
      ...CONTENT...
    </td>
  </tr>
</table>

I use tables column and rows to structure everything. This is accomplished with a few things: inline styles, the align attribute, nested tables, and stacked tables.

Table styling

Emails rely on inline styling for the emails to look good. The problem here is that it’s tempting to add styles to tables, to columns, to P tags to spans etc. Along with following table structures, the amount of bloated inline style can be removed altogether. I’ve broken down, from outside to in, the best way to keep styling neat and to avoid the temptation to add styling to ever element of a table.

Table

The styling on the table tag should be kept to a minimum. Avoid adding any styling for fonts here and just concentrate on background colours, which doesn’t necessary need to be styled as such.

<table width="100%" cellpadding="0" cellspacing="0" bgcolor="#e850f8;">

In some case it can be advisable to add the background colour to the the column which table is nested in case any horizontal lines appear above and below the table, but it isn’t always needed.

Row

Don’t add any styling to the TR tag. It will rarely work and there is nothing you can add to it that can’t be done on the TD. The code will also be cleaner and allow you to locate the correct sections a lot easier.

Column/TD, TH

The columns (TD) are the places you want to do the majority of the styling. It will help keep the styling ordered and give you the ability to control spacing and gaps within the emails. For the most part, column styling will be for the copy. The table already has the background colour applied to it so the TD doesn’t need to have it applied. Multiple paragraphs can be added in here without the need to add styling to each P tag because the the styling on the TD has it covered. This means a table with some copy in should be styled like so.

<table role="presentation" width="100%" cellpadding="0" cellspacing="0" bgcolor="#e850f8;">
  <tr>
    <td style="font-family: 'Fauna One', sans-serif; color:#ffffff; font-size:14px; line-height:26px;">
      <p>Switching has never been easier.</p>
    </td>
  </tr>
</table>

When adding in the H tags, it’s better to put it on a separate row to to the paragraph, adding most of the the styling for to them on the columns. However, the user agent stylesheet will override the font size and line height set on the TD, so you need to add this to the H tag itself.

<table role="presentation" width="100%" cellpadding="0" cellspacing="0" bgcolor="#e850f8;">
  <tr>
    <td style="font-family: 'Fauna One', sans-serif;; color:#ffffff;">
      <h1 style="font-size:18px; line-height:34px;">Andy Hunt Design</h1>
    </td>
  </tr>
  <tr>
    <td style="font-family: 'Fauna One', sans-serif; color:#ffffff; font-size:14px; line-height:26px;">
      <p>Switching has never been easier.</p>
      <p>Four simple steps to a cleaner switch.</p>
    </td>
  </tr>
</table>

Spacing content

You will need to add padding the to tables at time to create spaces between section or to indent copy or images. Do not use the cellpadding or cellspacing attributes for spacing as you can’t specify different values for different sides of an element. Simply add rows and extra columns, and use colspan in empty rows to stretch it across the other rows which multiple columns. Getting to grips with this at a basic level will help reduced the need for adding multiple tables into an email and causing confusions.

Adding padding to cells does work, but it can also be temperamental and some clients will decide to ignore the style on TDs. It’s frustrating, so the best way to create space is by using columns and row.

<table role="presentation" width="100%" cellpadding="0" cellspacing="0" bgcolor="#e850f8;">
  <tr>
    <td colspan="3" height="15" style="font-size:1px; line-height:1px">&nbsp;</td>
  </tr>
  <tr>
    <td width="20">&nbsp;</td>
    <td style="font-family: 'Fauna One', sans-serif; color:#ffffff; font-size:18px; line-height:34px;">
      <h1 style="font-size:18px; line-height:34px;">Andy Hunt Design</h1>
    </td>
    <td width="20">&nbsp;</td>
  </tr>
  <tr>
    <td width="20">&nbsp;</td>
    <td style="font-family: 'Fauna One', sans-serif; color:#ffffff; font-size:14px; line-height:26px;">
      <p>Switching has never been easier.</p>
      <p>Four simple steps to a cleaner switch.</p>
    </td>
    <td width="20">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="3" height="15" style="font-size:1px; line-height:1px">&nbsp;</td>
  </tr>
</table>

Be aware when setting any column to height below 20px, clients such as Outlook and Yahoo will add extra height and padding, so add ‘font-size:1px; line-height:1px’ to the TD to get the required size. Also add a non breaking space to any empty column as some email clients will ignore them.

A less daunting way to create space is the CSS property padding. Combined with specified widths on tables or table cells and the align attribute, the padding property does 90% of the work in any email design. I don’t like this way though as mentioned above.

<td style="padding: 10px 20px 10px 20px;”>&nbsp;</td>

Please note when adding the CSS as shorthand specify the 4 values, never use the 2 or 3 values shorthand notation

Do not use the cellpadding or cellspacing attributes for spacing:

You can’t specify different values for different sides of an element.
If you’re using nested tables or specifying a lot of widths, keeping track of the maths can get complicated.

Cellpadding and cellspacing will always be set to zero. This is to override any padding or spacing an email client automatically adds to a table or cells.

Multiple columns

Never try to excede three columns within a table as it will prevent elements looking squashed

Wrap the email in a 100% wide container table, followed by a fixed width table to constrain all of our content. Then, we can apply percentage based widths to the table cells for our columns.

Along with the typical align and width attributes, it’s a good idea to include the valign attribute on the table cell where applicable.

<table border="0" cellpadding="0" cellspacing="0" width="100%">
  <tr>
    <td align="center">
      <table border="0" cellpadding="0" cellspacing="0" width="600">
        <tr>
          <td align="left" valign="top" width="50%">
            ...CONTENT...
          </td>
          <td align="left" valign="top" width="50%">
            <table border="0" cellpadding="0" cellspacing="0" width="100%">
              <tr>
                <td style="padding: 10px 10px 10px 10px;">
                ...CONTENT...
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

You can add a class to the the TD holding the content to stack on mobile. Make sure the class contains ‘width:100%; display:block’ and it will display as you wish.

Accessibility

To meet basic accessibility requirements, an email message must:

Maintain a logical reading order
Use semantic markup
Provide text alternatives for images
Feature meaningful link text
Keep your code concise
Use a descriptive subject line
Set the language attribute
Set an email title
Set presentation roles

Maintain a logical reading order

HTML email newsletters and templates are coded using tables.

If not planned and built thoughtfully, people who rely on keyboard-only access might not receive the content in the order intended. Screen readers, for example, read aloud tabular content from left-to-right and from top-to-bottom.

Maintaining a single-column layout on all screens, regardless of size, reduces the likelihood of content being read incorrectly.

Incorrect readings can happen when text is parsed and read aloud by screen readers in an incorrect order or in a way in which the context of the content is unclear. However, when using multiple column layouts, you can change the order in which content columns are stacked by using the align or dir HTML attributes.

Use semantic markup

HTML heading and paragraph elements, like H1, P, TABLE etc – are critical to ensuring hierarchy is conveyed to screen reader users, who may not be able to see them. It’s used to be the case that styling text in the form of heading was the norm, and still is in many cases, but they obviously won’t be caught y screen readers.

Provide text alternatives for images

All images must have an appropriate text alternative that describes the meaning or the purpose of the image. ‘Spacer’ images can carry an empty or null alt attribute though (alt=””). This will inform screen readers that the image is decorative and should be ignored.

For example, a company logo is an informative image and should feature a text alternative. In HTML email code, this can be done using the alt HTML attribute, to convey its meaning to screen reader users.

Photography should be a descriptive as possible, even if it carries copy on it.

<img src="https://www.andyhuntdesign.com/man.jpg" alt="A man with a beard sat on train leaving a station">

Feature meaningful link text

It is important to convey the purpose of links using link text. This text informs the reader as to what will display when the link is followed and are often used for document navigation purposes by screen reading devices.

It is recommended that generic text such as “click here” or “read more” be avoided, as these will offer little meaning, especially when read out of context by a screen reader. Instead, we recommend links in code like:

<a href="https://www.andyhuntdesign.com/better-links">read our better links</a>

Keep your code concise

This can be quite tricky in long emails due to the nature of styling tables, but it’s important to make sure the emails is coded correctly without any unnecessary styling being added to elements. This will cause the emails to be heavier and run the risk of it not generating properly.

When coding up, always code in sections and add comments to the top and bottom of it. You can use online tools such as Dirty Markup to help spot any unclosed tags or validation issues should the sections get too bloated. It will also help you manually any styling that has doubled up.

Use a descriptive subject line

Subject lines should be meaningful, descriptive, concise and, if using personalisation, shouldn’t repeat the sender name. People with vision impairments rely on subject lines to determine whether an email message is relevant to their needs

Set the language attribute

By setting the language attribute of your email, you’re letting screen readers know how they should pronounce or display your content. Otherwise, they’ll read in their default device language which could cause them being hard to understand

Set your language attribute with the two letters that correlate to the language your email is written in — e.g. lang=”en” for English. Here’s a list of language codes should it ever be needed.

Set an email title

The TITLE tag sets the title on the tab of a webpage when someone views your email in their browser. It also provides additional context for people using screen readers.

Set presentation roles

Setting table roles to “presentation” enables screen readers to read your email in a way that makes sense to the user. Without this, it will interpret the table as data and read out the HTML code.

To do this, simply add the following code to each table:

<table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation">

If people have trouble viewing, reading, clicking on, or understanding your email campaigns, they won’t take the actions you expect.

Accessibility checklist

After following the rules set out on the Accessibility in Guide, use the following checklist based on W3C Web Content Accessibility Guidelines to make sure your email campaign is accessible prior to send.

Email content

Subject line is concise and descriptive	✓
Tables are optimised to preserve logical reading order	✓
Heading elements used	✓
Headings summarise content that follows	✓
Text colour contrast is sufficient	✓
Images have suitable alt attributes	✓
Link text is meaningful (not “read more” or “click here”)	✓

Desktop and Webmail

Content is fully keyboard accessible and demonstrates visual focus	✓
Images have suitable alt attributes	✓
Headings, paragraphs, lists and structural HTML markup is retained	✓
Reading order is logical	✓

Mobile

Email content can be resized using a pinch zoom gesture	✓
All content can be read using a device screen reader	✓
Change instructions to ‘click’ to ‘tap’	✓

Images

You should only use the following image formats:

SVGs have limited support.

Image paths

You’ll always need to use absolute paths for your images. You have to host images somewhere, it doesn’t matter whether it is on your own server or your ESP’s. Never use relative image paths.

Image dimensions

Explicitly state the width of an image to ensure that it displays at its intended size. Especially in Outlook, which can’t interpret an image’s size from the ﬁle. You can add a class to the image to make it responsive.

<img src="http://www.andyhuntdesign.com/path/to/image.jpg" width="600" class="mobile">

Other alternatives are the inline CSS Method:

<img src="http://www.andyhuntdesign.com/path/to/image.jpg" width="600" class="mobile">

Remove linked image borders

When you wrap your IMG tag with a link, some email clients will automatically add a blue border around the image.

To prevent blue borders, add border=”0″ to the image tag.

<img src="http://www.andyhuntdesign.com/path/to/image.jpg" border="0" width="600" class="mobile">

Gaps around images

Some designs call for images placed next to or on top of each other.

The easiest way to remove gaps (both horizontal and vertical) is to add style=”display: block; to the IMG tag:

<img src="http://www.andyhuntdesign.com/path/to/image.jpg" width="600" style=“display:block”>

Alt tags

Use the alt attribute to provide some contextual information about the images.

<img src="http://www.andyhuntdesign.com/path/to/image.jpg" alt="Description of the image" width="600" border="0" style="display: block;">

Retina display

Let’s say we have a photograph that needs to be 600×400 pixels. To make it appear crisp on Retina displays, save it out at least twice the intended size. In this case, we would export it at 1200×800 pixels. Then, in our code, we would just use the 600×400 sizing:

<img src="http://www.andyhuntdesign.com/path/to/retina-image.jpg" alt="Description of the image" width="600" border="0" style="display: block;">

Background Images

As a rule, emails shouldn’t have background images as Outlook doesn’t support them. However, sometimes they are unavoidable. To get them working you need to use Vector Markup Language (VML) alongside code that will allow the background image to display correctly in other mail clients as well.

The code creates a DIV to contain the VML background image, which in turn contains a table or cell that is set with the same background image using the standard HTML table background property. Outlook will ignore the table or cells background image and render the DIV’s VML background image, while other mail clients like Gmail and Yahoo will ignore the VML and render the table’s background image.

You can add emails to the full body of the email or to a single table cell.

Full body emails

Add the following right after the opening BODY tag:

<div style="background-color:#7bceeb;">
  <!--[if gte mso 9]>
  <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
    <v:fill type="tile" src="https://www.andyhuntdesign.com/image.jpg" color="#100030"/>
  </v:background>
  <![endif]-->
  <table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td valign="top" align="left" background="https://wwww.andyhuntdesign.com/image.jpg">

Then this right before the closing BODY tag.

</td>
</tr>
</table>
</div>

A single table cell

Then the closing TD tag with.

</div>
<!--[if gte mso 9]>
  </v:textbox>
</v:rect>
<![endif]-->
</td>

Please note with the single table cell version that you will need to define the width and height properties.

Always remember to update where you want the image in two places: within the HTML and within the VML, otherwise there is a risk that Outlook users will see the wrong image. You can also change the fill type to either stretch or contain the image inside.

Try and avoid using background images where possible. The VML above will help get them to show, but there will be a lot of trial and error to make things perfect

Buttons

Buttons with rounded corners that are used on websites can be replicated on email by using Vector Markup Language (VML), similar to the same what background images are incorporated

The rounded corners are not something which will work in Outlook, but my adding VML they will be able to work perfectly. As a fallback for Microsoft Outlook, (VML) is used within an Outlook-specific conditional comment. The VML creates a box around the link in Outlook, then styles the anchor tag to create the button design for everyone else.

There are two approaches you can take to created a VML button, one which requires you to make. One which incorporated with VML within the button and one which creates two buttons, one in VML for Outlook and another coded for all other users

There are some nuances to using VML to create the buttons which can be frustrating. Width and height of the button must be declared, so any change to the copy of the CTA would require changes to the dimensions of the button. Also, more complex versions of the VML button require two URLs that need to be changed, one for the main button and one for the VML.

<!--[if mso]>
<v:roundrect
xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:w="urn:schemas-microsoft-com:office:word" href="#" style="height:48px;v-text-anchor:middle;width:220px;" arcsize="30%" stroke="f" fillcolor="#5e3fe1">
<w:anchorlock/>
<center style="font-family: Fauna One, sans-serif ;font-size:11px;font-weight:bold;">
<![endif]-->
<a data-linkto="https://" href="#" style="color:#ffffff;text-decoration:none;-webkit-text-size-adjust: none; Margin: 0; background-color: #5e3fe1; border-radius: 9px; font-weight:500; display: block; font-family: Fauna One, sans-serif; font-size: 11px; line-height: 48px; letter-spacing:3px; margin: 0; padding: 0; text-align: center !important; width: 220px; margin:0 auto" target="blank" title="">
  BUTTON EXAMPLE
</a>
<!--[if mso]>
</center>
</v:roundrect>
<![endif]-->

BUTTON EXAMPLE

To generate VML code, please use https://buttons.cm/

VML is a great workaround but use with caution as some link tracking tools may not work with it applied

Typography

When using semantic markup, be wary that to use the correct doctype at the top of the template, otherwise there is a risk of styles being overruled by each clients own way of rendering the tags. The best doctype to use is XHTML 1.0 Transitional. This contains all HTML elements and attributes, although, it utilised features such as presentational or deprecated elements.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

All styles should be applied to ‘td’, with only really padding and margin attributes being adding to any of h tag or tag.

<td style="color: #000000; font-family: 'Fauna One', sans-serif; font-size: 18px; font-weight: normal; line-height: 22px;">
  <p>Here is some example text</p>
</td>

This approach will be applied to all of our text with the exceptions of:

Links, which will be styled using the ‘a’ tag.
Text within a section that needs special styling, which will be handled with the ‘span’ tag.
Things like dates, times, phone numbers, etc. that some email clients insist on making links.

If a table cell contains text, it should always have the following styles deﬁned:

color
font-family
font-size
font-weight
line-height

An example with links and special styling should look like below:

<td style="color: #000000; font-family: 'Fauna One', sans-serif; font-size: 18px; font-weight: normal; line-height: 22px;">
  <p>Here is <span style="font-weight:600">some</span> example <a href="#" style="color:#666666; text-decorstion:underline">text</a></p>
</td>

Outlook

Almost all version of Outlook do not support web fonts nor do they support fall back font and will default any call for them to Times New Roman. This means that any Google font or Adobe font won’t render, and neither will any fall backs. Outlook will only Microsoft standard font.

This means adding in conditional styling to for Outlook users.

The easiest way to do this is to have a single line calling everything in the body, table and td to be set to Arial.

<!--[if mso]>
  <style type="text/css">
      body,
      table,
      td {
        font-family: Arial, sans-serif;
      }
  </style>
<![endif]-->

It can even be more granular if needed now that heading and paragraph tags have been implemented as they can be targeted by the conditional tag.

<!--[if mso]>
  <style type="text/css">
      body,
      table,
      td {
        font-family: Arial, sans-serif;
      }
      h1 {
        font-family: Georgia, serif;
      }
  </style>
<![endif]-->

Attribute Styling

External CSS

By default, Outlook.com centres your email by placing it inside a div with a class named “ExternalClass” using the styles display:inline-block; line-height: 131%. To overwrite these styles and a number of additional fixes simply include the following CSS .ExternalClass within the HEAD of your emails HTML:

<style>
  .ExternalClass { width: 100%;}
  .ExternalClass,
  .ExternalClass p,
  .ExternalClass h1,
  .ExternalClass h2,
  .ExternalClass h3,
  .ExternalClass span,
  .ExternalClass font,
  .ExternalClass td,
  .ExternalClass div {line-height:110%;}
</style>

Font colour

Use the six-character hexadecimal value.

color: #ffffff;

Font weight

A font’s weight can be declared using either a keyword (e.g. normal, bold, bolder) or a numerical value (e.g. 100, 200… 900).

<td style="color: #000000; font-family: 'Fauna One', sans-serif; font-size: 18px; font-weight: 600; line-height: 22px;">
  <p>Here is some text</p>
</td>

Line-height

Line height can be styles using either pixels or using a number.

Animation

CSS Animation

CSS animations have been around for years, but are only recently seeing wider use both in the web and email industries as updated versions of client and devices are released. The reliance for animation within emails is usually done by implemented gifs.

According to the [Litmus State of Email Survey](https://www.litmus.com/resources/2020-state-of-email-report-fall-edition/), 82% of brands use animated GIFs in their campaigns, whereas only 30% use CSS animations.

Although animated gifs have wider support, CSS animations have a number of benefits when used properly.

As mentioned in the Animated Gif section, the load time can be quite slow. CSS animations, however, are code. Being text-based, they are quick to load and play smoothly on most modern devices.

Perhaps the most important benefit of using CSS animations is that they allow you to create more interactive experiences for users. Since CSS animations can be tied to specific user behaviours — like hovering over a CTA or tapping on an element in an email — they can be used to cycle through content and different visual states of an email.

Although CSS animations use only a few core CSS properties, those properties can be used to create extremely powerful and impressive emails, where support is available.

We can use two types of animations for CSS animation: transitions and keyframe animations.

Transitions

CSS transitions do exactly what the name implies: They transition an element from one state to another, animating that element in the process.

On this example, that there are two states to the button. The normal one and the :hover state that swaps those background colours. The transform property has also been added to increase the size of the button on hover. Applying the CSS transition property to the default button state, we can add a nice transitional animation between the two states

<style>
.ex_tran_btn {
 width: 220px;
 font-family: Fauna One, sans-serif; 
 font-size: 11px; 
 line-height: 48px; 
 letter-spacing:3px;
 color:#ffffff;
 text-decoration:none;
 text-align: center;
 -webkit-text-size-adjust: none; 
 margin: 0 auto; 
 padding: 0;
 background-color: #5e3fe1; 
 border-radius: 9px; 
 display: block; 
 transition: all 0.6s ease;
}
.ex_tran_btn:hover {
 background-color: #B60F8F;
 transform: scale(1.1, 1.1);
}

</style>

BUTTON EXAMPLE

The beauty of CSS transitions is that they are so simple. With a few lines of code, you can beautifully animate between two states. By adding even more CSS, some magic can be created within emails.

Keyframes

Keyframe animations are more complex than transitions, but that complexity comes with more powerful productions.

The elements of an animation are set within the class or ID targeting an element.

.btn {animation-name: pulse; animation-duration: 1s; animation-iteration-count: infinite;}

Keyframes declaration:

@keyframes pulse {
0% {box-shadow: 0 0 0 0px rgba(1, 0, 0, 0.5); }
100% {box-shadow: 0 0 0 5px rgba(0, 0, 0, 0); }
}

The properties that need to be used for keyframe animations are:

animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function

Please note that not all of them are necessary in every CSS animation you create.

CSS animation support

Although CSS animations have many benefits, the major downside of using them is limited support in email clients. Please keep in mind where CSS animation can be supported with the guide below:

	Web	Email
Apple Mail	✓	✓
Outlook	⤫	⤫
Outlook for Mac	✓	✓
Gmail	⤫	⤫
AOL	⤫	⤫
Yahoo	⤫	⤫
Outlook 365	⤫	⤫
Apple Mail for iOS	✓	✓
Android	✓	✓
Gmail App	⤫	⤫
Outlook App	✓	✓

When CSS animations are not supported, they fall back gracefully. In email clients without support, the HTML elements still display, they just don’t animate. The email is still functional.

Outlook, as well as others, will not be your friend with animation. It’s important to check where CSS animations are possible and what fall backs are needed

Animated gifs

Animated gifs have wide support in emails only lacking support in Outlook. Microsoft have updated its support for animated gifs, but this only affects Office365 with them working properly sporadically. Outlook 2007-2019 still don’t support animated gifs.

The animation will not play and the user will only see the first frame of the gif, which can be a poor experience if the first frame is either a colour or block or in the middle of a tween. There are two ways to get round this to improve the experience for Outlook users.

Improve content of first frame
The simplest way to deal with gif that don’t play doesn’t involve any development work. If a gif doesn’t play then it will be stuck on the first frame, so the design can be revisited so the first frame of the animation looks close to a still of what the animation is intended to be.
Outlook conditional images
You can replace the animated gif with a shot of the last frame for Outlook only users by using conditional comments. The best practice is to apply the condition to the table cells.

<!--[if mso]>
<td>
  <img src="https://www.andyhuntdesign.com/not-animated.jpg">
</td>
<![endif]-->

<!--[if !gte mso 12]><!-- -->
<td>
    <img src="https://www.andyhuntdesign.com/animated.gif">
</td>
<!--<![endif]-->

Always be aware of the load times and file size of the animated gif. Too large a file means a longer wait time. A users engagement when they click on an email is less than two seconds, so the load time is important. Animated gifs tend to be on the heavier side when it comes to file weights, and can be slow to load and display on mobile devices – especially on those who are using data.

Email development best practices

These are some of the protocols I follow from a purely development point of view rather than strategic. The following hints, tips and paths to follow will help you develop robust and fully working emails across the board

26 February 2023

Contents

Design System

Email basics

Tables

CSS

Comments

Outlook

Yahoo

Android

Test and test again

Email layout

Email is not the web!

Basic email structure

CSS

CSS Guidelines

Tables

Table Guidelines

Table styling

Table

Row

Column/TD, TH

Spacing content

Multiple columns

Accessibility

Maintain a logical reading order

Use semantic markup

Provide text alternatives for images

Feature meaningful link text

Keep your code concise

Use a descriptive subject line

Set the language attribute

Set an email title

Set presentation roles

Accessibility checklist

Email content

Desktop and Webmail

Mobile

Images

Image paths

Image dimensions

Remove linked image borders

Gaps around images

Alt tags

Retina display

Background Images

Full body emails

A single table cell

Buttons

Typography

Outlook

Attribute Styling

External CSS

Font colour

Font size

Font weight

Line-height

Animation

CSS Animation

Transitions

Keyframes

CSS animation support

Animated gifs

Leave a Reply Cancel reply

Promo code claiming in Salesforce

MORE NONSENSE

Related Articles

Promo code claiming in Salesforce

15 February 2023

Simple Mailchimp Template

29 August 2020

Do you like this?

Share the love