Inbound Marekting 2.0 - The Paradigm Shift in Marketing | Axon Garside
role=drinks AMS Meetup: 5 Pro Tips for Making Your Email More Accessible
1. eROI · PERFORMANCE IS ART · eROI.COM
5 Pro Tips for Making Your Email
More Accessible
Heidi Olsen @swisswebmiss
2. 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. 3
WHAT IS AN eROI?
We craft compelling digital experiences
for email, web, and social.
6. Web Email
6
WEB VS. EMAIL DEVELOPMENT
<style>
body {
background: #7bceeb
url("https://eroi.com/image.jpg")
no-repeat top center;
}
</style>
<body>
<!-- Actual content -->
</body>
7. Web Email
7
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/imag
es.jpg no-repeat top center;”>
<!-- Actual content -->
</td></tr></table></div>
10. 10
INNOVATION OPPORTUNITIES
Taco Bell Breakfast
We 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. 11
API INTEGRATION
Random Riffs
A Mad Libs style email acquisition
campaign made possible through
API calls and triggered send
definitions.
12. 5 PRO TIPS FOR ACCESSIBLE EMAIL
Let’s get started...
See? Not so bad.
¯_(ツ)_/¯
19. 19
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. 20
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.