recently, i put together a great looking email for a send that we were executing with an outside third-party vendor - a list rental send (don't get me started on this, i don't like them either!) - but that said, being that these recipients hadn't ever interacted with us before it was a great prime opportunity to put our best foot forward, which meant to put a great piece together for them to get a great first impression.
the resulting email was a great looking piece - which actually got a few compliments from other staff members who hoped that i was moving all of the emails forward (design wise) with this type of communication. it was slick and sexy. but there in lies the challenge... slick and sexy best foot forward emails come at a price.
the first is design. they take a while to layout in photoshop and the mind numbing attention to detail of taking the print out, a ruler, multiple color pens, and devising where to slice up the graphics. i'm probably the only person who does this like this - it just helps me to figure out how big to make my tables in my html. but none-the-less it's a labor intensive process.
then there is actually making the slices and saving all of them and uploading them to server so that you can actually get to the coding process.
coding, wow... you can spend hours getting images to line up and so forth, not to mention thinking about how it's going to render once your send tool sends them out. so all of that said, i still wanted the email to be really slick. so i used background images - i'll wait until you pick yourself up off the floor....
you back yet? i heard you say from here, while you were falling off your chair, "kirk background images don't work..." that's what the vendor told me too - outlook won't render background images. well guess what, they will you just have to know how to hack them. it's not as difficult as you might think.
background images work in a lot of the email clients, but they fail to render in outlook - which restrains the slickness that we as marketers can do for those readers. that said this works in outlook.
let's start with what i call the wrapper - think of it as the <body> tag an webpage. it's the farthest background of the email. (replace the text in red with your file names, color codes, and sizes.)
include this bit of code directly below the <body> tag:
<div style="background-color:hex-dex_color_code_should_the_image_not_render;">then directly above the </body> tag:
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="tile" src="your_full-width_image_url" color="same_hex-dex_as_above"/>
</v:background>
<![endif]-->
<table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top" align="left" background="your_full-width_image_url">
</td>so that takes care of the wrapper, or the background. now the tricky part - using embedded images in the email itself - or rather using them as a cell background for a table - i do everything in tables, just to be safe.
</tr>
</table>
</div>
build your table for the content area, something like this:
<table width="640" cellpadding="0" cellspacing="0" border="0" align="center">for the next part of the table, the <td> tag, set it to look like this:
<tr>
<td background="your_embedded_image_url" width="xx" height="yy" bgcolor="hex-dex_color_code_should_the_image_not_render" valign="top">then, build out another table within that <td> tag, this will hold the content and messaging:
<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display:inline-block;position:absolute; height:yypx; width:xxpx; top:0; left:0; border:0; z-index:1;' src="your_embedded_image_url"/>
<v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display:inline-block;position:absolute; height:yypx; width:xxpx;top:0;left:0;border:0;z-index:2;'>
<div>
<![endif]-->
<table width="xx" cellpadding="0" cellspacing="0" border="0">finally, under the closing table tag for the content table, include this:
<tr>
<td width="xx" height="yy">your content here</td>
</tr>
</table>
<!--[if gte mso 9]>with that code in your snippet library, you'll be able to build out some pretty slick and sexy looking emails. let me know how it goes!
</div>
</v:shape>
<![endif]-->
</td>
</tr>
</table>
0 comments:
Post a Comment