Alt Text on Banner Swap

Topics Covered in This HTML Email Tutorial:

Adding an Invisible Shim Image, Assigning ALT Text to a Shim

Exercise Preview

Exercise Overview

In this exercise you will take a closer look at the mobile banner. Unlike regular images in an email, background images cannot be assigned ALT text. If a mobile email client does not load images, the reader wouldn’t know what the banner is for.

Getting Started

1. Open your code editor if it isn’t already open.

2. We’ll be switching to a new folder of prepared files for this exercise. Close all open files in your code editor to avoid confusion.

3. Open date-night-exclusive-picks.html from the Desktop > Class Files > yourname-Responsive HTML Email Class folder.

Adding an Invisible Image

In order to assign ALT text to the background image, we will add a small transparent.gif inside the table cell.

1. Preview date-night-exclusive-picks.html in Chrome.
2. Let’s disable images to see what the email looks like if users do not load images. We can do that Chrome’s settings. Keep this page open, and create a new tab in Chrome.
3. At the top right of Chrome’s window click the Settings button and from the menu choose Settings.
4. At the top, in the Search settings field type in image
5. Click on Site Settings.
6. Click on Images.
7. Click the toggle button to the right of Show all (recommended).
8. Keep this tab open, but switch back to the tab for your email.
9. Reload the page and all the images should disappear.
10. Resize the browser window smaller to trigger the media query, showing the mobile phone style (you’ll have to open the DevTools to get the viewable area small enough).

Note how there is no ALT text for the banner.

1. Return to your code editor.

2. Scroll down to the mobileBanner table cell (around line 128), noting the header.png image. We are going to add a tiny, invisible image that will hold our ALT text.

3. Directly before the header image, add the following code in bold:

   <td class="mobileBanner" align="center" width="100%">
      <p class="preheader">Punch-drunk in love? Go boxing with your sweetheart. This and more great dates inside!</p>
      <a href="https://www.example.com" target="_blank"><img src="http://www.nobledesktop.com/nl-date-night/img/shim.gif" width="1" height="1" ALT="Date Night Mobile" align="center" class="shim"><img class="resImage" src="http://www.nobledesktop.com/nl-date-night/img/header.png" width="680" ALT="Date Night"></a>

   NOTE: A 1x1 pixel gif is often called a shim or spacer. While popular in the early days of HTML email, they have fallen out of favor and are not recommended as a best practice. Here, it is necessary to get the ALT text we’re looking for.

   Notice that the ALT description is on the shim. By applying the text we want here, we’ll create the appearance of having an ALT description on the background image.

4. Let’s create some style rules for this new image. Though it’s nearly invisible, we would prefer to hide the shim.gif when possible.

5. At the bottom of the general styles, around line 59, add the following rule as shown in bold below:

   img.shim {
      display: none;
   }

Making the ALT Text Appear in Mobile View

1. Scroll down to max-width: 480px media query. At the bottom of the media query, add the following rule as shown below in bold:

   img.shim {
      display: block!important;
      width: 100%!important;
   }

   NOTE: Make sure you do not have a space between block and !important to avoid an issue in Yahoo.

2. Save the file.
3. Reload the page in Chrome.
4. The browser window should still be narrow to show the mobile view, but take some time to resize the window in out and in again to compare the mobile view to the desktop view. The ALT text should read Date Night Mobile on the mobile view.
5. Return to your code editor.

6. Now that we know it works, we can edit the ALT text so it reads correctly. In the shim image (around line 137), delete the word Mobile from the ALT text so it reads as follows:

   <img src="http://www.nobledesktop.com/nl-date-night/img/shim.gif" width="1" height="1" ALT="Date Night" align="center" class="shim">

7. Save the file.
8. Reload the page in Chrome to see the correct ALT text.
9. We’re finished so you should turn image back on. Switch back to the Settings tab that should still be open in Chrome.
10. Click the toggle button to the right of Do not show any images.
11. Switch back to the tab with your email.

12. Reload the page and you should be able to see all the images again.