email design 101
Post on 17-Oct-2014
4.144 views
DESCRIPTION
HTML email design basics, avoiding spam filters, and measuring success, and good email design examples.TRANSCRIPT
![Page 1: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/1.jpg)
Email Marketing 101How Not To Screw Up & Get Blacklisted
Like An Evil Spamming Scumbag
Thursday, January 21, 2010
![Page 2: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/2.jpg)
Who is this guy?
• Ben Chestnut
• Co-founded The Rocket Science Group in 2000
• Built MailChimp in 2001
• Currently 40k users, +65k managed lists, +75M subscribers
Thursday, January 21, 2010
![Page 3: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/3.jpg)
What We’ll Discuss:
•Design obstacles, workarounds
•Measuring good design
•Good email examples
Thursday, January 21, 2010
![Page 4: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/4.jpg)
Anti-Virus Software
Thursday, January 21, 2010
![Page 5: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/5.jpg)
Anti-Virus Software• No JavaScript
• No ActiveX
• No Flash
• No embedded movies
• No sound files
• Nothing fancy-schmancy. Sorry.
Thursday, January 21, 2010
![Page 6: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/6.jpg)
Email Readers
Thursday, January 21, 2010
![Page 7: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/7.jpg)
Thursday, January 21, 2010
![Page 8: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/8.jpg)
Thursday, January 21, 2010
![Page 9: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/9.jpg)
Thursday, January 21, 2010
![Page 10: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/10.jpg)
Thursday, January 21, 2010
![Page 11: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/11.jpg)
Thursday, January 21, 2010
![Page 12: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/12.jpg)
Thursday, January 21, 2010
![Page 13: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/13.jpg)
Webmail Services• Strip your <BODY>, so no bg images. Use
embedded tables instead.
• Strip your <HEAD>, so no CSS, no JavaScript, etc.
• Strip your CSS, so you’ve gotta INLINE it.
• Because all that would interfere with their web app interface.
Thursday, January 21, 2010
![Page 14: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/14.jpg)
Desktop Clients
• Upgrades every year that break stuff
• Outlook 2007 using Word, not IE
• Old installations and patches
• Legacy code (from the .RTF days)
• User-specific settings
Thursday, January 21, 2010
![Page 15: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/15.jpg)
Preview Panes
Thursday, January 21, 2010
![Page 16: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/16.jpg)
Thursday, January 21, 2010
![Page 17: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/17.jpg)
Outlook2003 - Horiz.
Thursday, January 21, 2010
![Page 18: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/18.jpg)
Outlook2003 - Vertical
Thursday, January 21, 2010
![Page 19: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/19.jpg)
Thunderbird - Horizontal
Thursday, January 21, 2010
![Page 20: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/20.jpg)
Yahoo Mail - Horizontal
Thursday, January 21, 2010
![Page 21: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/21.jpg)
Windows Live Hotmail - Vertical
Thursday, January 21, 2010
![Page 22: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/22.jpg)
Thursday, January 21, 2010
![Page 23: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/23.jpg)
Thursday, January 21, 2010
![Page 24: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/24.jpg)
Email Reader Tips
• Design like it’s 1999
• Simple tables, no CSS-Positioning
• Inline CSS only
• Fail gracefully
• Design for tiny preview panes
Thursday, January 21, 2010
![Page 25: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/25.jpg)
Image Blocking
Thursday, January 21, 2010
![Page 26: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/26.jpg)
Thursday, January 21, 2010
![Page 27: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/27.jpg)
• Kids open email inbox, see nasty stuff.
• Parents complain.
• So images are now blocked by default.
Why? Porn Spam.
Thursday, January 21, 2010
![Page 28: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/28.jpg)
Design Implications?
Thursday, January 21, 2010
![Page 29: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/29.jpg)
Design Implications
• All your pretty pictures are OFF by default.
• Assume recipients are too lazy to turn them ON
• ALT-text can be your friend (sometimes)
• However, if you get on their trusted-senders list, they’re ON by default.
Thursday, January 21, 2010
![Page 30: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/30.jpg)
Thursday, January 21, 2010
![Page 31: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/31.jpg)
Trusted Sender
Thursday, January 21, 2010
![Page 32: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/32.jpg)
What’s this about?
Thursday, January 21, 2010
![Page 33: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/33.jpg)
“Good thing I clicked.”
Thursday, January 21, 2010
![Page 34: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/34.jpg)
Thursday, January 21, 2010
![Page 35: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/35.jpg)
Spam Filters
Thursday, January 21, 2010
![Page 36: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/36.jpg)
The Trick:
1. Open up your junk folder.
2. Look at what spammers do.
3. Don’t do what they do.
Thursday, January 21, 2010
![Page 37: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/37.jpg)
Don’t do this:
• YELL IN ALL CAPS! WOW!
• Use excessive exclamation points!!!!!
• get cr3at1v3 with sp3ll1ng v14gra
• send image-only emails to trick filters
Thursday, January 21, 2010
![Page 38: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/38.jpg)
Spammy Criteria ScoreAttempts to disguise the word 'viagra' 2.8Two or more drugs crammed together into one word 0.5Subject is all capitals 0.76Subject line starts with Buy or Buying 0.5HTML font size is huge 1.76HTML has a low ratio of text to image area 1.73Frontpage used to create the message 0.5Money back guarantee 2.05HTML has "tbody" tag 1.01
Spam Assassin Criteria
Stay below 3.
Thursday, January 21, 2010
![Page 39: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/39.jpg)
Server Filters
• IronPort/Senderbase: data from 25% of world’s Internet traffic
• All over globe, and they talk to each other
• Cloudmark, Barracuda, Postini
• High-level filtering: reputation, suspicious activity, fingerprinting
Thursday, January 21, 2010
![Page 40: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/40.jpg)
Thursday, January 21, 2010
![Page 41: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/41.jpg)
Thursday, January 21, 2010
![Page 42: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/42.jpg)
Spam Complaints• If 0.1% complain, you’re
blocked.
• You need to know when you’re reported, and clean your list
• Get on feedback loops (FBLs)
• Prevent FBL complaints...
Thursday, January 21, 2010
![Page 43: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/43.jpg)
Thursday, January 21, 2010
![Page 44: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/44.jpg)
Permission reminder
Thursday, January 21, 2010
![Page 45: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/45.jpg)
Tips• Avoid too many
spammy, “sales-y” words (FREE!!! NOW!!!!)
• Design for “image: FAIL”
• Don’t get lazy with your design work
• Only send permission-based marketing, to avoid FBL complaints
• Make sure to include a permission reminder in email footer
• Avoid sending to old lists (no more than 6 months old). Try segmenting on “actives”
Thursday, January 21, 2010
![Page 46: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/46.jpg)
Measuring Good Design
• Open Rate
• Click Rate
• ROI (ka-chings)
Thursday, January 21, 2010
![Page 47: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/47.jpg)
Open Rates
Thursday, January 21, 2010
![Page 48: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/48.jpg)
Tracking Opens• Transparent .GIF in
bottom of email
• Each download is an “open”
• Image-blockers mess up open rates
• Open rates typically only tracked with HTML emails, not plain text
• If they click, that’s an open.
• Take open rates with a grain of salt.
Thursday, January 21, 2010
![Page 49: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/49.jpg)
Thursday, January 21, 2010
![Page 50: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/50.jpg)
mailchimp.com/charts
Thursday, January 21, 2010
![Page 51: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/51.jpg)
Thursday, January 21, 2010
![Page 52: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/52.jpg)
Thursday, January 21, 2010
![Page 53: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/53.jpg)
Click Rates
Thursday, January 21, 2010
![Page 54: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/54.jpg)
Thursday, January 21, 2010
![Page 55: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/55.jpg)
85 people clicked the event banner!
Thursday, January 21, 2010
![Page 56: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/56.jpg)
Thursday, January 21, 2010
![Page 57: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/57.jpg)
Thursday, January 21, 2010
![Page 58: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/58.jpg)
Email ROI
Thursday, January 21, 2010
![Page 59: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/59.jpg)
Conversion Tracking
• Google Analytics, Omniture, WebTrends
• Append URLs with special tags, which pass data to the analytics package
• Setup conversion goals in Analytics package
Thursday, January 21, 2010
![Page 60: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/60.jpg)
Thursday, January 21, 2010
![Page 61: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/61.jpg)
What’s your email campaign’s ROI?
Thursday, January 21, 2010
![Page 62: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/62.jpg)
Anatomy of a good email design
Thursday, January 21, 2010
![Page 63: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/63.jpg)
• Background table
Thursday, January 21, 2010
![Page 64: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/64.jpg)
• Background table
• Campaign-Archive
Thursday, January 21, 2010
![Page 65: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/65.jpg)
• Background table
• Campaign-Archive
• Logo slot
Thursday, January 21, 2010
![Page 66: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/66.jpg)
• Background table
• Campaign-Archive
• Logo slot
• Content block
Thursday, January 21, 2010
![Page 67: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/67.jpg)
• Background table
• Campaign-Archive
• Logo slot
• Content block
Thursday, January 21, 2010
![Page 68: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/68.jpg)
• Background table
• Campaign-Archive
• Logo slot
• Content block
• Footer
Thursday, January 21, 2010
![Page 69: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/69.jpg)
• Background table
• Campaign-Archive
• Logo slot
• Content block
• Footer
Thursday, January 21, 2010
![Page 70: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/70.jpg)
Thursday, January 21, 2010
![Page 71: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/71.jpg)
Thursday, January 21, 2010
![Page 72: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/72.jpg)
Thursday, January 21, 2010
![Page 73: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/73.jpg)
Thursday, January 21, 2010
![Page 74: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/74.jpg)
Thursday, January 21, 2010
![Page 75: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/75.jpg)
Thursday, January 21, 2010
![Page 76: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/76.jpg)
Thursday, January 21, 2010
![Page 77: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/77.jpg)
Thursday, January 21, 2010
![Page 78: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/78.jpg)
Thursday, January 21, 2010
![Page 79: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/79.jpg)
Thursday, January 21, 2010
![Page 80: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/80.jpg)
Thursday, January 21, 2010
![Page 81: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/81.jpg)
Thursday, January 21, 2010
![Page 82: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/82.jpg)
Thursday, January 21, 2010
![Page 83: Email Design 101](https://reader033.vdocument.in/reader033/viewer/2022042623/54411b9eafaf9f36248b461c/html5/thumbnails/83.jpg)
mailchimp.com/resourcesmailchimp.com/chartsmailchimp.com/blog
Thursday, January 21, 2010