Email Design Workshop - Don't Let Bad Email Code Ruin Your Day or Your Results

  • 2,877 views
Uploaded on

Presentation given by Shana Masterson and Sean Powell at the 2011 Nonprofit Technology Conference.

Presentation given by Shana Masterson and Sean Powell at the 2011 Nonprofit Technology Conference.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,877
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
39
Comments
0
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Email Design Workshop – Don’t Let Bad Code Ruin Your Day or Your Results#11NTCemailSean PowellShana Masterson
  • 2. WARNING Coding for email is different than coding for the web! There are no standards for displaying email HTML
  • 3. Goodbye... ✗  web design best practices ✗  divs ✗  flash, js ✗  external CSSHello…✔ coding for all email clients✔ tables✔ inline CSS✔ code like it’s 1999!
  • 4. http://litmus.com/resources/email-client-stats
  • 5. http://www.campaignmonitor.com/stats/email-clients/#most_popular
  • 6. What’s the big deal?Ensure consistent branding across all clients and messages
  • 7. Email client rendering engineshttp://www.emailonacid.com/blog/details/C6/strategies-for-email-testing
  • 8. http://www.campaignmonitor.com/css
  • 9. Better practices✔  When possible, allow plenty of time for review and coding✔  Don’t trust the WYSIWYG or HTML editors✔  Use a good text editor •  Smultron - http://www.peterborgapps.com/smultron/ (Mac) •  Komodo Edit - http://www.activestate.com/komodo-edit/ •  Code Lobster - http://www.codelobster.com/✔  Use a tool like premailer to make your styles inline – http://premailer.dialect.ca/✔  Include a “View on web” option and/or use alt text in your header “Please turn on images”
  • 10. TestingOption 1✔ Set up many test email accounts and test in various browsers. *Hint – Choose a user name and password that will work consistently across clients.✔ Install several desktop email programs for testing.✔ Test on Mac and PC.Option 2✔ Use a paid service *Litmus – litmus.com *Email on Acid – emailonacid.com
  • 11. Email style guidehttp://www.wireless.att.com/styleguide/guide/email_templates.jsp
  • 12. HTML cheat sheet excerpt
  • 13. The Email Standards Project The Email Standards Project is about working with email client developers and the design community to improve web standards support and accessibility in email. The project was formed out of frustration with the inconsistent rendering of HTML emails in major email clients. Our mission is to drive the use and support of web standards in email, working with email client developers to ensure that emails render consistently. This is a community effort to improve the email experience for designers and readers, and we’d love your help.www.email-standards.org/
  • 14. rolling up our sleeves
  • 15. A few notes about…✔ What’s meant by “inline” •  Moving styles from an external style sheet/HEAD to within the containing tag. •  Looks like: style=“width: 100px; height:100px;…”
  • 16. Inline: changes this…
  • 17. …to this
  • 18. …some more basics•  Setting heights and widths of images, tables, etc.•  Limited use of margin/padding•  Limited support for divs•  Best to use tables to format your message - nesting helps too•  No shortcuts (use border-left-style instead of border: 1px solid #000)•  Define your alt and/or title attributes (set title for Outlook 07)•  Absolute paths for images ✗  •  Use the character entity equivalent for special characters like em-dashes, right/left double quotes, and ampersands
  • 19. Character EntitiesList of character entities that you can code into your message toget that em-dash(—), ampersand(&), or right doublequote(”) to render correctly.For example:Em-dash = —Ampersand =&A more complete list:http://www.intuitive.com/coolweb/entities.html
  • 20. Just say no to✔  background images (although there is a hack now…)✔  using png’s✔  using floats for alignment✔  using divs (somewhat)✔  CSS3✔  negative margins✔  overflow, opacity, position, etc ✗  ✔  embedded video (there are some interesting things on the horizon)✔  fun.
  • 21. lets take a look at some code
  • 22. What HTML DOCTYPE should I use?The xHTML 1.0 Transitional doctype is widely used when sendingHTML email to help uniformity. Take this with a grain of salt,however, as many email clients will either change it to theirpreference or remove it altogether.<Markup> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN” "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">http://www.campaignmonitor.com/blog/post/3317/correct-doctype-to-use-in-html-email/http://www.emailonacid.com/blog/details/C18/doctype_-_the_black_sheep_of_html_email_design
  • 23. Using tablesTables are the most common way to format your email consistently.Use a wrapper table to center and set a background for youremails.Set your table widths inside cells and in most cases resetcellpadding, cellspacing, and border to zero.Note: Use nested tables as a way to space effectively in yourmessage.
  • 24. ✗  
  • 25. <Markup><table cellpadding="0” cellspacing="0" border="0"> <tbody> <tr> <td width="300"></td> <td width="300"></td> <td width="300"></td> </tr> </tbody></table><!-- end example table-->
  • 26. P tagsFixes an issue with the (new) Yahoo Email client where standardparagraph spacing is not applied (most likely due to a reset ofsome sort).Note: Many insert a double break (<br />) to create the same“paragraph” type effect.<Markup> <style type="text/css"> . . p {margin: 1em 0 1em 0;} . . </style>
  • 27. BeforeAfter
  • 28. Hotmail header fixHotmail replaces your header color styles with a green coloron H2, H3, H4, H5, and H6 tags.In the following example, the color is reset to black. Replace blackwith your choice of color. The !important declaration is really whatis overriding Hotmails styling.NOTE: Hotmail also sets the H1 and H2 tags to the same size.
  • 29. <Markup><style type="text/css">...h1, h2, h3, h4, h5, h6 { color: black !important; line-height: 100% !important; }h2 a, h2 a:visited, h3 a, h3 a:visited { color: grey !important; /* Preferably not the samecolor as the normal header color. */ }...</style>
  • 30. BeforeAfter
  • 31. Yahoo link color fix (1 of 2)This fix overwrites Yahoo mails specific blue coloring on links. It,however, does not set color across email clients that ignore CSS inthe HEAD tag. You will still have to bring this inline for gmail/others.http://www.campaignmonitor.com/blog/post/3226/two-solutions-to-yahoo-mail-turning-all-your-links-blue/
  • 32. <Markup>a { color: red; text-decoration: underline;} /** YahooClassic and other clients that support styling within theHEAD tags **/.yshortcuts { color: red !important; text-decoration:underline !important;} /* Body text color for the New Yahoo*/.yshortcuts a span { color: red !important; text-decoration:underline !important; } /* Link text color for the New Yahoo*/Note: This example sets the link color red.
  • 33. Yahoo link color fix (2 of 2)Simply override the styling color and decoration inline. Do not usein combination with fix number 1 unless you want to style the"yshortcuts" class separately, which this code allows you to do.(INLINE)<Markup> <a href="http://www.responsys.com/blogs/nsm/2010/07/ feeling-blue-over-yahoo-email.html" style="color:red; text-decoration:underline;"><span style="color:red;">Here is another fix for Yahoo from Responsys/Smith Harmon </span></a>
  • 34. BeforeAfter
  • 35. Hotmail/Gmail image issueHotmail and Gmail inserts unwanted spacing underneathyour images. Use this fix to properly space images that line upright on top of each other.<Markup> img {display: block;} //Place in the <head> area OR <img src=“yourimage.jpg” style=“display: block;” alt=“your alt text” width=“x” height=“x” />
  • 36. @MediaUsing @Media queries can help target mobile devices, likehandhelds and tablets. While definitely not widely supported, it ishas become supported enough where you can target users ofiphones, android based phones, ipads, etc when they are using thebuilt in software apps to access email.
  • 37. <Markup> <style type="text/css"> . . @media only screen and (max-device-width: 480px{ Your iphone/handheld styles here . . @media only screen and (device-width: 768px{ Your ipad styles here } . . </style>Note: Try experimenting with portrait and landscapemodes.http://www.campaignmonitor.com/blog/post/3163/optimizing-your-emails-for-mobile-devices-with-media/http://css-tricks.com/snippets/css/ipad-specific-css/
  • 38. in the year 2000
  • 39.   Embedding video  @Font-face  CSS3 (or 2 or 1)  Dynamic content  Google (gmail) – enhanced content  From other companies like Movable Ink
  • 40. Resources✔  http://htmlemailboilerplate.com/✔  www.campaignmonitor.com✔  www.mailchimp.com✔  www.emailonacid.com • ddf  ✔  www.mxtoolbox.com/✔  www.senderscore.org✔  aws.amazon.com/ses/✔  www.scribd.com/doc/28520824/Email-Jitsu
  • 41. </presentation>
  • 42. Session Evaluation Each entry via text or web is a chance to win great NTEN prizes throughout the day! TEXT ONLINE Text #11NTCemail to Use #11NTCemail at 69866. http://nten.org/ntc/evalSession Evaluations Powered By: