Essential Techniques For E-shot creation for designers and developers

For all you web developers out there, E-shot design may seem like a little bit of a hindrance. It's not what you describe as a fundamental skill to master, but it's something that many of us have to do time and again when you work with, or for a design agency. This is primarily down to you having to turn back time when it comes to your web design skills.

I drew up this set of guidelines as I was commissioned to draw up a fully functional e-shot for a company that specialises in website design Bury called Fluid Digital before they took on their own professional developers. Fluid Digital provide some great e-shot services including design, production and delivery, so be sure to look them up.

Modern positioning and styling techniques center around the following structure:

element/CSS reference model which keeps content and layout separate, for example:

<div id="myElement">My Content</div>

With an accompanying reference in your CSS stylesheet:

#myElement {
display: block;
float: left;
}

That is fine for modern browsers, but when you start creating E-shots, you cannot use this method. No, you have to go 'old-school' and I do mean old school- no element backgrounds, minimal style sheet settings (when you can use them, they have to appear inline with the element). The main reason for going 'old-skool' is because you have to accommodate a number of email clients that all have their own way of doing things. Unfortunately the two most dominant email clients - Microsoft Outlook 2007 and Microsoft Outlook 2010, also have the most restrictions. Microsoft Outlook 2003 is a little more leniant as it used the IE engine to render HTML rather than Microsoft Word.

Designing your eshots can be tricky and I hope to take you through the majority of sticky points in the points below:

Section Layout

Like I mentioned above, you cannot use element/CSS to design your pages. In the case of e-shots, you need to go back to the ways of old and use tables to design your layout. In modern web design, when you go to lay out an element like a <div> you would simple add a background, define the width and how the element is positioned in using CSS. Let's compare the two methods.

The HTML/CSS way

#wrapper {
width:655px;
margin: 0 auto;
}

#column1 {
background-image: url('url/reference');
width: 459px;
float: left;
}

#column2 {
background-image: url('url/reference');
width: 196px;
float: left;
}

#footer {
clear:both;
}

Used in a page, they would look like this:

<div id="wrapper">
<div id="column1">Left Hand Side</div>
<div id="column2">Right Hand Side</div>
<div id="footer"></div>
</div>

With an e-shot, you do not have these CSS luxuries as the elements (usually div elements) do not display well in email clients. The background would not show as background-urls are forbidden, the float would not even work properly in a number of clients, though the width probably would.

Positioning

We use a basic table structure:

<table width="655" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" width="459">Left Hand Side</td>
<td valign="top" width="196">Right Hand Side</td>
</tr>
</table>



With this you get the two column layout, each cell side by side. Notice the width is contained as an attribute of the table, as is the alignment. There is no need for a clearing div as table cells in the same row inherit the height from their tallest sibling. I have also added the valign="top" attribute as content in cells can be a little bit erratic, this just makes sure that all content positions itself in a uniform manner. This is the basic idea behind positioning elements and content in your eshot. You can use all the normal table goodies of colspan as well as using nested tables to create subsections.

Using Background Images

You can't use them if you want your e-shot to pass muster with all email clients, as background-urls are forbidden. But you do have a couple of options. You can either use an image to encompass all your information, but you then run the risk of your emails being spammed out due to an adverse ratio of text:images or you can use the method I have laid out below which allows you to put image into a table that will encompass your text. As you know the amount of content that will be going in your cell this method would work:



Things you can and can't do:

• font-styling(CSS) is fairly safe and you can perform add most attributes like margin and padding, font-weight etc.
• Ideally, you want your container element to be no larger than 655px wide
• Keep the number of links contained in the email to a reasonable amount to avoid Spamming Issues
• CSS styles can be kept in the head, but may cause some problems, it is preferable to keep all CSS inline. One option is to design the Eshot with the styles in your <head> section and then use something like this to convert them to inline styles
• <td>table cells - use valign="top" applied as an attribute to the cell instead of using vertical-align in your CSS.

Here are some tips which could help:

• Basically, when you're building an eshot you are not building a modern web page, you're building a web page like you would have done in 1996!
• If you feel like you certain clients are not important when your perform your validation then you can always choose to ignore them. I always validate against all versions of Outlook - But like I mentioned above, you allow it to pass the Outlook test then it should be fine in all other clients.
• Always include a link to a web page that has the e-shot saved
• Always include an un-subscribe link
• If you can, include a link back to your website, as you never who is looking at the eshot
• Remember to keep your overall width to 655px as this width is the most compatible size with the most amount of clients.