Please note: this article is out-dated; the new Enudge Drag and Drop Editor makes creating complex email campaign designs a breeze. Read more here.
Sometimes it is unavoidable that your email is a very complex combination of images, including backgrounds behind text, meaning that the only way to reliably reproduce the email is to use a collection of image blocks. [Note, using just one image will probably result in an image size that’s too big to upload into your Enudge account, but more importantly, email gateways are more likely to consider your email to be spam if it comprises just one image.]
We recommend that your email always contains at least some text on its own, because it has 2 benefits:
1/ It helps ensure people actually read your email. Some people will have their email program set to not download images, by default. For those people, including text within your message gives that person something they can see prior to downloading images; that something should encourage them to download the images to view the full message.
2/ When you subsequently hyperlink to your email campaign using either the ‘Share in Social’ or ‘View in Browser’ links, Google can determine the content of the email and therefore list the link to your email in appropriate search results. Google can determine the content of your email only via the text inside it; it can’t read text that is actually part of an image.
This article takes you through a quick way to create an email comprising horizontal slices from your email campaign design, which we will assume is a flat image.
We also provide the base code that you can use for your overall email frame (i.e. table) and the code for each section or slice of the email design (i.e. row in your table).
-
To use the example code please start by ensuring that your email content image is 750px wide (you may need to use your image editor to re-size it).
-
Depending on the height of the image, you will need to split it into a number of images. On average 3 slices of your image will ensure that each image is small enough (< 200 kb) to upload into your Enudge account, but for a very long image you may need to use more slices.
-
Select a portion of your image using your image editor being sure to choose an obvious break point for your image so that you can start the next slice at the right place. [Some image editors give you a slice function, so that you can create all slices at once. Otherwise your image editor may have a grid function allowing you to easily select different sections of your image via snap to grid selection.] Copy the section (Ctrl+C) and create a new image by pasting into a new image file using your image editor, and name it so that you can easily know which part this is of your image (e.g. numbers on then end of the file name). [Some image editors allow you to choose the quality setting as you save, and will show you the size of the image before you save it – these are very useful options to help you keep the image < 200 kb.]
-
Repeat step 3 for the remaining sections of your email message. We recommend that you make a note of the height, in pixels of each image as you create them … you will need this for step 8 below.
-
Now that you have your images created, create a new Enudge campaign, and remove any contents inside the email editor, and then paste in the sample code at the bottom of this article.
-
From the Insert menu of the email editor, click on the ‘Insert/Edit Image’ option, then click on the ‘Browse’ icon (it is to the right of the ‘Source’ box), and then upload each of your newly created slice images.
-
Select the first image in the campaign, right click and select Insert / Edit image. Click on the ‘Browse’ icon, locate your first image, select it, and then click OK. Repeat for each image in your campaign.
-
From the Tools menu of the email editor, choose ‘Source Code’. Then you need to find the 3 places where the height of each image is specified in the sample code as shown below:
Sample code for full email message:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{
margin:0;
padding:0;
}
img{
border:0 none !important;
text-decoration:none;
margin: 0 !important;
padding: 0 !important;
-ms-interpolation-mode: bicubic;
display:block;
clear: both;
}
a img{
border:0 none;
}
table, td{
border-collapse:collapse;
cellpadding: 0;
cellspacing: 0;
border: 0;
margin:0 !important;
padding:0 !important;
mso-table-lspace: 0;
mso-table-rspace: 0;
}
</style>
</head>
<body>
<table style="margin: 0; border-collapse: collapse !important; padding: 0; cellpadding: 0; cellspacing: 0; mso-table-lspace: 0; mso-table-rspace: 0;" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td style="margin: 0; border-collapse: collapse !important; padding: 0; cellpadding: 0; cellspacing: 0; mso-table-lspace: 0; mso-table-rspace: 0; line-height: 225px;" height="225"><img style="border: 0; border-width: 0px; margin: 0px;" src="https://www.enudge.com.au/tempImages/sample-image1.jpg" width="750" height="225" /></td>
</tr>
<tr>
<td style="margin: 0; border-collapse: collapse !important; padding: 0; cellpadding: 0; cellspacing: 0; mso-table-lspace: 0; mso-table-rspace: 0; line-height: 225px;" height="225"><img style="border: 0; border-width: 0px; margin: 0px;" src="https://www.enudge.com.au/tempImages/sample-image2.jpg" width="750" height="225" /></td>
</tr>
<tr>
<td style="margin: 0; border-collapse: collapse !important; padding: 0; cellpadding: 0; cellspacing: 0; mso-table-lspace: 0; mso-table-rspace: 0; line-height: 225px;" height="225"><img style="border: 0; border-width: 0px; margin: 0px;" src="https://www.enudge.com.au/tempImages/sample-image3.jpg" width="750" height="225" /></td>
</tr>
<tr>
<td style="margin: 0; border-collapse: collapse !important; padding: 0; cellpadding: 0; cellspacing: 0; mso-table-lspace: 0; mso-table-rspace: 0; line-height: 225px;" height="225"><img style="border: 0; border-width: 0px; margin: 0px;" src="https://www.enudge.com.au/tempImages/sample-image4.jpg" width="750" height="225" /></td>
</tr>
<tr>
<td style="margin: 0; border-collapse: collapse !important; padding: 0; cellpadding: 0; cellspacing: 0; mso-table-lspace: 0; mso-table-rspace: 0; line-height: 225px;" height="225"><img style="border: 0; border-width: 0px; margin: 0px;" src="https://www.enudge.com.au/tempImages/sample-image5.jpg" width="750" height="225" /></td>
</tr>
</tbody>
</table>If you have more than 5 image slices, copy the last section of code that looks like the sample above, and paste it immediately after the last one of these sections (just before the end of table code). If you have less than 5 image slices, delete the sections from the start the ‘tr’ to the closing ‘/tr’.
Once you have created an email campaign this way, you can create your next campaign more quickly next time by simply copying it into a new campaign.