role=drinks AMS Meetup: 5 Pro Tips for Making Your Email More Accessible
•
0 likes•296 views
Lightning talk about how to make your emails more accessible for the role=drinks accessibility meeting in Amsterdam, 17 June 2017.
More Related Content
What's hot
What's hot (20)
Similar to role=drinks AMS Meetup: 5 Pro Tips for Making Your Email More Accessible
Similar to role=drinks AMS Meetup: 5 Pro Tips for Making Your Email More Accessible (20)
More from eROI
More from eROI (6)
Recently uploaded
Recently uploaded (20)
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.
- 4. 4 WHAT IS AN eROI?
- 5. 5 #EMAILGEEK
- 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>
- 8. 8 WEB VS. EMAIL QA Web 11 variations Email
- 9. 9 WEB VS. EMAIL QA Web 11 variations Email 60+ variations
- 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. ¯_(ツ)_/¯
- 13. 13 <table role=”presentation”> 1. Know Your Role 5 PRO TIPS FOR ACCESSIBLE EMAIL
- 14. 14 2. Code When You Can 5 PRO TIPS FOR ACCESSIBLE EMAIL
- 15. 15 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:13p x;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-b lock;font-family:sans-serif;font-size:13px;font-weight:b old;line-height:50px;text-align:center;text-decoration:n one;width:200px;-webkit-text-size-adjust:none;mso-hide:a ll;">CLICK FOR DEALZ!</a></div> 5 PRO TIPS FOR ACCESSIBLE EMAIL Bulletproof Buttons via Campaign Monitor: https://buttons.cm/
- 16. 16 3. Don’t Be Too Flashy 5 PRO TIPS FOR ACCESSIBLE EMAIL
- 17. 17 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. 18 5. Send Multipart Emails (MIME) 5 PRO TIPS FOR ACCESSIBLE EMAIL
- 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.