Ask The Marketing Team: Simple HTML Email Layouts

How do I make my email blast look as good as yours with the shadow and the blue on the sides?

Thanks for the question Brent. When I created the iContact email template, I used HTML tables to construct the file. Tables are not “cutting edge” when it comes to HTML, but neither are most email clients being used today. If you want your emails to display consistently, you’ll need to go back to basics.There is one large table set to the full width of the browser, which has the background color set to our dark blue (#226699). Inside that table, there is another table centered with a width of 620 pixels and the background color is set to white (#ffffff).
Good practice is to keep your HTML email templates no more than 650-700 pixels wide. This is to accommodate all the various email clients your subscribers might be using. I chose 620, just to be safe.
Here is the basic table structure in the HTML file:<table width=”100%” bgcolor=”#226699″ cellpadding=”0″ cellspacing=”0″ border=”0”><tr><td align=”center”>

</td></tr></table>
The second table has a CELLPADDING set to “20” to give the white box 20 pixels of padding on all 4 sides. This is so the text does not run right to the edge of the white box. You’ll want your text to have a little room on the sides, making it easier to read. You can add more padding if you choose.

The shadow at the top of the email is just an image. I created it using Adobe Photoshop, a designer’s best friend. There are many free/cheaper options for graphics programs if you aren’t fortunate enough to have your employer buy it for you.

If you’re not the type to dig into the HTML and create your own images, we do offer a service at iContact for this very thing. The Premium Services team is always willing to help anyone with custom template needs.

AND…

For those of you that haven’t heard, we are close to launching our new MessageBuilder, which should make it easier for our customers to build beautiful emails themselves.