Sending Tests & Email Fixes

Topics covered in this HTML Email tutorial:

Using an inlining tool to convert embedded CSS, Testing in various email clients, Fixes for Outlook.com, Gmail, Yahoo! Mail, Apple’s iOS Mail, & Outlook 2007/2010

Exercise Preview

Exercise Overview

Inline CSS is recommended for HTML email because it’s supported across all email clients. As we saw in the first exercise, however, it can be quite tedious to write. We sped up the coding process by writing embedded CSS in the Jive Factory newsletter but these styles will not work across all email clients. Fortunately there are automated solutions for converting embedded CSS to inline styles.

Most email marketing services, such as MailChimp or Campaign Monitor, provide inlining tools that you can use before sending out your campaigns. For this particular newsletter, we’ll use Zurb’s (Foundation for Email) Inliner. An inliner is a script that will convert CSS from embedded to inline, which is a must for sending to clients such as Gmail. It is an incredible time saver and is completely free.

Once the CSS has been inlined, we’ll show you a quick and efficient way to send a test email to look out for errors and inconsistencies across popular mail clients.

Converting to Inline Styles

Let’s use Zurb’s inliner to create the final code we will use for the email. You’ll be using a new folder of provided files for this exercise (Jive Factory Ready for Testing). It contains the same Jive Factory email you’ve been working on in previous exercises.

1. Close any files you have open in your code editor to avoid confusion.
2. In your code editor, open events-issue21-summer.html from the Jive Factory Ready for Testing folder. Be sure to go into the right folder!
3. In events-issue21-summer.html, select all the code by pressing Cmd–A (Mac) or Ctrl–A (Windows).
4. Copy it (Cmd–C (Mac) or Ctrl–C (Windows)).
5. Open Chrome and go to get.foundation/emails/inliner.html
6. Paste the code into the field under HTML (Cmd–V (Mac) or Ctrl–V (Windows)).
7. Scroll down and uncheck Compress HTML (next to the Inline! button).
8. Click the Inline! button.
9. At the top right of the Final Email HTML field click the Copy to Clipboard button.
10. Switch back to your code editor.
11. Create a new file. (In most code editors, go to File > New File.)
12. Paste the new code into the file.

13. Save the file as inlined-events-issue21-summer.html. Make sure to save it into Jive Factory Ready for Testing folder.

    You’re now ready to send out a test email.

Sending a Test Email with Litmus PutsMail

PutsMail is an easy to use online tool for sending out test HTML emails. It’s run by Litmus, an industry-leader in email previews, analytics, and spam filter testing.

1. With inlined-events-issue21-summer.html still open, select all the code in the document (Cmd–A (Mac) or Ctrl–A (Windows)).
2. Copy it (Cmd–C (Mac) or Ctrl–C (Windows)).
3. In Chrome, keep the Zurb Inliner page open and create a new tab.
4. Go to putsmail.com
5. Click Create a New Test Email.
6. You’ll need to sign up for a free account (or you can sign in with an existing Litmus.com account).
7. Once you’ve signed in, you should be on the New Email Test page. If you’re not there, go back to to putsmail.com and click Create a New Test Email.
8. In the Recipients field, type your Outlook.com (Hotmail), Yahoo Mail, and Gmail addresses.
9. Click Add to save these addresses.
10. In the Subject Line field, type Jive Factory - First Test
11. Click in the Body (HTML) field and paste the code into the field (Cmd–V (Mac) or Ctrl–V (Windows)).

12. If there’s I’m not a robot reCAPTCHA, check it and do whatever it requests.

    NOTE: Do not check the box that moves the CSS inline. We have already done our inlining using Zurb’s tool.

13. Click Send Email to send out a test.

Opting In to Accept PutsMail Email Drafts

For your security, you will have to opt in to accept email drafts from PutsMail.

1. In your web browser, check all three email accounts. You will get a message from putsmail@putsmail.litmus.com with the subject Would you like to receive email drafts?
2. Click the link that says Yes, I’m happy to accept email drafts. You will be taken to the PutsMail website to confirm that you have opted in. You’ll have to opt in for all three accounts, after which they’ll send out the test messages.

Previewing Tests & Addressing Some Common Issues

1. Check all three email accounts to see how the Jive Factory test email looks in each email client.

   If the images do not load by default, be sure to admire the styled alt text (if the email client displays it).

   If you are using Gmail, you may have to look in the Promotions or Updates tab to find the newsletter.

   More About Gmail’s Promotions Tab

   It’s nearly impossible to trick Gmail’s algorithm to move an email out of the Promotions tab and into the Primary tab. Some industry professionals suggest that you use merge tags to include the recipient’s name and strip down your message to text only and a single link call-to-action. MailChimp has extensively tested this theory, though, and it doesn’t always pan out. Even reaching your subscribers and having them move your messages to the Primary tab seems to work only part of the time.

2. Check out the newsletter in Yahoo Mail.

3. Take a moment to admire the catchy preheader in your Yahoo or Gmail inbox. If it’s possible for you to preview the email on a mobile device, you can see the preheader there as well:

   

4. If possible, preview the email in Outlook 2007 or Outlook 2010. You may still see that links are underlined (even though we didn’t want them to be). Additionally, it’s a subtle issue, but if you look closely, there may be extra space between tables:

   

5. If possible, preview the email in Apple’s Mail app on an iOS device such as an iPhone or iPad.

   Let’s return to our newsletter’s code and start fixing some of the issues we saw.

Fixing the Table Spacing in Outlook 2007/2010

Let’s fix the extra space between tables in Outlook 2007/2010. The space is there because Outlook 2007/2010 renders space for table borders even when you set borders to a zero width. Additionally, the CSS border-collapse property’s default value is separate by default. This causes an unsightly gap. Let’s collapse the borders.

1. Return to your code editor. You should have two files open: events-issue21- summer.html and inlined-events-issue21-summer.html.
2. We are going to edit the original newsletter with the embedded styles: events- issue21-summer.html. Return to the code in this file, taking time to double-check that you are in the right file.

3. Below the rule for anchor tags, add the following new rule to the CSS, like so:

   a {
      color: #ffffff !important;
      text-decoration: none !important;
   }
   table {
      border-collapse: collapse;
   }
   

4. This should do the trick! Save the file.

   NOTE: Outlook can also sometimes add a bit of spacing on the left and right side of a table. This will typically break the layout if you are trying to position tables side-by-side. Although this is not an issue for us in this newsletter, should you ever encounter this issue, there is a fix: set the vendor-specific (Microsoft Office only) mso-table-lspace and mso-table-rspace CSS properties to a zero value.

Inlining the Email Again

In order to effectively resolve the remaining issues we’ve encountered, we’ll need to embed styles to the final, inlined file.

1. Let’s run the inliner one more time before we send out a second test. Select All the code in the file.
2. Copy it.
3. Switch back to Chrome.
4. Switch to the Zurb Inliner tab (or go to get.foundation/emails/inliner.html if you closed it).
5. If there’s anything in the HTML field, select it all and delete it.
6. Paste the code into the field under HTML (Cmd–V (Mac) or Ctrl–V (Windows)).
7. Scroll down and uncheck Compress HTML (next to the Inline! button).
8. Click the Inline! button.
9. At the top right of the Final Email HTML field click the Copy to Clipboard button.
10. Return to your code editor.
11. Switch to (or open) inlined-events-issue21-summer.html. Take a moment to double-check that you are in the right file (for the inlined code).
12. Select all the code (Cmd–A (Mac) or Ctrl–A (Windows)).
13. Paste (Cmd–V (Mac) or Ctrl–V (Windows)) the new inlined code over the old.
14. Save the file.

Resolving Some Final Issues with Embedded CSS

Outlook 2010 is underlining our links, which we don’t want. Also, some email clients may add links to your emails (for phone numbers, addresses, dates, etc.). So it’s a good practice to add a link style to try to ensure your links match your design. The link style(s) must be in the head tag of the final, inlined file to help ensure they work.

1. At the top of inlined-events-issue21-summer.html, add a style tag:

   <title>Summer Events at The Jive Factory</title>
   <style>
   
   </style>
   </head>
   

2. Write the following new rule in the style tag:

   a {
      color: #ffffff !important;
      text-decoration: none !important;
   }
   

3. This looks just like the code we added in the earlier Adding & Styling Links exercise! When we inlined these rules, they were only applied to existing anchor tags. But we need to target links that an email client adds to the email after it’s opened.

4. Save the file.

Optional: Retesting

We’re ready to send a second test email.

1. With inlined-events-issue21-summer.html still open, select all the code (Cmd–A (Mac) or Ctrl–A (Windows)).
2. Copy it (Cmd–C (Mac) or Ctrl–C (Windows)).
3. In Chrome switch back to the PutsMail tab, or go to putsmail.com
4. At the top of the page click New Test.
5. You should still see your email addresses listed below the Recipients field. If not, enter your Outlook.com (Hotmail), Yahoo Mail, and Gmail addresses and click Add to save these addresses.
6. In the Subject Line field, type: Jive Factory - Second Test
7. Click in the Body (HTML) field and paste the code into the field (Cmd–V (Mac) or Ctrl–V (Windows)).
8. Click Send Email to send out a test.
9. In your web browser, check all three email accounts again to see that the email looks good.
10. If you can check the email in Outlook 2010, you’d see that the links are no longer underlined.
11. The email should look great in all email clients. At this point it should be safe to send out to the masses. Congratulations on a job well done! You may return to your code editor and close all the files.

NOTE: In iOS Mail you may also notice a hairline border between the two columns in the event tables. This is a known issue. Hairline borders appear when a background color or image is applied to individual table cells or table rows. Sometimes the border is barely visible and actually disappears and reappears at different zoom levels.

If these hairline borders are noticeable enough to negatively affect your design or layout, nesting the problematic table in a new table featuring a background color that matches that of the inner table is a clunky, but viable solution to this issue. We feel that the border looks perfectly serviceable for this particular email, so we’ll leave the layout as is.