role=drinks ams meetup: 5 pro tips for making your email more accessible
TRANSCRIPT
eROI · PERFORMANCE IS ART · eROI.COM
FULL BLEED ANCHORS
MARGINS
MARGINS
5 Pro Tips for Making Your Email More Accessible
Heidi Olsen @swisswebmiss
2
WHO IS SHE?
Hallo! I’m Heidi.■ Senior Developer @ eROI■ Cat Lover■ World Traveler■ Fun Professional■ #EmailGeek
I live in Portland, Oregon(its cool, but not
Amsterdam cool)
3
FULL BLEED ANCHORS
MARGINS
MARGINS
WHAT IS AN eROI?
We craft compelling digital experiencesfor email, web, and social.
4
FULL BLEED ANCHORS
MARGINS
MARGINS
WHAT IS AN eROI?
5
FULL BLEED ANCHORS
MARGINS
MARGINS
#EMAILGEEK
Web Email
6
FULL BLEED ANCHORS
MARGINS
MARGINS
WEB VS. EMAIL DEVELOPMENT
<style>body {
background: #7bceeb url("https://eroi.com/image.jpg") no-repeat top center;
}</style>
<body><!-- Actual content -->
</body>
Web Email
7
FULL BLEED ANCHORS
MARGINS
MARGINS
WEB VS. EMAIL DEVELOPMENT
<style>body {
background: #7bceeb url("https://eroi.com/image.jpg") no-repeat top center;
}</style>
<body><!-- Actual content -->
</body>
<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://eroi.com/image.jpg" color="#7bceeb"/> </v:background> <![endif]--> <table align=”center” width="100%" cellpadding="0" cellspacing="0" border="0" role=”presentation”> <tr> <td valign="top" align="left" background="https://eroi.com/image.jpg" style=”background:url(https://eroi.com/images.jpg no-repeat top center;”>
<!-- Actual content --> </td></tr></table></div>
8
FULL BLEED ANCHORS
MARGINS
MARGINS
WEB VS. EMAIL QA
Web11 variations
9
FULL BLEED ANCHORS
MARGINS
MARGINS
WEB VS. EMAIL QA
Web11 variations
Email60+ variations
10
FULL BLEED ANCHORS
MARGINS
MARGINS
INNOVATION OPPORTUNITIES
Taco Bell BreakfastWe created a scrolling experience in email, something that has never been done before. Accomplished with CSS positioning and graceful fallbacks, the email was a huge hit for subscribers and the email marketing community.
11
FULL BLEED ANCHORS
MARGINS
MARGINS
API INTEGRATION
Random RiffsA Mad Libs style email acquisition campaign made possible through API calls and triggered send definitions.
FULL BLEED ANCHORS
MARGINS
MARGINS
5 PRO TIPS FOR ACCESSIBLE EMAIL
Let’s get started...
See? Not so bad.
¯\_(ツ)_/¯
13
FULL BLEED ANCHORS
MARGINS
MARGINS
<table role=”presentation”>
1. Know Your Role
5 PRO TIPS FOR ACCESSIBLE EMAIL
14
FULL BLEED ANCHORS
MARGINS
MARGINS
2. Code When You Can
5 PRO TIPS FOR ACCESSIBLE EMAIL
15
FULL BLEED ANCHORS
MARGINS
MARGINS
2. Code When You Can
<div><!--[if mso]> <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://site.com" style="height:50px;v-text-anchor:middle;width:200px;" arcsize="10%" strokecolor="#000000" fillcolor="#FFFF00"> <w:anchorlock/> <center style="color:#000000;font-family:sans-serif;font-size:13px;font-weight:bold;">CLICK FOR DEALZ!</center> </v:roundrect><![endif]--><a href="http://site.com"style="background-color:#FFFF00;border:1px solid #000000;border-radius:5px;color:#000000;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:50px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;mso-hide:all;">CLICK FOR DEALZ!</a></div>
5 PRO TIPS FOR ACCESSIBLE EMAIL
Bulletproof Buttons via Campaign Monitor: https://buttons.cm/
16
FULL BLEED ANCHORS
MARGINS
MARGINS
3. Don’t Be Too Flashy
5 PRO TIPS FOR ACCESSIBLE EMAIL
17
FULL BLEED ANCHORS
MARGINS
MARGINS
5 PRO TIPS FOR ACCESSIBLE EMAIL
<!DOCTYPE html>// Add relevant ‘lang’ attribute<html lang="nl" xml:lang="nl"> <head>// Define a charset for special characters<meta charset=”utf-8" /> // Enable zoom<meta name="viewport" content="width=device-width, initial-scale=1.0" />
// Use headings and paragraph tags with an inline reset <h1 style=”padding:0;margin:0;mso-line-height-rule:exactly;”></h1> <p style=”padding:0;margin:0;mso-line-height-rule:exactly;”></p>
4. Be Semantic
18
FULL BLEED ANCHORS
MARGINS
MARGINS
5. Send Multipart Emails (MIME)
5 PRO TIPS FOR ACCESSIBLE EMAIL
19
FULL BLEED ANCHORS
MARGINS
MARGINS
CLOSING THOUGHTS
Bonus Tip: Switch Perspectives
TESTING TOOLS:■ Accessible Email HTML Tester:
http://www.accessible-email.org/■ Litmus Email Preview Tool:
https://litmus.com/
SCREEN READERS FOR EMAIL:■ Chrome with VoiceOver on Mac■ Chrome with ChromeVox on Chromebooks■ Firefox with NVDA or JAWS on Windows■ Window-Eyes for Windows OS
20
FULL BLEED ANCHORS
MARGINS
MARGINS
FURTHER RESOURCES
COMMUNITY:■ Use #EmailGeeks + #a11y on Twitter■ EmailGeeks Slack Channel:
https://email.geeks.chat/
BLOGS:■ Inclusive Design:
https://www.e-village.nl/blogitem/inclusive-design-in-email■ 10 Tips on Accessibility in Email:
http://eroi.com/ideas/10-tips-on-accessible-email/■ Git Directory of Accessible Email Documentation by William Heinen:
https://github.com/wilbertheinen/accessible-email-documentation
Keep working towards being inclusive.
21
FULL BLEED ANCHORS
MARGINS
MARGINS
Voor deUitnodiging!