... | ... | @@ -91,375 +91,529 @@ Mehr zum Thema "Template überschreiben" siehe [Template Überschreiben](templat |
|
|
![screencapture-webmail-pcsg-de-2018-12-10-23_33_20](uploads/deaa0a5568a767d182fc1bbb527280d8/screencapture-webmail-pcsg-de-2018-12-10-23_33_20.png)
|
|
|
|
|
|
**Code Beispiel - Layouts**
|
|
|
|
|
|
```html
|
|
|
<!-- ONE COLUMN SECTION -->
|
|
|
<table border="0" cellpadding="0" cellspacing="0" width="100%">
|
|
|
<tr>
|
|
|
<td bgcolor="#ffffff" align="center" style="padding: 70px 15px 70px 15px;" class="section-padding">
|
|
|
<table border="0" cellpadding="0" cellspacing="0" width="500" class="responsive-table">
|
|
|
<tr>
|
|
|
<td>
|
|
|
<table width="100%" border="0" cellspacing="0" cellpadding="0">
|
|
|
<tr>
|
|
|
<td>
|
|
|
<!-- HERO IMAGE -->
|
|
|
<table width="100%" border="0" cellspacing="0" cellpadding="0">
|
|
|
<tbody>
|
|
|
<tr>
|
|
|
<td class="padding-copy">
|
|
|
<table width="100%" border="0" cellspacing="0" cellpadding="0">
|
|
|
<tr>
|
|
|
<td>
|
|
|
<a href="http://alistapart.com/article/can-email-be-responsive/" target="_blank"><img src="img/responsive-email.jpg" width="500" height="200" border="0" alt="Can an email really be responsive?" style="display: block; padding: 0; color: #666666; text-decoration: none; font-family: Helvetica, arial, sans-serif; font-size: 16px; width: 500px; height: 200px;" class="img-max"></a>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</tbody>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td>
|
|
|
<!-- COPY -->
|
|
|
<tr>
|
|
|
<td bgcolor="#ffffff" align="center" style="padding: 70px 15px 70px 15px;" class="section-padding">
|
|
|
<table border="0" cellpadding="0" cellspacing="0" width="500" class="responsive-table">
|
|
|
<tr>
|
|
|
<td>
|
|
|
<table width="100%" border="0" cellspacing="0" cellpadding="0">
|
|
|
<tr>
|
|
|
<td>
|
|
|
<!-- HERO IMAGE -->
|
|
|
<table width="100%" border="0" cellspacing="0" cellpadding="0">
|
|
|
<tbody>
|
|
|
<tr>
|
|
|
<td class="padding-copy">
|
|
|
<table width="100%" border="0" cellspacing="0" cellpadding="0">
|
|
|
<tr>
|
|
|
<td align="center" style="font-size: 25px; font-family: Helvetica, Arial, sans-serif; color: #333333; padding-top: 30px;" class="padding-copy">Yes. Email can be responsive, too.</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td align="center" style="padding: 20px 0 0 0; font-size: 16px; line-height: 25px; font-family: Helvetica, Arial, sans-serif; color: #666666;" class="padding-copy">Using fluid structures, fluid images, and media queries, we can make email (nearly) as responsive as modern websites.</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td>
|
|
|
<a href="https://alistapart.com/article/can-email-be-responsive/"
|
|
|
target="_blank"><img src="img/responsive-email.jpg" width="500"
|
|
|
height="200" border="0"
|
|
|
alt="Can an email really be responsive?"
|
|
|
style="display: block; padding: 0; color: #666666; text-decoration: none; font-family: Helvetica, arial, sans-serif; font-size: 16px; width: 500px; height: 200px;"
|
|
|
class="img-max"></a>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td>
|
|
|
<!-- BULLETPROOF BUTTON -->
|
|
|
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="mobile-button-container">
|
|
|
<tr>
|
|
|
<td align="center" style="padding: 25px 0 0 0;" class="padding-copy">
|
|
|
<table border="0" cellspacing="0" cellpadding="0" class="responsive-table">
|
|
|
<tr>
|
|
|
<td align="center"><a href="http://alistapart.com/article/can-email-be-responsive/" target="_blank" style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #5D9CEC; border-top: 15px solid #5D9CEC; border-bottom: 15px solid #5D9CEC; border-left: 25px solid #5D9CEC; border-right: 25px solid #5D9CEC; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" class="mobile-button">Learn How →</a></td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</tbody>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td>
|
|
|
<!-- COPY -->
|
|
|
<table width="100%" border="0" cellspacing="0" cellpadding="0">
|
|
|
<tr>
|
|
|
<td align="center"
|
|
|
style="font-size: 25px; font-family: Helvetica, Arial, sans-serif; color: #333333; padding-top: 30px;"
|
|
|
class="padding-copy">Yes. Email can be responsive, too.
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td align="center"
|
|
|
style="padding: 20px 0 0 0; font-size: 16px; line-height: 25px; font-family: Helvetica, Arial, sans-serif; color: #666666;"
|
|
|
class="padding-copy">Using fluid structures, fluid images, and media queries, we
|
|
|
can make email (nearly) as responsive as modern websites.
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td>
|
|
|
<!-- BULLETPROOF BUTTON -->
|
|
|
<table width="100%" border="0" cellspacing="0" cellpadding="0"
|
|
|
class="mobile-button-container">
|
|
|
<tr>
|
|
|
<td align="center" style="padding: 25px 0 0 0;" class="padding-copy">
|
|
|
<table border="0" cellspacing="0" cellpadding="0" class="responsive-table">
|
|
|
<tr>
|
|
|
<td align="center"><a
|
|
|
href="https://alistapart.com/article/can-email-be-responsive/"
|
|
|
target="_blank"
|
|
|
style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #5D9CEC; border-top: 15px solid #5D9CEC; border-bottom: 15px solid #5D9CEC; border-left: 25px solid #5D9CEC; border-right: 25px solid #5D9CEC; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;"
|
|
|
class="mobile-button">Learn How →</a></td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
|
|
|
<!-- ONE COLUMN W/ BOTTOM IMAGE SECTION -->
|
|
|
<table border="0" cellpadding="0" cellspacing="0" width="100%">
|
|
|
<tr>
|
|
|
<td bgcolor="#f8f8f8" align="center" style="padding: 70px 15px 0 15px;" class="section-padding-bottom-image">
|
|
|
<table border="0" cellpadding="0" cellspacing="0" width="500" class="responsive-table">
|
|
|
<tr>
|
|
|
<td>
|
|
|
<table width="100%" border="0" cellspacing="0" cellpadding="0">
|
|
|
<tr>
|
|
|
<td>
|
|
|
<!-- COPY -->
|
|
|
<table width="100%" border="0" cellspacing="0" cellpadding="0">
|
|
|
<tr>
|
|
|
<td align="center" style="font-size: 25px; font-family: Helvetica, Arial, sans-serif; color: #333333;" class="padding-copy">Mobile opens are at 48%</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td align="center" style="padding: 20px 0 0 0; font-size: 16px; line-height: 25px; font-family: Helvetica, Arial, sans-serif; color: #666666;" class="padding-copy">With an increasingly mobile audience, can you really afford to keep sending emails designed for desktop?</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td>
|
|
|
<!-- BULLETPROOF BUTTON -->
|
|
|
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="mobile-button-container">
|
|
|
<tr>
|
|
|
<td align="center" style="padding: 25px 0 0 0;" class="padding-copy">
|
|
|
<table border="0" cellspacing="0" cellpadding="0" class="responsive-table">
|
|
|
<tr>
|
|
|
<td align="center"><a href="http://alistapart.com/article/can-email-be-responsive/" target="_blank" style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #48CFAD; border-top: 15px solid #48CFAD; border-bottom: 15px solid #48CFAD; border-left: 25px solid #48CFAD; border-right: 25px solid #48CFAD; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" class="mobile-button">Hell No →</a></td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td>
|
|
|
<!-- BOTTOM IMAGE -->
|
|
|
<table width="100%" border="0" cellspacing="0" cellpadding="0">
|
|
|
<tr>
|
|
|
<td style="padding: 50px 0 0 0;" align="center">
|
|
|
<a href="http://alistapart.com/article/can-email-be-responsive/" target="_blank"><img src="img/line-graph.jpg" width="500" height="180" border="0" alt="Mobile opens are on the rise" class="img-max" style="display: block; padding: 0; font-family: Helvetica, Arial, sans-serif; color: #666666; width: 500px; height: 180px;"></a>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td bgcolor="#f8f8f8" align="center" style="padding: 70px 15px 0 15px;" class="section-padding-bottom-image">
|
|
|
<table border="0" cellpadding="0" cellspacing="0" width="500" class="responsive-table">
|
|
|
<tr>
|
|
|
<td>
|
|
|
<table width="100%" border="0" cellspacing="0" cellpadding="0">
|
|
|
<tr>
|
|
|
<td>
|
|
|
<!-- COPY -->
|
|
|
<table width="100%" border="0" cellspacing="0" cellpadding="0">
|
|
|
<tr>
|
|
|
<td align="center"
|
|
|
style="font-size: 25px; font-family: Helvetica, Arial, sans-serif; color: #333333;"
|
|
|
class="padding-copy">Mobile opens are at 48%
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td align="center"
|
|
|
style="padding: 20px 0 0 0; font-size: 16px; line-height: 25px; font-family: Helvetica, Arial, sans-serif; color: #666666;"
|
|
|
class="padding-copy">With an increasingly mobile audience, can you really afford to
|
|
|
keep sending emails designed for desktop?
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td>
|
|
|
<!-- BULLETPROOF BUTTON -->
|
|
|
<table width="100%" border="0" cellspacing="0" cellpadding="0"
|
|
|
class="mobile-button-container">
|
|
|
<tr>
|
|
|
<td align="center" style="padding: 25px 0 0 0;" class="padding-copy">
|
|
|
<table border="0" cellspacing="0" cellpadding="0" class="responsive-table">
|
|
|
<tr>
|
|
|
<td align="center"><a
|
|
|
href="https://alistapart.com/article/can-email-be-responsive/"
|
|
|
target="_blank"
|
|
|
style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #48CFAD; border-top: 15px solid #48CFAD; border-bottom: 15px solid #48CFAD; border-left: 25px solid #48CFAD; border-right: 25px solid #48CFAD; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;"
|
|
|
class="mobile-button">Hell No →</a></td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td>
|
|
|
<!-- BOTTOM IMAGE -->
|
|
|
<table width="100%" border="0" cellspacing="0" cellpadding="0">
|
|
|
<tr>
|
|
|
<td style="padding: 50px 0 0 0;" align="center">
|
|
|
<a href="https://alistapart.com/article/can-email-be-responsive/"
|
|
|
target="_blank"><img src="img/line-graph.jpg" width="500" height="180" border="0"
|
|
|
alt="Mobile opens are on the rise" class="img-max"
|
|
|
style="display: block; padding: 0; font-family: Helvetica, Arial, sans-serif; color: #666666; width: 500px; height: 180px;"></a>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
|
|
|
<!-- TWO COLUMN SECTION -->
|
|
|
<table border="0" cellpadding="0" cellspacing="0" width="100%">
|
|
|
<tr>
|
|
|
<td bgcolor="#ffffff" align="center" style="padding: 70px 15px 70px 15px;" class="section-padding">
|
|
|
<table border="0" cellpadding="0" cellspacing="0" width="500" class="responsive-table">
|
|
|
<tr>
|
|
|
<td>
|
|
|
<!-- TITLE SECTION AND COPY -->
|
|
|
<table width="100%" border="0" cellspacing="0" cellpadding="0">
|
|
|
<tr>
|
|
|
<td align="center" style="font-size: 25px; font-family: Helvetica, Arial, sans-serif; color: #333333;" class="padding-copy">How does it work?</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td align="center" style="padding: 20px 0 20px 0; font-size: 16px; line-height: 25px; font-family: Helvetica, Arial, sans-serif; color: #666666;" class="padding-copy">Responsive email works on the same principles as RWD:</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td>
|
|
|
<!-- TWO COLUMNS -->
|
|
|
<table cellspacing="0" cellpadding="0" border="0" width="100%">
|
|
|
<tr>
|
|
|
<td valign="top" style="padding: 0;" class="mobile-wrapper">
|
|
|
<!-- LEFT COLUMN -->
|
|
|
<table cellpadding="0" cellspacing="0" border="0" width="47%" align="left" class="responsive-table">
|
|
|
<tr>
|
|
|
<td style="padding: 20px 0 40px 0;">
|
|
|
<table cellpadding="0" cellspacing="0" border="0" width="100%">
|
|
|
<tr>
|
|
|
<td align="center" bgcolor="#ffffff" valign="middle"><a href="http://alistapart.com/article/can-email-be-responsive/" target="_blank"><img src="img/fluid-images.jpg" width="240" height="130" style="display: block; color: #666666; font-family: Helvetica, arial, sans-serif; font-size: 13px; width: 240px; height: 130px;" alt="Fluid images" border="0" class="img-max"></a></td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td align="center" style="padding: 15px 0 0 0; font-family: Arial, sans-serif; color: #333333; font-size: 20px;" bgcolor="#ffffff">Fluid Images</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td align="center" style="padding: 5px 0 0 0; font-family: Arial, sans-serif; color: #666666; font-size: 14px; line-height: 20px;" bgcolor="#ffffff"><span class="appleBody"><span style="font-family:Lucida Console, monospace;">max-width:100%</span> is your friend, just like on the web.</span></td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td bgcolor="#ffffff" align="center" style="padding: 70px 15px 70px 15px;" class="section-padding">
|
|
|
<table border="0" cellpadding="0" cellspacing="0" width="500" class="responsive-table">
|
|
|
<tr>
|
|
|
<td>
|
|
|
<!-- TITLE SECTION AND COPY -->
|
|
|
<table width="100%" border="0" cellspacing="0" cellpadding="0">
|
|
|
<tr>
|
|
|
<td align="center"
|
|
|
style="font-size: 25px; font-family: Helvetica, Arial, sans-serif; color: #333333;"
|
|
|
class="padding-copy">How does it work?
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td align="center"
|
|
|
style="padding: 20px 0 20px 0; font-size: 16px; line-height: 25px; font-family: Helvetica, Arial, sans-serif; color: #666666;"
|
|
|
class="padding-copy">Responsive email works on the same principles as RWD:
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td>
|
|
|
<!-- TWO COLUMNS -->
|
|
|
<table cellspacing="0" cellpadding="0" border="0" width="100%">
|
|
|
<tr>
|
|
|
<td valign="top" style="padding: 0;" class="mobile-wrapper">
|
|
|
<!-- LEFT COLUMN -->
|
|
|
<table cellpadding="0" cellspacing="0" border="0" width="47%" align="left"
|
|
|
class="responsive-table">
|
|
|
<tr>
|
|
|
<td style="padding: 20px 0 40px 0;">
|
|
|
<table cellpadding="0" cellspacing="0" border="0" width="100%">
|
|
|
<tr>
|
|
|
<td align="center" bgcolor="#ffffff" valign="middle"><a
|
|
|
href="https://alistapart.com/article/can-email-be-responsive/"
|
|
|
target="_blank"><img src="img/fluid-images.jpg" width="240"
|
|
|
height="130"
|
|
|
style="display: block; color: #666666; font-family: Helvetica, arial, sans-serif; font-size: 13px; width: 240px; height: 130px;"
|
|
|
alt="Fluid images" border="0"
|
|
|
class="img-max"></a></td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td align="center"
|
|
|
style="padding: 15px 0 0 0; font-family: Arial, sans-serif; color: #333333; font-size: 20px;"
|
|
|
bgcolor="#ffffff">Fluid Images
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td align="center"
|
|
|
style="padding: 5px 0 0 0; font-family: Arial, sans-serif; color: #666666; font-size: 14px; line-height: 20px;"
|
|
|
bgcolor="#ffffff"><span class="appleBody"><span
|
|
|
style="font-family:Lucida Console, monospace;">max-width:100%</span> is your friend, just like on the web.</span>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
<!-- RIGHT COLUMN -->
|
|
|
<table cellpadding="0" cellspacing="0" border="0" width="47%" align="right" class="responsive-table">
|
|
|
<tr>
|
|
|
<td style="padding: 20px 0 40px 0;">
|
|
|
<table cellpadding="0" cellspacing="0" border="0" width="100%">
|
|
|
<tr>
|
|
|
<td align="center" bgcolor="#ffffff" valign="middle"><a href="http://alistapart.com/article/can-email-be-responsive/" target="_blank"><img src="img/fluid-structure.jpg" width="240" height="130" style="display: block; color: #666666; font-family: Helvetica, arial, sans-serif; font-size: 13px; width: 240px; height: 130px;" alt="Fluid structures" border="0" class="img-max"></a></td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td align="center" style="padding: 15px 0 0 0; font-family: Arial, sans-serif; color: #333333; font-size: 20px;" bgcolor="#ffffff">Fluid Structure</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td align="center" style="padding: 5px 0 0 0; font-family: Arial, sans-serif; color: #666666; font-size: 14px; line-height: 20px;" bgcolor="#ffffff"><span class="appleBody">You can use percentage-based tables, too. Don’t touch <em>ems</em>, though.</span></td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
<!-- RIGHT COLUMN -->
|
|
|
<table cellpadding="0" cellspacing="0" border="0" width="47%" align="right"
|
|
|
class="responsive-table">
|
|
|
<tr>
|
|
|
<td style="padding: 20px 0 40px 0;">
|
|
|
<table cellpadding="0" cellspacing="0" border="0" width="100%">
|
|
|
<tr>
|
|
|
<td align="center" bgcolor="#ffffff" valign="middle"><a
|
|
|
href="https://alistapart.com/article/can-email-be-responsive/"
|
|
|
target="_blank"><img src="img/fluid-structure.jpg" width="240"
|
|
|
height="130"
|
|
|
style="display: block; color: #666666; font-family: Helvetica, arial, sans-serif; font-size: 13px; width: 240px; height: 130px;"
|
|
|
alt="Fluid structures" border="0"
|
|
|
class="img-max"></a></td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td align="center"
|
|
|
style="padding: 15px 0 0 0; font-family: Arial, sans-serif; color: #333333; font-size: 20px;"
|
|
|
bgcolor="#ffffff">Fluid Structure
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td align="center"
|
|
|
style="padding: 5px 0 0 0; font-family: Arial, sans-serif; color: #666666; font-size: 14px; line-height: 20px;"
|
|
|
bgcolor="#ffffff"><span class="appleBody">You can use percentage-based tables, too. Don’t touch <em>ems</em>, though.</span>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td>
|
|
|
<!-- TWO COLUMNS -->
|
|
|
<table cellspacing="0" cellpadding="0" border="0" width="100%">
|
|
|
<tr>
|
|
|
<td valign="top" style="padding: 0;" class="mobile-wrapper">
|
|
|
<!-- LEFT COLUMN -->
|
|
|
<table cellpadding="0" cellspacing="0" border="0" width="47%" align="left" class="responsive-table">
|
|
|
<tr>
|
|
|
<td style="padding: 20px 0 40px 0;">
|
|
|
<table cellpadding="0" cellspacing="0" border="0" width="100%">
|
|
|
<tr>
|
|
|
<td align="center" bgcolor="#ffffff" valign="middle"><a href="http://alistapart.com/article/can-email-be-responsive/" target="_blank"><img src="img/media-queries.jpg" width="240" height="130" style="display: block; color: #666666; font-family: Helvetica, arial, sans-serif; font-size: 13px; width: 240px; height: 130px;" alt="Media queries" border="0" class="img-max"></a></td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td align="center" style="padding: 15px 0 0 0; font-family: Arial, sans-serif; color: #333333; font-size: 20px;" bgcolor="#ffffff">Media Queries</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td align="center" style="padding: 5px 0 0 0; font-family: Arial, sans-serif; color: #666666; font-size: 14px; line-height: 20px;" bgcolor="#ffffff"><span class="appleBody">They don’t work everywhere, but when they do…</span></td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td>
|
|
|
<!-- TWO COLUMNS -->
|
|
|
<table cellspacing="0" cellpadding="0" border="0" width="100%">
|
|
|
<tr>
|
|
|
<td valign="top" style="padding: 0;" class="mobile-wrapper">
|
|
|
<!-- LEFT COLUMN -->
|
|
|
<table cellpadding="0" cellspacing="0" border="0" width="47%" align="left"
|
|
|
class="responsive-table">
|
|
|
<tr>
|
|
|
<td style="padding: 20px 0 40px 0;">
|
|
|
<table cellpadding="0" cellspacing="0" border="0" width="100%">
|
|
|
<tr>
|
|
|
<td align="center" bgcolor="#ffffff" valign="middle"><a
|
|
|
href="https://alistapart.com/article/can-email-be-responsive/"
|
|
|
target="_blank"><img src="img/media-queries.jpg" width="240"
|
|
|
height="130"
|
|
|
style="display: block; color: #666666; font-family: Helvetica, arial, sans-serif; font-size: 13px; width: 240px; height: 130px;"
|
|
|
alt="Media queries" border="0"
|
|
|
class="img-max"></a></td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td align="center"
|
|
|
style="padding: 15px 0 0 0; font-family: Arial, sans-serif; color: #333333; font-size: 20px;"
|
|
|
bgcolor="#ffffff">Media Queries
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td align="center"
|
|
|
style="padding: 5px 0 0 0; font-family: Arial, sans-serif; color: #666666; font-size: 14px; line-height: 20px;"
|
|
|
bgcolor="#ffffff"><span class="appleBody">They don’t work everywhere, but when they do…</span>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
<!-- RIGHT COLUMN -->
|
|
|
<table cellpadding="0" cellspacing="0" border="0" width="47%" align="right" class="responsive-table">
|
|
|
<tr>
|
|
|
<td style="padding: 20px 0 40px 0;">
|
|
|
<table cellpadding="0" cellspacing="0" border="0" width="100%">
|
|
|
<tr>
|
|
|
<td align="center" bgcolor="#ffffff" valign="middle"><a href="http://alistapart.com/article/can-email-be-responsive/" target="_blank"><img src="img/bulletproof-buttons.jpg" width="240" height="130" style="display: block; color: #666666; font-family: Helvetica, arial, sans-serif; font-size: 13px; width: 240px; height: 130px;" alt="Bulletproof buttons" border="0" class="img-max"></a></td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td align="center" style="padding: 15px 0 0 0; font-family: Arial, sans-serif; color: #333333; font-size: 20px;" bgcolor="#ffffff">Bulletproof Buttons</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td align="center" style="padding: 5px 0 0 0; font-family: Arial, sans-serif; color: #666666; font-size: 14px; line-height: 20px;" bgcolor="#ffffff"><span class="appleBody">Don’t use images for buttons. There’s a better way.</span></td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
<!-- RIGHT COLUMN -->
|
|
|
<table cellpadding="0" cellspacing="0" border="0" width="47%" align="right"
|
|
|
class="responsive-table">
|
|
|
<tr>
|
|
|
<td style="padding: 20px 0 40px 0;">
|
|
|
<table cellpadding="0" cellspacing="0" border="0" width="100%">
|
|
|
<tr>
|
|
|
<td align="center" bgcolor="#ffffff" valign="middle"><a
|
|
|
href="https://alistapart.com/article/can-email-be-responsive/"
|
|
|
target="_blank"><img src="img/bulletproof-buttons.jpg" width="240"
|
|
|
height="130"
|
|
|
style="display: block; color: #666666; font-family: Helvetica, arial, sans-serif; font-size: 13px; width: 240px; height: 130px;"
|
|
|
alt="Bulletproof buttons" border="0"
|
|
|
class="img-max"></a></td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td align="center"
|
|
|
style="padding: 15px 0 0 0; font-family: Arial, sans-serif; color: #333333; font-size: 20px;"
|
|
|
bgcolor="#ffffff">Bulletproof Buttons
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td align="center"
|
|
|
style="padding: 5px 0 0 0; font-family: Arial, sans-serif; color: #666666; font-size: 14px; line-height: 20px;"
|
|
|
bgcolor="#ffffff"><span class="appleBody">Don’t use images for buttons. There’s a better way.</span>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
|
|
|
|
|
|
<!-- COMPACT ARTICLE SECTION -->
|
|
|
<table border="0" cellpadding="0" cellspacing="0" width="100%">
|
|
|
<tr>
|
|
|
<td bgcolor="#f8f8f8" align="center" style="padding: 70px 15px 70px 15px;" class="section-padding">
|
|
|
<table border="0" cellpadding="0" cellspacing="0" width="500" style="padding:0 0 20px 0;" class="responsive-table">
|
|
|
<!-- TITLE -->
|
|
|
<tr>
|
|
|
<td align="left" style="padding: 0 0 10px 130px; font-size: 25px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: #333333;" class="padding-copy" colspan="2">Resources for learning more</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td valign="top" style="padding: 40px 0 0 0;" class="mobile-hide"><a href="https://litmus.com/community" target="_blank"><img src="img/litmus-logo.jpg" alt="Litmus" width="105" height="105" border="0" style="display: block; font-family: Arial; color: #666666; font-size: 14px; width: 105px; height: 105px;"></a></td>
|
|
|
<td style="padding: 40px 0 0 0;" class="no-padding">
|
|
|
<!-- ARTICLE -->
|
|
|
<table border="0" cellspacing="0" cellpadding="0" width="100%">
|
|
|
<tr>
|
|
|
<td align="left" style="padding: 0 0 5px 25px; font-size: 13px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: #aaaaaa;" class="padding-meta">Litmus Community</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td align="left" style="padding: 0 0 5px 25px; font-size: 22px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: #333333;" class="padding-copy">A growing community for email professionals</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td align="left" style="padding: 10px 0 15px 25px; font-size: 16px; line-height: 24px; font-family: Helvetica, Arial, sans-serif; color: #666666;" class="padding-copy">Share knowledge, ask code questions, and learn from a growing library of articles on all things email.</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td style="padding:0 0 45px 25px;" align="left" class="padding">
|
|
|
<table border="0" cellspacing="0" cellpadding="0" class="mobile-button-container">
|
|
|
<tr>
|
|
|
<td align="center">
|
|
|
<!-- BULLETPROOF BUTTON -->
|
|
|
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="mobile-button-container">
|
|
|
<tr>
|
|
|
<td align="center" style="padding: 0;" class="padding-copy">
|
|
|
<table border="0" cellspacing="0" cellpadding="0" class="responsive-table">
|
|
|
<tr>
|
|
|
<td align="center"><a href="https://litmus.com/community" target="_blank" style="font-size: 15px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #F6BB42; border-top: 10px solid #F6BB42; border-bottom: 10px solid #F6BB42; border-left: 20px solid #F6BB42; border-right: 20px solid #F6BB42; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" class="mobile-button">Learn More →</a></td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td bgcolor="#f8f8f8" align="center" style="padding: 70px 15px 70px 15px;" class="section-padding">
|
|
|
<table border="0" cellpadding="0" cellspacing="0" width="500" style="padding:0 0 20px 0;"
|
|
|
class="responsive-table">
|
|
|
<!-- TITLE -->
|
|
|
<tr>
|
|
|
<td align="left"
|
|
|
style="padding: 0 0 10px 130px; font-size: 25px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: #333333;"
|
|
|
class="padding-copy" colspan="2">Resources for learning more
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td valign="top" style="padding: 40px 0 0 0;" class="mobile-hide"><a href="https://litmus.com/community"
|
|
|
target="_blank"><img
|
|
|
src="img/litmus-logo.jpg" alt="Litmus" width="105" height="105" border="0"
|
|
|
style="display: block; font-family: Arial; color: #666666; font-size: 14px; width: 105px; height: 105px;"></a>
|
|
|
</td>
|
|
|
<td style="padding: 40px 0 0 0;" class="no-padding">
|
|
|
<!-- ARTICLE -->
|
|
|
<table border="0" cellspacing="0" cellpadding="0" width="100%">
|
|
|
<tr>
|
|
|
<td align="left"
|
|
|
style="padding: 0 0 5px 25px; font-size: 13px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: #aaaaaa;"
|
|
|
class="padding-meta">Litmus Community
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td align="left"
|
|
|
style="padding: 0 0 5px 25px; font-size: 22px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: #333333;"
|
|
|
class="padding-copy">A growing community for email professionals
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td align="left"
|
|
|
style="padding: 10px 0 15px 25px; font-size: 16px; line-height: 24px; font-family: Helvetica, Arial, sans-serif; color: #666666;"
|
|
|
class="padding-copy">Share knowledge, ask code questions, and learn from a growing library
|
|
|
of articles on all things email.
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td style="padding:0 0 45px 25px;" align="left" class="padding">
|
|
|
<table border="0" cellspacing="0" cellpadding="0" class="mobile-button-container">
|
|
|
<tr>
|
|
|
<td align="center">
|
|
|
<!-- BULLETPROOF BUTTON -->
|
|
|
<table width="100%" border="0" cellspacing="0" cellpadding="0"
|
|
|
class="mobile-button-container">
|
|
|
<tr>
|
|
|
<td align="center" style="padding: 0;" class="padding-copy">
|
|
|
<table border="0" cellspacing="0" cellpadding="0" class="responsive-table">
|
|
|
<tr>
|
|
|
<td align="center"><a href="https://litmus.com/community"
|
|
|
target="_blank"
|
|
|
style="font-size: 15px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #F6BB42; border-top: 10px solid #F6BB42; border-bottom: 10px solid #F6BB42; border-left: 20px solid #F6BB42; border-right: 20px solid #F6BB42; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;"
|
|
|
class="mobile-button">Learn More →</a>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td valign="top" style="padding: 40px 0 0 0;" class="mobile-hide"><a href="http://templates.mailchimp.com" target="_blank"><img src="img/mailchimp-logo.jpg" alt="Freddie!" width="105" height="105" border="0" style="display: block; font-family: Arial; color: #666666; font-size: 14px; width: 105px; height: 105px;"></a></td>
|
|
|
<td style="padding: 40px 0 0 0;" class="no-padding">
|
|
|
<!-- ARTICLE -->
|
|
|
<table border="0" cellspacing="0" cellpadding="0" width="100%">
|
|
|
<tr>
|
|
|
<td align="left" style="padding: 0 0 5px 25px; font-size: 13px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: #aaaaaa;" class="padding-meta">MailChimp Template Reference</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td align="left" style="padding: 0 0 5px 25px; font-size: 22px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: #333333;" class="padding-copy">A stunning introduction to email design and coding</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td align="left" style="padding: 10px 0 15px 25px; font-size: 16px; line-height: 24px; font-family: Helvetica, Arial, sans-serif; color: #666666;" class="padding-copy">MailChimp’s Fabio Carneiro unleashes an amazing resource for learning more about all aspects of email design.</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td style="padding:0 0 45px 25px;" align="left" class="padding">
|
|
|
<table border="0" cellspacing="0" cellpadding="0" class="mobile-button-container">
|
|
|
<tr>
|
|
|
<td align="center">
|
|
|
<!-- BULLETPROOF BUTTON -->
|
|
|
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="mobile-button-container">
|
|
|
<tr>
|
|
|
<td align="center" style="padding: 0;" class="padding-copy">
|
|
|
<table border="0" cellspacing="0" cellpadding="0" class="responsive-table">
|
|
|
<tr>
|
|
|
<td align="center"><a href="http://templates.mailchimp.com" target="_blank" style="font-size: 15px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #5D9CEC; border-top: 10px solid #5D9CEC; border-bottom: 10px solid #5D9CEC; border-left: 20px solid #5D9CEC; border-right: 20px solid #5D9CEC; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" class="mobile-button">Learn More →</a></td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td valign="top" style="padding: 40px 0 0 0;" class="mobile-hide"><a
|
|
|
href="https://templates.mailchimp.com" target="_blank"><img src="img/mailchimp-logo.jpg"
|
|
|
alt="Freddie!" width="105"
|
|
|
height="105" border="0"
|
|
|
style="display: block; font-family: Arial; color: #666666; font-size: 14px; width: 105px; height: 105px;"></a>
|
|
|
</td>
|
|
|
<td style="padding: 40px 0 0 0;" class="no-padding">
|
|
|
<!-- ARTICLE -->
|
|
|
<table border="0" cellspacing="0" cellpadding="0" width="100%">
|
|
|
<tr>
|
|
|
<td align="left"
|
|
|
style="padding: 0 0 5px 25px; font-size: 13px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: #aaaaaa;"
|
|
|
class="padding-meta">MailChimp Template Reference
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td align="left"
|
|
|
style="padding: 0 0 5px 25px; font-size: 22px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: #333333;"
|
|
|
class="padding-copy">A stunning introduction to email design and coding
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td align="left"
|
|
|
style="padding: 10px 0 15px 25px; font-size: 16px; line-height: 24px; font-family: Helvetica, Arial, sans-serif; color: #666666;"
|
|
|
class="padding-copy">MailChimp’s Fabio Carneiro unleashes an amazing resource for
|
|
|
learning more about all aspects of email design.
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td style="padding:0 0 45px 25px;" align="left" class="padding">
|
|
|
<table border="0" cellspacing="0" cellpadding="0" class="mobile-button-container">
|
|
|
<tr>
|
|
|
<td align="center">
|
|
|
<!-- BULLETPROOF BUTTON -->
|
|
|
<table width="100%" border="0" cellspacing="0" cellpadding="0"
|
|
|
class="mobile-button-container">
|
|
|
<tr>
|
|
|
<td align="center" style="padding: 0;" class="padding-copy">
|
|
|
<table border="0" cellspacing="0" cellpadding="0" class="responsive-table">
|
|
|
<tr>
|
|
|
<td align="center"><a href="https://templates.mailchimp.com"
|
|
|
target="_blank"
|
|
|
style="font-size: 15px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #5D9CEC; border-top: 10px solid #5D9CEC; border-bottom: 10px solid #5D9CEC; border-left: 20px solid #5D9CEC; border-right: 20px solid #5D9CEC; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;"
|
|
|
class="mobile-button">Learn More →</a>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td valign="top" style="padding: 40px 0 0 0;" class="mobile-hide"><a href="http://www.campaignmonitor.com/resources/" target="_blank"><img src="img/campaign-monitor-logo.jpg" alt="Campaign Monitor" width="105" height="105" border="0" style="display: block; font-family: Arial; color: #666666; font-size: 14px; width: 105px; height: 105px;"></a></td>
|
|
|
<td style="padding: 40px 0 0 0;" class="no-padding">
|
|
|
<!-- ARTICLE -->
|
|
|
<table border="0" cellspacing="0" cellpadding="0" width="100%">
|
|
|
<tr>
|
|
|
<td align="left" style="padding: 0 0 5px 25px; font-size: 13px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: #aaaaaa;" class="padding-meta">Campaign Monitor Guides</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td align="left" style="padding: 0 0 5px 25px; font-size: 22px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: #333333;" class="padding-copy">A fantastic library of information</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td align="left" style="padding: 10px 0 15px 25px; font-size: 16px; line-height: 24px; font-family: Helvetica, Arial, sans-serif; color: #666666;" class="padding-copy">Campaign Monitor puts out some amazing resources. These guides, as well as their Ultimate Guide to CSS, are constant companions.</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td style="padding:0 0 45px 25px;" align="left" class="padding">
|
|
|
<table border="0" cellspacing="0" cellpadding="0" class="mobile-button-container">
|
|
|
<tr>
|
|
|
<td align="center">
|
|
|
<!-- BULLETPROOF BUTTON -->
|
|
|
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="mobile-button-container">
|
|
|
<tr>
|
|
|
<td align="center" style="padding: 0;" class="padding-copy">
|
|
|
<table border="0" cellspacing="0" cellpadding="0" class="responsive-table">
|
|
|
<tr>
|
|
|
<td align="center"><a href="http://www.campaignmonitor.com/resources/" target="_blank" style="font-size: 15px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #4FC1E9; border-top: 10px solid #4FC1E9; border-bottom: 10px solid #4FC1E9; border-left: 20px solid #4FC1E9; border-right: 20px solid #4FC1E9; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" class="mobile-button">Learn More →</a></td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td valign="top" style="padding: 40px 0 0 0;" class="mobile-hide"><a
|
|
|
href="https://www.campaignmonitor.com/resources/" target="_blank"><img
|
|
|
src="img/campaign-monitor-logo.jpg" alt="Campaign Monitor" width="105" height="105" border="0"
|
|
|
style="display: block; font-family: Arial; color: #666666; font-size: 14px; width: 105px; height: 105px;"></a>
|
|
|
</td>
|
|
|
<td style="padding: 40px 0 0 0;" class="no-padding">
|
|
|
<!-- ARTICLE -->
|
|
|
<table border="0" cellspacing="0" cellpadding="0" width="100%">
|
|
|
<tr>
|
|
|
<td align="left"
|
|
|
style="padding: 0 0 5px 25px; font-size: 13px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: #aaaaaa;"
|
|
|
class="padding-meta">Campaign Monitor Guides
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td align="left"
|
|
|
style="padding: 0 0 5px 25px; font-size: 22px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: #333333;"
|
|
|
class="padding-copy">A fantastic library of information
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td align="left"
|
|
|
style="padding: 10px 0 15px 25px; font-size: 16px; line-height: 24px; font-family: Helvetica, Arial, sans-serif; color: #666666;"
|
|
|
class="padding-copy">Campaign Monitor puts out some amazing resources. These guides, as well
|
|
|
as their Ultimate Guide to CSS, are constant companions.
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td style="padding:0 0 45px 25px;" align="left" class="padding">
|
|
|
<table border="0" cellspacing="0" cellpadding="0" class="mobile-button-container">
|
|
|
<tr>
|
|
|
<td align="center">
|
|
|
<!-- BULLETPROOF BUTTON -->
|
|
|
<table width="100%" border="0" cellspacing="0" cellpadding="0"
|
|
|
class="mobile-button-container">
|
|
|
<tr>
|
|
|
<td align="center" style="padding: 0;" class="padding-copy">
|
|
|
<table border="0" cellspacing="0" cellpadding="0" class="responsive-table">
|
|
|
<tr>
|
|
|
<td align="center"><a
|
|
|
href="https://www.campaignmonitor.com/resources/"
|
|
|
target="_blank"
|
|
|
style="font-size: 15px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #4FC1E9; border-top: 10px solid #4FC1E9; border-bottom: 10px solid #4FC1E9; border-left: 20px solid #4FC1E9; border-right: 20px solid #4FC1E9; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;"
|
|
|
class="mobile-button">Learn More →</a></td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
``` |
|
|
\ No newline at end of file |