Wednesday, July 20, 2011

Design tutorial - dynamic height shadow or gradient in email

See the original static height shadow/gradient file and the completed dynamic height shadow/gradient design file.

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&#39;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.

Tuesday, July 19, 2011

Taking a little time for myself

So Joshua is gone on a work trip, and the kids are staying with their mom until Thursday, so I've got a little time off, and I'm using it to pamper myself. Well, sort of.

Yesterday I had to take the animals for their checkup, and deliver Cordelia for a doc appointment. Oh, and I'm still doing that work thing. But, after all that I was able to sit back and watch some Star Trek, eat homemade ice cream (good but ridiculously unhealthy), cook some stirfry (which is basically what I'm living on right now, breakfast lunch and dinner; trying to eat more veggies!) read, work on the drawing for my mom, and get to bed early. Then I even slept in till almost 7! Tonight I've had stirfry again, and made and eaten some frozen yogurt, which is much healthier than the ice cream but I think needs more honey next time.

Its nice to have a little break from the craziness. I do miss the little 'uns, and I'll probably be taking them to the fair on Thursday when I've got them. But today and tomorrow... relaxation time! Well, relaxation and dishes, anyway.