https://flic.kr/p/idKefi

Responsive HTML Email

Benjy StantonFreelance web designer

Responsive HTML Email

My Process

https://flic.kr/p/idJmHY

1. Gather content

2. List elements on paper

3. Sketch wireframes

4. Mock-up design

5. Write the code

6. Inline CSS

7. Test in web browsers

8. Test with ‘real’ email clients

9. Test on virtual email clients

10. Lift-off!

Design with data

https://flic.kr/p/i3Hm7i

http://emailclientmarketshare.com/

Progressive enhancement

Start with plain text• Encourages a ‘Content First’ approach

• Not having a plain text will anger the spam filters

• Some older email clients can’t handle html

• Some people prefer plain text and will set their email clients accordingly

Images off by default• Most email clients block images by default

• Content should make sense with images off

• Style ALT text so email looks good even without images

Link to web view• People may have images turned off

• The html may not be rendering properly

• It’s a handy way to share the email

Accessibility

– Mark, Rebelmail

“People spend a lot of time worrying about email clients with 1% usage; accessibility is a much bigger issue”

https://www.campaignmonitor.com/guides/accessibility/

• Tables are optimised to preserve logical reading order

• Heading elements used

• Text colour contrast is sufficient

• Subject line is concise and descriptive

• Headings summarise content that follows

• Link text is meaningful (not “read more” or “click here”)

http://colororacle.org/

Back to the design process

Client brief• main objective of the email

• target audience

• an early draft of the content

• guidance on potential design style(including imagery and brand guidelines)

Start with real content

https://flic.kr/p/ic3Hi9

• Logo

• Main image

• Heading

• Paragraph (or two)

• A main call to action

• Contact details

• Social media icons

• Small print

• Unsubscribe link

• View in a browser link

Make a list• List the elements on some paper

• Mark them up as h1, p, button etc.

• develop a hierarchy and a source order(good for mobile first approach)

How big should an email be?• 600px wide for “desktop” email clients

• I’ve already decided on the source order, so no real need to mock-up at narrower widths

• Height and weight: smaller the better

Keep Things Simple• Use just 1 or 2 columns if you can

• Be generous with spacing

• Complicated designs take ages to test and debug

Consider how things will look in the inbox

Building

http://zurb.com/ink/

http://zurb.com/ink/inliner.php

Inline your CSSWe need to do this because Gmail strips CSS from the <style> tag.

http://inliner.cm/

Use tablesUse <table></table> because Outlook

has poor support for CSS based layouts

https://www.campaignmonitor.com/guides/coding/guidelines/

Attribute selectorsUse attribute selectors for any styles

contained in your media queries to make sure Yahoo! ignores them.

https://www.campaignmonitor.com/guides/mobile/coding/

Use !importantUse !important in your media queries to

make sure the styles override any inline styles

https://www.campaignmonitor.com/guides/mobile/coding/

Checklist• Proof read the copy

• Check phone numbers and email addresses

• Check you’ve included alt text and titles attributes

• Remove unused CSS

• Optimize images

• Check email with images turned-off

• Check images and links have absolute paths

http://emailchecklist.org/

Testing!

https://flic.kr/p/hLD7cN

http://mailchimp.com/

Test on real devices• Gmail.com

• Outlook.com

• Yahoo.com

• AOL.com

• iPhone 5c

• iPad

• Mail (OSX)

• Thunderbird (OSX)

• Outlook (Windows)

• Windows Live Mail

http://benjystanton.co.uk/email-test.pdf

Inspecting is trickyTest in old browsers like IE7 instead

Outlook for freeStart a Office trial, then don’t renew

it. You still get to use Outlook for testing. Shhhh, don’t tell anyone.

http://mailchimp.com/features/inbox-inspector/

Stuck? Check the interwebs

• Campaign Monitor

• Litmus

• Email on Acid

Beating spam filters• Use test services provided by ESPs

• Use www.mail-tester.com

• Write good content

Nearly there…

https://flic.kr/p/hVRbV8

Further ReadingMaking Responsive HTML Emails benjystanton.co.uk/blog/making-responsive-html-emails/

The Ultimate Guide to CSScampaignmonitor.com/css/

The Email Design Guidemailchimp.com/resources/email-design-guide

Can Email Be Responsive?alistapart.com/article/can-email-be-responsive

Five Ways to Test an Emaillitmus.com/blog/five-ways-to-test-an-email

Further ReadingEmail Design Reviewemaildesignreview.com

Let’s fix email letsfixemail.com

The design of government emailsdesignnotes.blog.gov.uk/2014/09/04/the-design-of-government-emails

Litmus Email Builder litmus.com/email-builder

What you need to know about using fonts in email adestra.com/what-need-know-using-fonts-in-email

Further Reading6 Email Client Hacks You Need To Knowfreshinbox.com/blog/6-email-client-hacks-infographic

Best Practices for Plain Text Emails litmus.com/blog/best-practices-for-plain-text-emails-a-look-at-why-theyre-important

The Ultimate Guide to Styled ALT Text in Emaillitmus.com/blog/the-ultimate-guide-to-styled-alt-text-in-email

Image Blocking in HTML Emailcampaignmonitor.com/resources/will-it-work/image-blocking/

Color blindness and email: Are you designing for accessibility? www.campaignmonitor.com/blog/post/4267/color-blindness-accessibility-and-the-vision-impaired-in-email-design

Thanks!benjystanton.co.uk

@benjystanton

https://flic.kr/p/hXzsG9