email best practice

HTML Email

Best Practiceby Josh Green

@pixelpanda

Why do we need it?

Benefits of best practice

- Allows for larger volumes to be sent

- Accessible to all ISPs

- Message not reliant on images turned on

- Device agnostic

- Leaves the user in control

- Instant recognition of brand

The email journey

How people read email

Sender name Subject line Preview pane Entire email Interaction Closing

- Recipient reads who the email is from

- Then the subject line

- The preview pane

- The entire email possibly, with images off first then on (depending on mail client)

- Interaction a click through, or response if a personal mail

- Closing interaction hopefully a positive conversion and not an unsubscribe

General guidelines

Envelope

- Include your brand name in the friendly from. The brand or the company name is immediately recognisable to the recipient.

- A recognisable “from” email address should be used. Subject lines need to be tested and used accordingly.

Pre-header

- Web friendly link ensures that all subscribers can access the information as you intended, even if the email they received does not render properly.

- Pre-header text amplifies the message and delivers key information.

- Unsubscribe link needs to be prominent in order to discourage the recipient from using the spam complaint button.

- It is worth including the offer link in the pre-header as this allows people to interact with the mail immediately.

Understanding the elementsFriendly from Subject line Pre header

Pre headerSubject line

Reply address

Friendly from

Reply address

General guidelines

Body

- Content in preview pane should display the call to action in text and have multiple links. The top content needs to be motivating enough to encourage recipient to scroll down.

- Good balance between text and images. Content should not be dependent on images being enabled. Use ALT tags to describe the images.

- Text should be all formatted as text. Use standard, most commonly supported fonts. Examples of these are Arial, Times New Roman, Georgia, Verdana and Tahoma.

- Buttons should be created as text on a solid colour background. Advantage – call to action is visible regardless of image enablement.

- Background images and gradients should be avoided where possible these have to be made into regular images and so will not first appear if images are disabled.

- The purpose of the email and main offer needs to be prominent, clear and concise.

- Share content via forward to a friend and with links to social media sites.

- Text copy is a must to help deliver the message to recipients who receive only receive text emails.

PizzaExpress

- This is an email redesigned to take advantage of flat web colours, descriptive alt tags and email safe fonts.

General guidelines

Footer

- Include a physical postal address to boost creditability. This is legal requirement in the United States and the UK.

- Display the recipient's email address. Displaying the address helps boost the email's credibility and helps recipients who may be receiving duplicate copies under several different email addresses unsubscribe from the correct address.

- A small explanation informing the recipient how they entered the database and the URL where they signed up.

- A link to the online privacy policy to reassure the customer their email address will not be shared with or sold to any other organisation without their express consent.

- The unsubscribe link.

Confidential

Summary

- Include a Pre-header. This contains important information and allows the recipient to immediately interact with the email.

- Design the email with a good balance between plain text and images.

- Text wherever possible should be plain text and rendered with web safe fonts.

- Buttons should be styled links and plain text.

- Avoid design cruft as all these graphical elements need to be rendered as images.

- Display the recipients email address.

Confidential

Confidential

Thank youBackground by Alte Mo htttp://subtlepatterns.com

PizzaExpress for the HTML email