How to create a template using HTML code

Here you can find useful instructions on how to create a template with HTML code.

– Use HTML code to create your communication in complete freedom

If you already have your newsletter’s HTML code, just copy and paste it in the dedicated section. This way you will not have any restriction in terms of graphic design. Then, you will edit your contents using the visual editor. You can switch from the visual editor to the HTML editor just by clicking on the dedicated tabs.

1template

 

Here you can find a few tips on how to create a template using HTML code:

<table>

First of all, always remember that HTML code should be as simple as possible. It is fundamental to built the newsletter layout using only tabs. That’s because many email clients cannot read <div> tags and related features. We suggest choosing a 600 pixels width for your newsletter, doing so you will be sure that contents will be correctly visualized also on mobile devices.

<td>

To set the newsletter tab width in the right way, we suggest to assign to every <td> the corresponding width in pixels. Therefore, avoid combining tab width, <td> width and <td> padding; otherwise your newsletter will probably be visualized in different ways on different clients.

This is an example of a correct application of the tag:

<table>     <tr>         <td width=”100″>Hello!</td>         <td width=”500″>I love Kloudymail!<td>     </tr> </table>

Complex structures?

The most effective way to create the HTML of a complex structure is to use tab nesting so that you can get the best results on the main email clients.

CSS

Forget external working sheets or placed in the <head> tag! Unfortunately, if you want to be sure that your newsletter styles will be visualized correctly, you must write all the styles in line and for every tag within the code. Yes, it’s a chore! L

Style “font”

Do not use contracted CSS to define the font style. Every font’s feature must be stated separately, just like in the following example:

<p style=”font-family: Arial, sans-seif; font-size: 11px; font-weight: bold; line-height: 1em; color: #FF0055;”> …

Style “color”

Colors cannot be contracted too, they must always contain hexadecimal characters that identify them (use #FF0055 instead of #F05).

Links

Many email clients apply a default color to textual links within the newsletter. This color can affect the style of the whole newsletter. To prevent this issue we suggest to use styles in line both for <a> tag and for <span> tag placed within <a> tag, like in the following example:

<a href=”http://www.kloudymail.com” style=”color: #88ff55;”>   <span style=”color: #88ff55;”>     Visita il sito di Kloudymail!   </span> </a>

Moreover, to avoid to end in SPAM always control that:

1) Links added to the newsletter are valid;
2) Don’t use the domain name in the link text, because this may not coincide with the actual sending domain and alert email clients.

Images

Never forget that subscribers do not always visualize images. Therefore, you must be sure that the most important contents are not displayed only inside them. For this reason, try to replace the image meaning adding their description using “alt” and “title” tags: “alt” tag will contain a brief description, while title could contain a longer description.

We suggest to always choose the image size using the “width” attribute, otherwise some email clients may “invent” wrong dimensions. Moreover, verify that images have the right dimensions. For example, do not insert in the newsletter an image with a real width of 2500 pixel inside and then resize it to 600px using “width” attribute.

Outlook uses some padding pixels for images. To avoid this problem, it is necessary to define “display: block;” style.

An example:

<img src=”kloudymail.jpg” width=”150″ alt=”Kloudymail” title=”Kloudymail, limitless like sky” style=”display: block;”>

Use images in JPG and GIF format. PNG images are not visualized on all the email clients. Moreover, never add spaces in the image name because this may create visualization problems.

Videos

Right now, the only way to “animate” your newsletter is to add an animated GIF, because this is the only “video” format supported by email clients.

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *