Let’s code email campaigns (4/6): Banners and sections
In our template we have 5 types of components we have not talked about yet. Let’s go through them one by one.
Standalone banner
Adding standalone banner is super simple, link your image (making sure path to the image is absolute, no /img/something.jpg) and set it to display:block and max-width:100%.
<tr>
<td>
<a href=”#” target=”_blank”><img src=”https://gallery.mailchimp.com/99296cba23fe4aa7d71093a67/images/7d939f97-72ea-49b6-a123-e83f82612148.jpg" style=”max-width: 100%; display: block” alt=”Awesome header” title=”Awesome header”></a>
</td>
</tr>Two columns with copy
With two columns of copy right next to one another, we need to think about how they will behave on mobile. They have to stay two columns on desktop but span to full size on mobile.
<tr>
<td>
<table border=”0" cellpadding=”0" cellspacing=”0" width=”100%” style=”max-width: 600px;”>
<tr>
<td>
<! — [if (gte mso 9)|(IE)]>
<table border=”0" cellspacing=”0" cellpadding=”0" width=”600">
<tr>
<td align=”left” valign=”top” width=”300">
<![endif] →
<div style=”width: 50%; float: left; vertical-align: top;” class=”responsive-full”>
<table border=”0" cellpadding=”0" cellspacing=”0" width=”100%” style=”font-family:Arial, Helvetica, sans-serif; font-size: 14px;”>
<tr>
<td style=”width: 20px” class=”resp-equal-space”></td>
<td>
<p style=”padding: 0; margin: 0; font-size: 24px; font-weight: bold”>Title here</p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a vestibulum lorem, sit amet aliquam turpis. Etiam id cursus lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </td>
<td style=”width: 10px” class=”resp-equal-space”></td>
</tr>
</table>
</div>
<! — [if (gte mso 9)|(IE)]>
</td>
<td align=”right” valign=”top” width=”300">
<![endif] →
<div style=”width: 50%; float: left; vertical-align: top;” class=”responsive-full”>
<table border=”0" cellpadding=”0" cellspacing=”0" width=”100%” style=”font-family:Arial, Helvetica, sans-serif; font-size: 14px;”>
<tr>
<td style=”width: 10px” class=”resp-equal-space”></td>
<td>
<p style=”padding: 0; margin: 0; font-size: 24px; font-weight: bold”>Title here too</p>Morbi blandit fermentum nunc, non pretium turpis convallis a. Aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed nibh nibh. In eget lorem in mi blandit auctor eget eget elit.</td>
<td style=”width: 20px” class=”resp-equal-space”></td>
</tr>
</table>
</div>
<! — [if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif] →
</td>
</tr>
</table>
</td>
</tr>Just as we did with our header and footer, we use <div> and media queries to make them expand to full width and then Outlook conditional code so Outlook doesn’t wreck our design.
Spacer
Sometimes you might need vertical or horizontal space between banners. For horizontal space putting width on a <td> works fine
<td style=”width: 20px”></td>For vertical spacing it’s best to use a 1px transparent image and just stretch it to the height needed. Put required height on both td and your image just to be on the safe side ;)
<tr>
<td height=”40">
<img src=”https://gallery.mailchimp.com/99296cba23fe4aa7d71093a67/images/79f65f55-8608-41ae-9b94-8345b2eef6c9.png" style=”height: 40px;”>
</td>
</tr>Make sure you put height on an image but don’t include width. If you set it to max-width:100% as you would on other images, Yahoo mail will expand your spacers to have equal height and width of 100% and that will create massive gaps in your template.
If you need a space in a big block of text you can use <br /> but for creating any other spacing, use the above ways.
Image cut in pieces
We have an animated gif in our template and to save on kb, that image it cut in three pieces stacked together in one table. That way only the middle section is animating, while top and bottom are static. I’m talking about cat eyes changing color.
<table border=”0" cellpadding=”0" cellspacing=”0" width=”100%”>
<tr>
<td>
<table border=”0" cellpadding=”0" cellspacing=”0" width=”100%”>
<tr>
<td style=”width: 20px” class=”resp-equal-space”></td>
<td><img src=”https://gallery.mailchimp.com/99296cba23fe4aa7d71093a67/images/ba14ffe8-fc7e-4034–9ac7-f8edbf8b52a4.jpg” style=”max-width: 100%; display: block” alt=”cat photo” title=”cat photo”></td>
</tr>
<tr>
<td style=”width: 20px” class=”resp-equal-space”></td>
<td>
<img src="https://gallery.mailchimp.com/99296cba23fe4aa7d71093a67/images/198def39-e8ca-4b9d-9df5-de484d254928.gif" style=”max-width: 100%; display: block” alt=”cat photo” title=”cat photo”>
</td>
</tr>
<tr>
<td style=”width: 20px” class=”resp-equal-space”></td>
<td>
<img src=”https://gallery.mailchimp.com/99296cba23fe4aa7d71093a67/images/6460e2a0–5595–48e4-b926–33850ca7ef26.jpg” style=”max-width: 100%; display: block” alt=”cat photo” title=”cat photo”>
</td>
</tr>
</table>
</td>
<td style=”width: 10px” class=”resp-equal-space”></td>
</tr>
</table>Basically what we have here is a table inside a <td> with three rows and one piece of image on each row.
That’s the left table, on the right in a separate <td> we have copy with a new element not talked about yet which is a button.
You can use images as buttons but having in mind that subscribers can see copy before images are loaded, we should style <td> to fake a button.
<td style=”background-color: #44c2f9; display: inline-block; padding: 15px 30px; border-radius: 5px; max-width: 170px; text-align: center” class=”animatedButton”><a href=”#” style=”display: inline-block;
color: #ffffff; font-size: 16px; text-decoration: none” target=”_blank”>CLICK TO WIN ></a></td>
Let’s skip what an ‘animatedButton’ class does for now. We will talk about it in the next part of this tutorial.
In our example we style our button to be light blue box with rounded corners and padding around the copy inside. Note that for our button, border radius is not supported everywhere but in case it doesn’t work, a normal rectangle button will be visible. More on what styles are supported where you can find here.
Full width copy with button
In this section both copy and CTA are on separate rows with spacers in-between. No special magic needed :)
<table border=”0" cellpadding=”0" cellspacing=”0" width=”100%” style=”max-width: 600px;”>
<tr>
<td style=”width: 20px” class=”resp-equal-space”></td>
<td>
<table border=”0" cellpadding=”0" cellspacing=”0" width=”100%” style=”font-family:Arial, Helvetica, sans-serif; font-size: 14px;”>
<tr>
<td>
<p style=”padding: 0; margin: 0; font-size: 30px; font-weight: bold; text-align: center”>All photos used in this email<br /> are my own</p>
</td>
</tr>
<tr>
<td height=”40">
<img src=”https://gallery.mailchimp.com/99296cba23fe4aa7d71093a67/images/79f65f55–8608–41ae-9b94–8345b2eef6c9.png” style=”height: 20px;”>
</td>
</tr>
<tr style=”text-align: center;”>
<td style=”background-color: #44c2f9; display: inline-block; padding: 15px 30px; border-radius: 5px; max-width: 300px;”>
<a href=”https://www.flickr.com/photos/arisusaktos/” style=” color: #ffffff; font-size: 16px; text-decoration: none” target=”_blank”>VIEW MORE ></a>
</td>
</tr>
</table>
</td>
<td style=”width: 20px” class=”resp-equal-space”></td>
</tr>
</table>