Preparing the newsletter template in Photoshop

First thing you should do is to decide where to arrange the graphic and how large it should be. Start with opening your template in Photoshop.

Editing the template

Tools needed: Adobe Photoshop

Choose Crop from the Drop Down Menu, Image

ph1

You can also use Guides. They are not necessary; however they will make your tasks easier.

ph2

After applying the Guide on our template, you now have to decide on the optimal size. Less changes means less code, making your job easier.

 ph3

You are now ready to save it in HTML format. Do this by choosing Save For Web from the File menu.

ph4

It is best to choose UTF-8 code.

After saving it in the desired folder, you can now see the template and HTML code.

You can now save the entire file into a ZIP file. Then go to SALESmanago, Email Marketing Tab => Email Templates and click on Import ZIP.

 ph5

After importing ZIP file you can rename it and choose whether or not it should be SHARED.

CODING:

Newsletters are coded mostly in the HTML – in order for them to be accepted by various emails systems, Outlook, Gmail, etc. You also have to keep in mind two very important aspects regarding sending emails:

  • Certain email systems will not accept emails with graphics.
  • The more graphics you add, the more likely they will be blocked by ANTISPAM filters.

With this in mind, it is important to code the majority of the email with HTML.

The simplest templates will be coded with the following code:

<table style="text-align: center; width: 680px;" border="0" cellspacing="0" cellpadding="0" align="center">

<tbody>

<tr>

<td width="" height=""></td>

</tr>

</tbody>

</table>

First adjustments will be to decide how wide and long it should be, img src.

<td width="78" height="46">

<img src="images/profimedical9_02.gif" width="78" height="46" alt=""></td>

Now we can choose the background colour.  <td> artybut bgcolor=”#color_code”.

<td width="300" height="200" bgcolor="#j4j4j4">

You should always remember to save changes if they are no automatically saved in Photoshop.

<td width="78" height="46">

<img style=”display:block;” src=”URL obrazka” border=”0” alt=”opcjonalnie, np. gdy obrazek jest logiem” width="78" height="46"/></td>

For cell phones that cannot accept graphics in an email, do the following:

<td bgcolor=”kolor, jeśli nie biały” valign=”top/middle/bottom”   width="78" height="46" ></td>

Text is formatted within the margins, <p></p>:

<p style="font-family: Arial, Arial Black, Calibri, Georgia, Helvetica; Tahoma; Times New Roman, Verdana; font-size: 20px; color: kolor; font-weight: normal; line-height: 21px; margin: 10px 10px 10px 10px; text-align: justify;"><span style="font-size: 25px; font-weight: bold; color: kolor;>Naglówek</span><br>Tekst własciwy </p>

Font-family: font type

Font-size: font size

Color: font colour

Font-weight: font style

Line-height: space between the lines

Margin: margins

Text-align: text adjustment

Enter:

<p style="font-family: calibri; text-align: center; margin: 30px 10px 20px 10px; font-weight: bold; font-size: 18px; color: #000000;">

<a style="background-color: #0e5300 !important; color: #ffffff; text-decoration: none; padding: 10px; border-radius: 10px;" href="link">Przycisk</a></p>

And now you have your customized template.

If you need more information about the topic mentioned above, please contact us: support@salesmanago.com +1 800 960 0640