The Problem:
Our old email template was plain, white, boring. We wanted to add a background, border, rounded corners, and a shadow.
Unfortunately, email clients are notorious for being difficult to design in. Email requires design techniques I rarely use anymore - tables. The top and bottom of the email was no problem - because the width was fixed, I was able to just use images to simulate the outer box.
<tr>
<td width="20" height="20" style="padding:0;margin:0;font-size: 0pt;"><img src="http://www.trilliumarts.com/img/tutorial/promo-corner1.gif" width="20" height="20" alt=""></td>
<td height="20" width="650" background="http://www.trilliumarts.com/img/tutorial/promo-top.gif" style="padding:0;margin:0;font-size: 0pt;"><img src="http://www.trilliumarts.com/img/tutorial/promo-top.gif" height="20" width="650"></td>
<td width="26" height="20" style="padding:0;margin:0;font-size: 0pt;"><img src="http://www.trilliumarts.com/img/tutorial/promo-corner2.gif" width="26" height="20" alt=""></td>
</tr>The next section was more difficult. The box height had to be fixed, because some email programs would ignore the background-image property (I tried both linking and embedding the image; it made no difference), as well as ignore an inline css background-image.
<tr >
<td width="20" height="500" background="http://www.trilliumarts.com/img/tutorial/promo-left-side.gif" style="padding:0;margin:0;font-size: 0pt;"><img src="http://www.trilliumarts.com/img/tutorial/promo-left-side.gif" width="20" height="500" alt=""></td>
<td valign="top" >
<table border="0" cellpadding="5" cellspacing="0">
<tr>
<td>
<a href="" target="_blank"><img src="http://www.trilliumarts.com/img/tutorial/logo-small.gif" alt="Inspire - Together we're better" width="200" height="45" border="0" longdesc=""></a><br><br>
<font color="#000000" face="Arial, sans-serif" size="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet est semper elit condimentum faucibus. Vivamus eu metus tortor, in adipiscing enim. Morbi dignissim arcu quis erat viverra volutpat. Maecenas convallis arcu non neque placerat a ullamcorper turpis ullamcorper. Vestibulum vitae lacus sed mauris blandit facilisis.<br><br>
<center><img src="http://www.trilliumarts.com/img/tutorial/failgoat.jpg"><br><br></center>
Ut vel dolor nulla, at ullamcorper arcu. Mauris at sapien id ante pharetra viverra. Donec porttitor ultricies rhoncus. Pellentesque et nisi suscipit risus pretium convallis sed eu tortor. Proin bibendum libero at tortor malesuada aliquam. Maecenas nec massa sed arcu volutpat condimentum sed vitae orci. Praesent tempor, orci in consectetur euismod, turpis nunc placerat lectus, eu scelerisque urna neque vel elit. Etiam convallis fringilla risus, aliquet bibendum felis tincidunt eu.<br><br></font>
</td>
</tr>
</table>
</td>
<td width="26" height="500" background="http://www.trilliumarts.com/img/tutorial/promo-right-side.gif" style="padding:0;margin:0;font-size: 0pt;"><img src="http://www.trilliumarts.com/img/tutorial/promo-right-side.gif" width="26" height="500" alt=""></td>
</tr>
When it came to our daily newsletter, we had no idea how long the email would be, as it depended on how many groups a member belonged to, as well as how much activity there was in a group that day. When the email got longer than the specified size of the images that made up the sides, it would look like this in some email clients:
Not putting a height on the <td> and setting the <img> inside to 100% would not work; td's don't pass along their heights, and so the height of the img would at best be the height of the screen.
The Solution:
I couldn't find any answers online to this problem. I noticed that bgcolor seemed to work just fine in every mail client I tried (any mail client that supported html, of course). It then struck me that this could be my (somewhat ugly, but workable) solution.
I had the original promo-left-side.gif and promo-right-side.gif, which I opened in Photoshop. promo-left-side.gif was easy enough - it was 20px wide, and only had two colors, a blue for the border, and white for the rest. I made a 1px x 1px clear gif to save the correct amount of space, and then I created 20 td's to replace the one td with a background.
<td width="1" bgcolor="#CCCCFF" style="padding:0;margin:0;font-size: 0pt;"><img src="/img/tutorial/clear.gif" width="1" height="1"></td>
<td width="1" bgcolor="#FFFFFF" style="padding:0;margin:0;font-size: 0pt;"><img src="/img/tutorial/clear.gif" width="1" height="1"></td>
<td width="1" bgcolor="#FFFFFF" style="padding:0;margin:0;font-size: 0pt;"><img src="/img/tutorial/clear.gif" width="1" height="1"></td>
<td width="1" bgcolor="#FFFFFF" style="padding:0;margin:0;font-size: 0pt;"><img src="/img/tutorial/clear.gif" width="1" height="1"></td>Etc, etc.
promo-right-side.gif was more of a challenge, because of the shadow gradient. I zoomed in with Photoshop, and matched the background colors to each of the individual pixels.
This is what the code ended up looking like:
<td width="1" bgcolor="#FFFFFF" style="padding:0;margin:0;font-size: 0pt;"><img src="http://inspire/images/clear.gif" width="1" height="1"></td>
<td width="1" bgcolor="#FFFFFF" style="padding:0;margin:0;font-size: 0pt;"><img src="http://inspire/images/clear.gif" width="1" height="1"></td>
<td width="1" bgcolor="#FFFFFF" style="padding:0;margin:0;font-size: 0pt;"><img src="http://inspire/images/clear.gif" width="1" height="1"></td>
<td width="1" bgcolor="#FFFFFF" style="padding:0;margin:0;font-size: 0pt;"><img src="http://inspire/images/clear.gif" width="1" height="1"></td>
<td width="1" bgcolor="#FFFFFF" style="padding:0;margin:0;font-size: 0pt;"><img src="http://inspire/images/clear.gif" width="1" height="1"></td>
<td width="1" bgcolor="#FFFFFF" style="padding:0;margin:0;font-size: 0pt;"><img src="http://inspire/images/clear.gif" width="1" height="1"></td>
<td width="1" bgcolor="#FFFFFF" style="padding:0;margin:0;font-size: 0pt;"><img src="http://inspire/images/clear.gif" width="1" height="1"></td>
<td width="1" bgcolor="#FFFFFF" style="padding:0;margin:0;font-size: 0pt;"><img src="http://inspire/images/clear.gif" width="1" height="1"></td>
<td width="1" bgcolor="#CCCCFF" style="padding:0;margin:0;font-size: 0pt;"><img src="http://inspire/images/clear.gif" width="1" height="1"></td>
<td width="1" bgcolor="#B2B7D7" style="padding:0;margin:0;font-size: 0pt;"><img src="http://inspire/images/clear.gif" width="1" height="1"></td>
<td width="1" bgcolor="#B5BBDA" style="padding:0;margin:0;font-size: 0pt;"><img src="http://inspire/images/clear.gif" width="1" height="1"></td>
<td width="1" bgcolor="#B9BEDD" style="padding:0;margin:0;font-size: 0pt;"><img src="http://inspire/images/clear.gif" width="1" height="1"></td>
<td width="1" bgcolor="#BEC3E2" style="padding:0;margin:0;font-size: 0pt;"><img src="http://inspire/images/clear.gif" width="1" height="1"></td>
<td width="1" bgcolor="#C3C9E6" style="padding:0;margin:0;font-size: 0pt;"><img src="http://inspire/images/clear.gif" width="1" height="1"></td>
<td width="1" bgcolor="#C7CEEA" style="padding:0;margin:0;font-size: 0pt;"><img src="http://inspire/images/clear.gif" width="1" height="1"></td>
<td width="1" bgcolor="#CCD3EE" style="padding:0;margin:0;font-size: 0pt;"><img src="http://inspire/images/clear.gif" width="1" height="1"></td>
<td width="1" bgcolor="#D1D8F2" style="padding:0;margin:0;font-size: 0pt;"><img src="http://inspire/images/clear.gif" width="1" height="1"></td>
<td width="1" bgcolor="#D5DBF5" style="padding:0;margin:0;font-size: 0pt;"><img src="http://inspire/images/clear.gif" width="1" height="1"></td>
<td width="1" bgcolor="#D8DFF8" style="padding:0;margin:0;font-size: 0pt;"><img src="http://inspire/images/clear.gif" width="1" height="1"></td>
<td width="1" bgcolor="#DAE1FA" style="padding:0;margin:0;font-size: 0pt;"><img src="http://inspire/images/clear.gif" width="1" height="1"></td>
<td width="1" bgcolor="#DCE3FC" style="padding:0;margin:0;font-size: 0pt;"><img src="http://inspire/images/clear.gif" width="1" height="1"></td>
<td width="1" bgcolor="#DFE6FE" style="padding:0;margin:0;font-size: 0pt;"><img src="http://inspire/images/clear.gif" width="1" height="1"></td>
<td width="1" bgcolor="#DFE6FE" style="padding:0;margin:0;font-size: 0pt;"><img src="http://inspire/images/clear.gif" width="1" height="1"></td>
<td width="1" bgcolor="#E0E7FF" style="padding:0;margin:0;font-size: 0pt;"><img src="http://inspire/images/clear.gif" width="1" height="1"></td>
<td width="1" bgcolor="#E0E7FF" style="padding:0;margin:0;font-size: 0pt;"><img src="http://inspire/images/clear.gif" width="1" height="1"></td>
<td width="1" bgcolor="#E0E7FF" style="padding:0;margin:0;font-size: 0pt;"><img src="http://inspire/images/clear.gif" width="1" height="1"></td>
That's a full 26 <td>'s to replace a 26px wide image. I then had to add colspan="20" and colspan="26" to the corner td's. And after all that, this is what it looks like in every email client I've tested:
Yay!
See the original static height shadow/gradient file and the completed dynamic height shadow/gradient design file.
No comments :
Post a Comment