Adding & Styling Links

Topics Covered in This HTML Email Tutorial:

Coding Links to Open in a New Tab or Window, Advanced Link Styling Techniques, Strategic Use of the !important Rule for Email Client Compatibility

Exercise Preview

Exercise Overview

In this comprehensive exercise, we'll transform a static email template into an interactive marketing piece by adding strategic links to the Jive Factory website. Email recipients will be able to click through to discover venue information, explore upcoming events, and take action—critical elements for driving engagement and conversions in email marketing campaigns.

More importantly, we'll implement advanced link styling techniques specifically designed for email clients. Unlike web development, HTML email requires specialized approaches to ensure consistent rendering across the fragmented landscape of email clients, each with their own CSS interpretation quirks and limitations.

1. For this exercise, we'll work with a fresh set of files containing an expanded version of the Jive Factory email from previous lessons. This updated template includes additional events and provides the perfect foundation for implementing a comprehensive linking strategy.

   Before proceeding, close any open files in your code editor to maintain a clean workspace and avoid potential confusion between different versions.

2. In your code editor, open events-issue21-summer.html from the Jive Factory Ready for Links folder. Double-check that you're accessing the correct directory—this is crucial for following along with the exercise successfully.

Adding a Footer

Professional email templates require well-structured footers that provide essential business information and legal compliance elements. Let's build a footer that maintains our design consistency while meeting industry standards.

1. Navigate to approximately line 143 and locate the <!—end listing—> comment that marks the conclusion of the final event listing.

2. Immediately below that comment, insert a new table structure for our footer content as shown below in bold:

   <!—end listing—>
      <table>
         <tr>
            <td></td>
         </tr>
      </table>
   </td>

3. To maintain visual consistency with the main content area, configure the table width to match our established 644px layout while eliminating default browser spacing. Add the following essential attributes to the table tag:

   <table width="644" cellpadding="0" cellspacing="0" border="0">
      <tr>
         <td></td>
      </tr>
   </table>

4. Center-aligned footer content creates a professional, balanced appearance that's become standard in modern email design. Apply the alignment attribute to the td tag and structure it to accommodate our footer content:

   <table width="644" cellpadding="0" cellspacing="0" border="0">
      <tr>
         <td align="center">
   
         </td>
      </tr>
   </table>

5. Save your progress before proceeding to the next step.

6. To streamline the workflow, we've prepared the footer content in a separate file. Navigate to Jive Factory Ready for Links > snippets and open content-footer.html.

7. Select and copy all the text contained within content-footer.html.

8. Close the content-footer.html file to maintain workspace clarity.

9. Return to your events-issue21-summer.html file to continue with the implementation.

10. Paste the footer content into the empty table cell you created, resulting in the following structure:

    <table width="644" cellpadding="0" cellspacing="0" border="0">
       <tr>
          <td align="center">
             All content &copy; The Jive Factory.  |   580 Lispenard St. New York, NY 10012   |   Open All Week 4pm&ndash;4am | Unsubscribe
          </td>
       </tr>
    </table>

    NOTE: Unsubscribe functionality is not just best practice—it's legally mandated by anti-spam regulations including CAN-SPAM, GDPR, and similar international laws. Most professional email marketing platforms (Mailchimp, Campaign Monitor, Constant Contact, Klaviyo, etc.) automatically inject compliant unsubscribe mechanisms into your campaigns. Always consult your platform's documentation to understand their specific implementation and ensure legal compliance.

11. Now we'll apply custom styling to achieve the desired visual presentation. Add the following class attribute to the td tag:

    <td align="center" class="footer">
       All content &copy; The Jive Factory.  |   580 Lispenard St. New York, NY 10012   |   Open All Week 4pm&ndash;4am | Unsubscribe
    </td>

12. Navigate to the CSS section near the top of your document and add the following rule at the end of your existing styles (around line 39):

    .footer {
       font-family: Arial, Helvetica, sans-serif;
       font-size: 10px;
       font-weight: bold;
       color: #fcb802;
       padding: 20px;
    }

13. Save your work and preview the page in a browser, scrolling down to examine the newly implemented footer styling.

Adding Links to Images & Removing a Default Border

Strategic link placement maximizes engagement opportunities in email marketing. Every clickable element represents a potential conversion, making comprehensive link implementation essential for campaign success.

1. We'll begin with the banner image, which serves as prime real estate for driving traffic to your main website. Locate the banner image (approximately line 55) and wrap it with a link tag as shown in bold:

   <a href="https://thejivefactory.com">
      <img src="images/banner.jpg" height="224" width="644">
   </a>

   NOTE: Email environments require absolute URLs rather than relative paths for all external links. While we're using local images during development for efficiency, we'll convert these to absolute URLs using Find and Replace functionality in the next exercise—a crucial step before deployment.

2. Implementing the target attribute ensures links open in new tabs when emails are viewed in web-based clients, preserving the email context while allowing users to explore your website. Add this attribute to the anchor tag:

   <a href="https://thejivefactory.com" target="_blank">
      <img src="images/banner.jpg" height="224" width="644">
   </a>

3. Save your file and test the functionality by previewing the page in a browser.
4. Click the header image to verify that it opens the Jive Factory website in a new tab, demonstrating proper link functionality.

5. Return to your code editor and locate the CSS section near the top of the document, specifically finding the img rule around line 20.

6. Legacy email clients often apply unsightly blue borders around linked images—a visual artifact that undermines professional email design. Prevent this by adding border removal to the img rule:

   img {
      display: block;
      border: 0;
   }

7. Save your changes to ensure the border removal is applied consistently across all images.

Creating Links in Event Tables

Event listings require multiple strategic link placements to accommodate different user behaviors. Some recipients prefer clicking on dates, others on headlines, and many are drawn to images or pricing information. Providing multiple pathways to the same destination significantly improves click-through rates.

Understanding element relationships is crucial for email development: h1 and p tags are block elements that naturally stack vertically, while span and a tags are inline elements that flow horizontally within text lines.

Email service providers like Mailchimp enforce strict HTML validation rules, specifically prohibiting block elements (such as p tags) nested inside inline elements (like a tags). This constraint requires placing individual links within each block element rather than wrapping multiple elements with a single link—a fundamental difference from standard web development practices.

1. Start by adding a link to the date and time information of the first event listing. Find the td tag around line 72 and wrap the content with an anchor tag as follows:

   <td align="right" valign="top" width="130">
      <p>
         <a href="https://thejivefactory.com/autumn-experiment.html" target="_blank">
            Friday<br>
            <span class="date">July 13</span><br>
            8:30&ndash;11:00pm
         </a>
      </p>
   </td>

2. Apply the same linking strategy to the event heading, which often receives the highest click engagement. Modify the first event heading around line 82:

   <td align="left">
      <h1>
         <a href="https://thejivefactory.com/autumn-experiment.html" target="_blank">
            <span class="intro">Local Showcase:</span> The Autumn Spirit Experiment
         </a>
      </h1>

3. Images often attract clicks due to their visual prominence. Wrap the band image with a link around line 87:

   </h1>
   <a href="https://thejivefactory.com/autumn-experiment.html" target="_blank">
      <img src="images/autumn-experiment.jpg" height="284" width="480">
   </a>
   <p>The Autumn Spirit Experiment is the avant-gaze-ers' attempt at soaring, shimmering, indie pocket rock.

4. Pricing information frequently drives purchase decisions, making it a critical link placement. Add a link to the ticket pricing around line 91:

   <p class="tickets">
         <a href="https://thejivefactory.com/autumn-experiment.html" target="_blank">
            $5 adv / $7-day of show
         </a>
      </p>
   </td>

5. Save your work and preview the first event in a browser. You'll notice that linked text now displays with default browser styling—colored and underlined rather than the intended white text. This standard link appearance occurs across all browsers and email clients until custom styling overrides it.

   Test each link to verify functionality before proceeding to style customization. We'll address the visual presentation in the next section.

   NOTE: Additional events would require similar link implementation, but we'll focus on mastering the technique with this single example.

Styling the Links

Custom link styling in email requires a defensive approach due to email client inconsistencies. We'll implement robust CSS rules that maintain design integrity across various platforms while ensuring optimal readability and user experience.

1. Our first priority is restoring white text color for improved readability against the dark background. Navigate to the CSS section near the top of your document.

2. Add the following link styling rule below the existing img rule:

   img {
      display: block;
      border: 0;
   }
   a {
      color: #ffffff;
      text-decoration: none;
   }

3. Save your changes and preview the styled links in a browser to observe the improved appearance.

4. Return to your code editor for the final styling enhancement.

5. Email clients frequently inject their own CSS rules that can override custom styling. The !important declaration provides defense against these intrusions by giving our rules maximum priority. Implement this protection as shown in bold:

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

   The !important declaration must be positioned immediately before the semicolon to function correctly. This CSS property essentially instructs the browser to prioritize our styling over competing rules, including those injected by email clients. While !important should be used sparingly in web development, it's often necessary in email development to combat aggressive client-side style injection.

6. Save your final changes to complete the link styling implementation.