Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Email Design Workshop –   Don ’t Let Bad Code Ruin Your Day or Your Results #11NTCemail Sean Powell Shana Masterson
 
WARNING Coding for email is different than coding for the web There are no standards for displaying email HTML !
Goodbye... Hello… <ul><li>web design best practices </li></ul><ul><li>divs </li></ul><ul><li>flash, js </li></ul><ul><li>e...
http://litmus.com/resources/email-client-stats
http://www.campaignmonitor.com/stats/email-clients/#most_popular
What ’s the big deal? Ensure consistent branding across all clients and messages
http://www.emailonacid.com/blog/details/C6/strategies-for-email-testing   Email client rendering engines
http://www.campaignmonitor.com/css
Better practices <ul><li>When possible, allow plenty of time for review and coding </li></ul><ul><li>Don ’t trust the WYSI...
Testing <ul><li>Option 1  </li></ul><ul><li>Set up many test email accounts and test in various browsers. *Hint – Choose a...
http://www.wireless.att.com/styleguide/guide/email_templates.jsp Email style guide
HTML cheat sheet excerpt
The Email Standards Project The Email Standards Project is about working with email client developers and the design commu...
lets take a look at some code
but before we do
A few notes about… <ul><li>What ’s meant by “inline” </li></ul><ul><ul><li>Moving styles from an external style sheet/HEAD...
… some more basics <ul><li>Setting heights and widths of images, tables, etc. </li></ul><ul><li>Limited use of margin/padd...
Character Entities List of character entities that you can code into your message to get that em-dash(—), ampersand(&), or...
Just say no to  <ul><li>background images (although there is a hack now…) </li></ul><ul><li>using png’s </li></ul><ul><li>...
rolling up sleeves
What HTML DOCTYPE should I use? The xHTML 1.0 Transitional doctype is widely used when sending HTML email to help uniformi...
Using tables Tables are the most common way to format your email consistently.  Use a wrapper table to center and set a ba...
✗
<Markup> <table cellpadding=&quot;0” cellspacing=&quot;0&quot; border=&quot;0&quot;>         <tbody>         <tr>         ...
P tags Fixes an issue with the (new) Yahoo Email client where standard paragraph spacing is not applied (most likely due t...
Before After
Hotmail header fix Hotmail replaces your header color styles with a green color on H2, H3, H4, H5, and H6 tags.  In the fo...
<Markup> <style type=&quot;text/css&quot;> . . . h1, h2, h3, h4, h5, h6 { color: black !important; line-height: 100% !impo...
Before After
Yahoo link color fix (1 of 2) This fix overwrites Yahoo mail's specific blue coloring on links. It, however, does not set ...
<Markup> a { color: red; text-decoration: underline;} /** Yahoo Classic and other clients that support styling within the ...
Yahoo link color fix (2 of 2) Simply override the styling color and decoration inline. Do not use in combination with fix ...
Before After
Hotmail/Gmail image issue Hotmail and Gmail inserts unwanted spacing underneath your images.  Use this fix to properly spa...
@Media Using @Media queries can help target mobile devices, like handhelds and tablets. While definitely not widely suppor...
<Markup> Note: Try experimenting with portrait and landscape modes. <style type=&quot;text/css&quot;> . . @media only scre...
in the year 2000
<ul><li>Embedding video </li></ul><ul><li>@Font-face </li></ul><ul><li>CSS3 (or 2 or 1) </li></ul><ul><li>Dynamic content ...
Resources <ul><li>http://htmlemailboilerplate.com/ </li></ul><ul><li>www.campaignmonitor.com </li></ul><ul><li>www.mailchi...
</presentation>
Session Evaluation Each entry via text or web is a chance to win great NTEN prizes throughout the day!  Session Evaluation...
Upcoming SlideShare
Loading in …5
×

of

Email Workshop - Powell/Masterson (#11NTCEmail) Slide 1 Email Workshop - Powell/Masterson (#11NTCEmail) Slide 2 Email Workshop - Powell/Masterson (#11NTCEmail) Slide 3 Email Workshop - Powell/Masterson (#11NTCEmail) Slide 4 Email Workshop - Powell/Masterson (#11NTCEmail) Slide 5 Email Workshop - Powell/Masterson (#11NTCEmail) Slide 6 Email Workshop - Powell/Masterson (#11NTCEmail) Slide 7 Email Workshop - Powell/Masterson (#11NTCEmail) Slide 8 Email Workshop - Powell/Masterson (#11NTCEmail) Slide 9 Email Workshop - Powell/Masterson (#11NTCEmail) Slide 10 Email Workshop - Powell/Masterson (#11NTCEmail) Slide 11 Email Workshop - Powell/Masterson (#11NTCEmail) Slide 12 Email Workshop - Powell/Masterson (#11NTCEmail) Slide 13 Email Workshop - Powell/Masterson (#11NTCEmail) Slide 14 Email Workshop - Powell/Masterson (#11NTCEmail) Slide 15 Email Workshop - Powell/Masterson (#11NTCEmail) Slide 16 Email Workshop - Powell/Masterson (#11NTCEmail) Slide 17 Email Workshop - Powell/Masterson (#11NTCEmail) Slide 18 Email Workshop - Powell/Masterson (#11NTCEmail) Slide 19 Email Workshop - Powell/Masterson (#11NTCEmail) Slide 20 Email Workshop - Powell/Masterson (#11NTCEmail) Slide 21 Email Workshop - Powell/Masterson (#11NTCEmail) Slide 22 Email Workshop - Powell/Masterson (#11NTCEmail) Slide 23 Email Workshop - Powell/Masterson (#11NTCEmail) Slide 24 Email Workshop - Powell/Masterson (#11NTCEmail) Slide 25 Email Workshop - Powell/Masterson (#11NTCEmail) Slide 26 Email Workshop - Powell/Masterson (#11NTCEmail) Slide 27 Email Workshop - Powell/Masterson (#11NTCEmail) Slide 28 Email Workshop - Powell/Masterson (#11NTCEmail) Slide 29 Email Workshop - Powell/Masterson (#11NTCEmail) Slide 30 Email Workshop - Powell/Masterson (#11NTCEmail) Slide 31 Email Workshop - Powell/Masterson (#11NTCEmail) Slide 32 Email Workshop - Powell/Masterson (#11NTCEmail) Slide 33 Email Workshop - Powell/Masterson (#11NTCEmail) Slide 34 Email Workshop - Powell/Masterson (#11NTCEmail) Slide 35 Email Workshop - Powell/Masterson (#11NTCEmail) Slide 36 Email Workshop - Powell/Masterson (#11NTCEmail) Slide 37 Email Workshop - Powell/Masterson (#11NTCEmail) Slide 38 Email Workshop - Powell/Masterson (#11NTCEmail) Slide 39 Email Workshop - Powell/Masterson (#11NTCEmail) Slide 40 Email Workshop - Powell/Masterson (#11NTCEmail) Slide 41 Email Workshop - Powell/Masterson (#11NTCEmail) Slide 42
Upcoming SlideShare
九州大学教育ビッグデータプロジェクト ~ラーニングアナリティクス(LA)の活用~
Next
Download to read offline and view in fullscreen.

31 Likes

Share

Download to read offline

Email Workshop - Powell/Masterson (#11NTCEmail)

Download to read offline

So, you've entered your fancy email into your WYSIWYG, or if you're savvy enough you did it all in code. The email goes through the normal channels, is proofed by seemingly 25 stakeholders, it gets approved and it looks phenomenal! You hit send and wait for the magic to begin. Across the country, someone in Wichita, Kansas opens your email in Outlook 2010 and is baffled. The spacing is all over the place and the images (including your Call To Action button) are nowhere to be found. Our friend in Wichita now thinks your organization is made up of a bunch of unprofessional hacks and questions his commitment. We don't want this to happen to you, so we've designed this workshop to make sure it doesn't!

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Email Workshop - Powell/Masterson (#11NTCEmail)

  1. 1. Email Design Workshop – Don ’t Let Bad Code Ruin Your Day or Your Results #11NTCemail Sean Powell Shana Masterson
  2. 3. WARNING Coding for email is different than coding for the web There are no standards for displaying email HTML !
  3. 4. Goodbye... Hello… <ul><li>web design best practices </li></ul><ul><li>divs </li></ul><ul><li>flash, js </li></ul><ul><li>external CSS </li></ul><ul><li>coding for all email clients </li></ul><ul><li>tables </li></ul><ul><li>inline CSS </li></ul><ul><li>code like it ’s 1999! </li></ul>
  4. 5. http://litmus.com/resources/email-client-stats
  5. 6. http://www.campaignmonitor.com/stats/email-clients/#most_popular
  6. 7. What ’s the big deal? Ensure consistent branding across all clients and messages
  7. 8. http://www.emailonacid.com/blog/details/C6/strategies-for-email-testing Email client rendering engines
  8. 9. http://www.campaignmonitor.com/css
  9. 10. Better practices <ul><li>When possible, allow plenty of time for review and coding </li></ul><ul><li>Don ’t trust the WYSIWYG or HTML editors </li></ul><ul><li>Use a good text editor </li></ul><ul><ul><li>Smultron - http://www.peterborgapps.com/smultron/ (Mac) </li></ul></ul><ul><ul><li>Komodo Edit - http://www.activestate.com/komodo-edit/ </li></ul></ul><ul><ul><li>Code Lobster - http://www.codelobster.com/ </li></ul></ul><ul><li>Use a tool like premailer to make your styles inline – </li></ul><ul><li>http://premailer.dialect.ca/ </li></ul><ul><li>Include a “View on web” option and/or use alt text in your header “Please turn on images” </li></ul>
  10. 11. Testing <ul><li>Option 1 </li></ul><ul><li>Set up many test email accounts and test in various browsers. *Hint – Choose a user name and password that will work consistently across clients. </li></ul><ul><li>Install several desktop email programs for testing. </li></ul><ul><li>Test on Mac and PC. Option 2 </li></ul><ul><li>Use a paid service *Litmus – litmus.com </li></ul><ul><li>*Email on Acid – emailonacid.com </li></ul>
  11. 12. http://www.wireless.att.com/styleguide/guide/email_templates.jsp Email style guide
  12. 13. HTML cheat sheet excerpt
  13. 14. 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. 15. lets take a look at some code
  15. 16. but before we do
  16. 17. A few notes about… <ul><li>What ’s meant by “inline” </li></ul><ul><ul><li>Moving styles from an external style sheet/HEAD to within the containing tag. </li></ul></ul><ul><ul><li>Looks like: style=“width: 100px; height:100px;…” </li></ul></ul>
  17. 18. … some more basics <ul><li>Setting heights and widths of images, tables, etc. </li></ul><ul><li>Limited use of margin/padding </li></ul><ul><li>Limited support for divs </li></ul><ul><li>Best to use tables to format your message - nesting helps too </li></ul><ul><li>No shortcuts (use border-left-style instead ofborder: 1px solid #000) </li></ul><ul><li>Define your alt and/or title attributes </li></ul><ul><li>Absolute paths for images </li></ul><ul><li>Use the character entity equivalent for special characters like em-dashes, right/left double quotes, and ampersands </li></ul>✗
  18. 19. Character Entities List of character entities that you can code into your message to get that em-dash(—), ampersand(&), or right double quote( ”) to render correctly. For example: Em-dash = &mdash; Ampersand = &amp; A more complete list: http://www.intuitive.com/coolweb/entities.html
  19. 20. Just say no to <ul><li>background images (although there is a hack now…) </li></ul><ul><li>using png’s </li></ul><ul><li>using floats for alignment </li></ul><ul><li>using divs (somewhat) </li></ul><ul><li>CSS3 </li></ul><ul><li>negative margins </li></ul><ul><li>overflow, opacity, position, etc </li></ul><ul><li>embedded video (there are some interesting things on the horizon) </li></ul><ul><li>fun. </li></ul>✗
  20. 21. rolling up sleeves
  21. 22. What HTML DOCTYPE should I use? The xHTML 1.0 Transitional doctype is widely used when sending HTML email to help uniformity. Take this with a grain of salt, however, as many email clients will either change it to their preference or remove it altogether. <Markup> <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN ”         &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd&quot;> 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
  22. 23. Using tables Tables are the most common way to format your email consistently. Use a wrapper table to center and set a background for your emails. Set your table widths inside cells and in most cases reset cellpadding, cellspacing, and border to zero. Note: Use nested tables as a way to space effectively in your message.
  23. 24.
  24. 25. <Markup> <table cellpadding=&quot;0” cellspacing=&quot;0&quot; border=&quot;0&quot;>         <tbody>         <tr>             <td width=&quot;300&quot; ></td>             <td width=&quot;300&quot; ></td>             <td width=&quot;300&quot; ></td>         </tr>         </tbody> </table>   <!-- end example table-->
  25. 26. P tags Fixes an issue with the (new) Yahoo Email client where standard paragraph spacing is not applied (most likely due to a reset of some sort). Note: Many insert a double break (<br />) to create the same “paragraph” type effect. <Markup> <style type=&quot;text/css&quot;> . . p { margin: 1em 0 1em 0 ;} . . </style>
  26. 27. Before After
  27. 28. Hotmail header fix Hotmail replaces your header color styles with a green color on H2, H3, H4, H5, and H6 tags. In the following example, the color is reset to black. Replace black with your choice of color. The ! Important declaration is really what is overriding Hotmail's styling. NOTE: Hotmail also sets the H1 and H2 tags to the same size.
  28. 29. <Markup> <style type=&quot;text/css&quot;> . . . 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 same color as the normal header color. */ } . . . </style>
  29. 30. Before After
  30. 31. Yahoo link color fix (1 of 2) This fix overwrites Yahoo mail's specific blue coloring on links. It, however, does not set color across email clients that ignore CSS in the 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/
  31. 32. <Markup> a { color: red; text-decoration: underline;} /** Yahoo Classic and other clients that support styling within the HEAD 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.
  32. 33. Yahoo link color fix (2 of 2) Simply override the styling color and decoration inline. Do not use in combination with fix number 1 unless you want to style the &quot;yshortcuts&quot; class separately, which this code allows you to do. (INLINE) <Markup> <a href=&quot;http://www.responsys.com/blogs/nsm/2010/07/feeling-blue-over-yahoo-email.html&quot; style=&quot;color:red; text-decoration:underline;&quot;><span style=&quot;color:red;&quot;>Here is another fix for Yahoo from Responsys/Smith Harmon </span></a>
  33. 34. Before After
  34. 35. Hotmail/Gmail image issue Hotmail and Gmail inserts unwanted spacing underneath your images. Use this fix to properly space images that line up right on top of each other. <Markup> <img src= “yourimage.jpg” style=“display: block;” alt=“your alt text” width=“x” height=“x” /> img {display: block;} //Place in the <head> area OR
  35. 36. @Media Using @Media queries can help target mobile devices, like handhelds and tablets. While definitely not widely supported, it is has become supported enough where you can target users of iphones, android based phones, ipads, etc when they are using the built in software apps to access email.
  36. 37. <Markup> Note: Try experimenting with portrait and landscape modes. <style type=&quot;text/css&quot;> . . @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> http://www.campaignmonitor.com/blog/post/3163/optimizing-your-emails-for-mobile-devices-with-media/ http://css-tricks.com/snippets/css/ipad-specific-css/
  37. 38. in the year 2000
  38. 39. <ul><li>Embedding video </li></ul><ul><li>@Font-face </li></ul><ul><li>CSS3 (or 2 or 1) </li></ul><ul><li>Dynamic content </li></ul><ul><li>Google (gmail) – enhanced content </li></ul><ul><li>From other companies like Movable Ink </li></ul>
  39. 40. Resources <ul><li>http://htmlemailboilerplate.com/ </li></ul><ul><li>www.campaignmonitor.com </li></ul><ul><li>www.mailchimp.com </li></ul><ul><li>www.emailonacid.com </li></ul><ul><li>www.mxtoolbox.com/ </li></ul><ul><li>www.senderscore.org </li></ul><ul><li>aws.amazon.com/ses/ </li></ul><ul><li>www.scribd.com/doc/28520824/Email-Jitsu </li></ul><ul><li>ddf </li></ul>
  40. 41. </presentation>
  41. 42. Session Evaluation Each entry via text or web is a chance to win great NTEN prizes throughout the day! Session Evaluations Powered By: TEXT Text #11NTCemail to 69866. ONLINE Use #11NTCemail at http://nten.org/ntc/eval
  • kazuhitotsujita

    Jul. 4, 2014
  • chloefechino

    Feb. 10, 2013
  • webmanmain

    Aug. 1, 2012
  • frogsummer

    Sep. 29, 2011
  • billpowell

    Sep. 7, 2011
  • pedraponte

    Aug. 9, 2011
  • noekidotcom

    Jul. 28, 2011
  • dannluciano

    Jul. 23, 2011
  • m0d

    Jul. 4, 2011
  • shane.tech.teach

    Jun. 29, 2011
  • sebastiensauteur

    Jun. 22, 2011
  • ljubodrag

    Jun. 22, 2011
  • johnb847

    Jun. 21, 2011
  • immergente

    Jun. 20, 2011
  • piotrlewandowski

    Jun. 16, 2011
  • artthompsonjr

    Jun. 15, 2011
  • bgsand

    Jun. 14, 2011
  • twinraven

    Jun. 14, 2011
  • rozzer

    Jun. 10, 2011
  • paolodedios

    Jun. 9, 2011

So, you've entered your fancy email into your WYSIWYG, or if you're savvy enough you did it all in code. The email goes through the normal channels, is proofed by seemingly 25 stakeholders, it gets approved and it looks phenomenal! You hit send and wait for the magic to begin. Across the country, someone in Wichita, Kansas opens your email in Outlook 2010 and is baffled. The spacing is all over the place and the images (including your Call To Action button) are nowhere to be found. Our friend in Wichita now thinks your organization is made up of a bunch of unprofessional hacks and questions his commitment. We don't want this to happen to you, so we've designed this workshop to make sure it doesn't!

Views

Total views

72,861

On Slideshare

0

From embeds

0

Number of embeds

57,179

Actions

Downloads

250

Shares

0

Comments

0

Likes

31

×