Template Design Recommendations

Unlike building a modern website, the layout and structure of a Template is built around using table elements.

CSS layouts don't work in some of the most commonly used email applications such as Outlook 2007/2010/2013, Gmail and Lotus Notes and others.

These apps cannot handle floated elements and inconsistently interpret margins and padding so using div tags to control layout is unfortunately not a solution.

Certain email apps such as Gmail will strip out CSS in the style tag, so the most reliable way to guarantee your email displays consistently across email applications is to write inline CSS styles.

CSS styles on uploaded Templates are automatically inlined by the application but it is good practise to do so as you code the HTML.

It's recommended that Templates should contain a mix of both text and image content. It is important not to send Templates containing one large image or entirely made up of multiple images.

Overuse of image content when combined with your overall sender reputation can mean that emails go directly to the Spam folder instead of the recipients' Inbox.

Additionally, certain email applications (including Gmail, Hotmail, Yahoo) don't display images by default meaning your content doesn't get seen at all.

If you're relying on an image to convey an important message or promotion within your Template you should consider how people will see that when images are disabled.

For desktop email applications, the recommended maximum Template width is circa 550-600px.

This is found to give the optimal display within web and desktop user interfaces which have both mailbox sidebars and preview windows, such as Microsoft Outlook.

For narrower widths it's recommended to adjust the layout of the Template in order to display effectively on tablet and mobile devices with smaller screens/display widths.

This can be achieved by either using Media Queries (Responsive) or by structuring a Template with percentage widths only (Fluid).

Responsive designs generally use media queries to modify the layout of a Template, adjust the font size, size of images, size of buttons and hide or show content depending on the device used to view the email.

Allowing for Templates to display correctly across different device widths and so complex layouts and adaptations can be achieved.

It's worth noting that certain email clients & devices do not support media queries, such as:

• Android Yahoo! Mail app
• iPhone Yahoo! Mail app
• Android Gmail App
• iPhone Gmail App
• Samsung Galaxy S3+
• Windows Phone 7
• Windows Phone 8

Fluid Templates use percentage based widths to make tables and images adapt to the devices screen size.

This design approach differs from media queries as it can't alter the layout or content of an email which makes it potentially more restrictive than responsive Templates. What Fluid design is good at though is for allowing the content to flow and fill space of the containing table.

Using a Fluid design approach is useful when you know your Users view emails with applications and devices that do not support media queries.

A growing number of email applications & devices display a snippet of the Template content as well as the From Email Address and subject line when it is displayed in the recipients inbox.

Preview text is determined by the first few lines of text found within the body of the Template. It's therefore worth planning what introductory copy a Template has in place in order to make best use of this. Think of this space as a second supporting subject line and try to avoid repetition of the subject.

A common approach is to use a hidden div tag that contains the intro text and is non-visible otherwise.

Some email applications disable image downloads by default. Slow connections can also prevent images from loading within a timely manner and visually impaired users with screen readers could miss information displayed within image content.

The use of ALT text is important and provides some information about the content of the image. Even if recipients don't have image downloads enabled, they will still have some context of the message being conveyed in the image content.

Inline CSS styles on the img tag can be used to style the ALT text to match the branding and styles within the Template.

One of the most important elements within a Template is a primary call to action.

It is therefore important to consider how these are displayed on both desktop and mobile layouts. It's often said that CTAs on mobile devices should be a minimum of 44px in height to allow them to be 'tappable' by most touch screen devices. Make the most of responsive design and make CTAs full width on mobile devices.