Preflight: Absolute URLs, Alt Text, & Preheader

Topics covered in this HTML Email tutorial:

Converting local image paths to absolute URLs, Adding alt text, Styling alt text, Adding a preheader message

Exercise Preview

Exercise Overview

Before you send out an HTML email campaign to begin testing your code, there are some “preflight” steps you must take to make sure the email will perform as expected, both technically and from a marketing perspective. This exercise will walk you through these final tasks: making certain all image links are absolute URLs, double-checking that all images contain alt text, styling the alt text for maximum impact, and adding an appropriate preheader.

1. We’ll be using a new folder of provided files for this exercise. It contains the same Jive Factory email you’ve been working on in previous exercises. Close any files you may 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 Preflight folder. Be sure to go into the right folder!

Changing to Absolute Image URLs

Right now, all image paths use relative links to local files. HTML emails require absolute paths to URLs (webpages) and images that are stored on a server. We’ve already uploaded all the images to our remote web server, so we need to update the image paths. The easiest way to fix this is to do a Find and Replace.

1. Open the Find and Replace feature (your menu options may be named differently depending on your code editor):

   • In Visual Studio Code: go to Edit > Replace.
   • For other code editors: try Cmd–F (Mac) or Ctrl–F (Windows).

2. We’ll start with the images. Enter the following (the Find and Replace labels may be named differently in your code editor):

   Find:	images/
   Replace:	http://thejivefactory.com/nl/images/

   NOTE: To be organized, on our website we have all files for emails in an nl folder (nl stands for newsletter) so they don’t get mixed with the website files. This is not required, but we recommend keeping them separate.

3. Proceed to Replace All, and a total of 7 replacements should be made.

4. Save the file and preview the newsletter in a browser to check the images.

   If the images do not show up, it’s most likely due to a typo. Return to your code editor, go to Edit > Undo and try the Find and Replace again, double-checking the spelling.

Adding Alt Text

On standard webpages, the alt attribute is used within all img tags to make content more accessible for visually impaired users or users who have images turned off altogether. The attribute is often called alt text because it provides alternative text-based content.

Many email clients block images by default, so alt text is important for getting your message across. In the following steps, you will learn not only how to add alt text, but learn about the importance of styling alt text to create a more eye-catching email and improve your open and click-through rates.

Not all images need alt text—usually just the ones that have words in the graphics or provide useful information to the users. Let’s add alt text to the main banner image as well as the two section images for this and next week’s events.

1. Return to your code editor.

2. Find the banner image (around line 61) and add the following alt attribute:

   <img src="http://thejivefactory.com/nl/images/banner.jpg" height="224" width="644" alt="The Jive Factory Event Calendar">
   

3. Find the events-this-week image (around line 69) and add the bold alt attribute:

   <img src="http://thejivefactory.com/nl/images/events-this-week.jpg" height="52" width="644" alt="Events This Week">
   

4. Find the events-next-week image (around line 135) and add the bold alt attribute:

   <img src="http://thejivefactory.com/nl/images/events-next-week.jpg" height="52" width="644" alt="Events Next Week">
   

5. Save the file.
6. To take see the alt text, we have to disable images. We can do that Chrome’s settings. Keep this page open, and create a new tab in Chrome.
7. At the top right of Chrome’s window click the Settings button and from the menu choose Settings.
8. At the top, in the Search Settings field type in image
9. Click on Site Settings.
10. Click on Images.
11. Click the toggle button to the right of Show all (recommended).
12. Keep this tab open, but switch back to the tab for your email.

13. Reload the page, and you should now be able to see the banner alt text The Jive Factory Event Calendar. You can’t see the alt text for either of the event sectioning images because they are not paragraphs or links and the default text is black. Let’s add some CSS that changes the text color, etc. to fix this.

Styling Alt Text

We can style alt text to make it more impactful. We’ll start with the logo.

1. Return to your code editor.

2. Above the rule for .event td, add the following new rule:

   .logo {
      font-family: Arial, Helvetica, sans-serif;
      font-weight: bold;
      font-size: 24px;
      color: #fcb802;
   }
   .event td {
      padding: 20px 15px 10px;
   }
   

3. Around line 67, add the logo class to the banner img as shown in bold:

   <img class="logo" src="http://thejivefactory.com/nl/images/banner.jpg" height="224" width="644" alt="The Jive Factory Event Calendar">
   

4. Save the file.
5. Return to Chrome and reload the page.
6. The images should still be disabled, but now you should now see the now formatted banner alt text. Much improved! Let’s do something similar with the events-this-week and events-next-week images.
7. Return to your code editor.

8. Copy the rule for .logo and paste it below the first:

   .logo {
      font-family: Arial, Helvetica, sans-serif;
      font-weight: bold;
      font-size: 24px;
      color: #fcb802;
   }
   .logo {
      font-family: Arial, Helvetica, sans-serif;
      font-weight: bold;
      font-size: 24px;
      color: #fcb802;
   }
   

9. Edit the second rule for .logo as follows (changes are in bold):

   .logo {
      font-family: Arial, Helvetica, sans-serif;
      font-weight: bold;
      font-size: 24px;
      color: #fcb802;
   }
   .section-img {
      font-family: Arial, Helvetica, sans-serif;
      font-weight: bold;
      font-size: 20px;
      color: #fcb802;
   }
   

10. Let’s add the .section-img class to both section images. First, around line 81, add the following bold code to the <img> tag:

    <img class="section-img" src="http://thejivefactory.com/nl/images/events-this-week.jpg" height="52" width="644" alt="Events This Week">
    

11. Find the second section image around line 147 and add the following bold code:

    <img class="section-img" src="http://thejivefactory.com/nl/images/events-next-week.jpg" height="52" width="644" alt="Events Next Week">
    

12. Save the file.

13. Return to Chrome and reload the page to see all the styled alt text. The email now looks much more inviting and informative even without the images.

    NOTE: Keep in mind that support for styled alt text varies across email clients. Styled alt text is more evenly supported across webmail clients (like Gmail and Yahoo Mail, for instance) than desktop clients (like various versions of Outlook).

14. We’re finished testing the alt text so we might as well enable images once again. Switch back to the Settings tab that should still be open in Chrome.
15. Click the toggle button to the right of Do not show any images.
16. Switch back to the tab with your email.

17. Reload the page and you should be able to see the banner and section images.

Adding a Preheader & a “View This Email Online” Link

For recipients who may have trouble viewing HTML messages, it is a good idea to provide a link to an online version of the email. In the early days of HTML email marketing, this link was the first thing you would place at the top of the page to ensure that everyone could access the content.

We still want to include this very important link but we will do so after a brief preheader message. A preheader is the bit of text that follows the subject line when an email is viewed in the Inbox. It’s a sneak peek about what the email contains before you open the message and it can often improve the open rate far more than an “Email not displayed properly?” message possibly can. Let’s see how.

1. Return to your code editor.

2. We’ve prepared the preheader for you in a code snippet. Open content-preheader.html (Jive Factory Ready for Preflight > snippets).

   The preheader content is contained inside a new 2-column table. The first column has the preheader message content and the second column has the link to view the newsletter online.

3. Select all the content and copy (Cmd–C (Mac) or Ctrl–C (Windows)) it.
4. Close the file.
5. Return to events-issue21-summer.html.

6. We want the preheader to be the first piece of content on the page, inside the large wrapper table that holds the black background, and above the header table. Paste the code snippet around line 69, as follows:

   <td align="center" bgcolor="#000000">
      <table class="preheader" width="644" cellpadding="0" cellspacing="0" border="0">
         <tr>
            <td align="left" width="400">
               <p>Don't miss these upcoming Jive Factory Events!</p>
            </td>
            <td align="right" width="244">
               <p><a href="http://thejivefactory.com/nl/events-issue21-summer.html" target="_blank">View this email in your browser.</a></p>
            </td>
         </tr>
      </table>
      <table width="644" cellpadding="0" cellspacing="0" border="0" align="center">
         <tr>
            <td align="left">
               <a href="http://thejivefactory.com/index.html" target="_blank">
                  <img class="logo" src="http://thejivefactory.com/nl/images/banner.jpg" height="224" width="644" alt="The Jive Factory Event Calendar">
               </a>
   

7. In the styles, above the .footer rule, add the following rule shown in bold:

   .preheader p {
      font-size: 10px;
   }
   .footer {
   

8. Save the file and reload the page in Chrome.

   The final newsletter will need to be uploaded to the server so email recipients can actually take advantage of this link. Keeping this in mind, let’s get rid of the white margin around the body of the document. The white margin will not be visible in the actual email we will send out but it looks unsightly in the standard web version of the newsletter.

9. Return to your code editor.

10. Add the following new rule, above the h1 rule:

    <style>
       body {
          margin: 0;
       }
       h1 {
          font-family: Arial, Helvetica, sans-serif;
    

11. Save the file and reload the page in Chrome. Much better!

12. We’ve already uploaded a finished version of the newsletter to the server. Go ahead and test the link to the browser version of the newsletter (at the top right).