A few tips for an Outlook-proof Html

You just created your newsletter and it’s perfect. All the links work and you passed the spam check. You send a test email and… surprise! On Outlook it’s a mess! Texts are out of place and images are not visualized. Why?

Every provider reads emails’ HTML code in its own way, and in particular Outlook has problems in reading some tags, like background images.

Creating newsletters with our drag&drop editor K-Bricks is a good way to overcome such problems, but if you decide to use HTML you must be careful to avoid the most common mistakes.

Therefore, we are giving you some tips to create en Outlook-proof HTML!

CSS

  • Styles within <head> tag are ignored, therefore we suggest to always use in-line style.
  • <padding-top> is applied to all the <td> columns of the HTML, the only way to solve this problem is to specify the space between the elements and cells’ upper margin in the short form (margin: 20px 0 0 0), since the extended form (margin-top: 20px) creates some problems with Hotmail.
  • When you start a new paragraph within a tab, Outlook automatically add a space to separate the two elements: we suggest to always send a test email on Outlook before sending the campaign.
  • Line spacing gives some problems when it is set to values like 1.3. Moreover, if you set a value smaller than one, Outlook arranges characters randomly, creating unintelligible text lines.

Images

  • Animated images are blocked and only the first frame will be visualized, therefore consider if add them or not.
  • Most of the time, Outlook blocks background images. To avoid this, choose a single color for the background.
  • In the tabs, for images smaller than 12 pixels you always have to specify the <height> attribute, otherwise they will not be visualized.
  • Some Outlook versions don’t support images with spaces in the file name, so use “underscore” instead of it, for example “image_withou_spaces.png”.

Outlook considers HTML code as a document written with Word… exactly, just like a Word file. Over 1800 pixels (more or less the size of a one page Word file) Outlook divides the email in two parts. Therefore, avoid sending long newsletters: users don’t like to receive thing in half, and two consecutive emails can be seen as too harassing and users may decide to unsubscribe.

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.

How to create a newsletter using K-Bricks

To use the K-bricks editor it is not necessary to have any technical skill… only a little practice and a lot of creativity! To help you in creating your newsletter, the first step is to choose the layout from which you want to start: standard, one column, two columns, three columns, etc.

Don’t worry, they are not fixed layouts: you can change the number of columns and lines and add all the elements you want. Give free rein to your creativity!

2template

Thanks to the drag & drop function you can customize your newsletter just dragging blocks in the desired position and the edit every one of them: customize your layout adding colors and images and free your creativity! Here you can find an illustrative video:

Do you want to send a perfect communication and always be original? Contact us, our marketing department is what you need! Discover Hook, click here!

How to create newsletters with Kloudymail

I have my Kloudymail login credentials, I have imported my contact lists, I have chosen the content of my first communication… how can I create newsletters?

You can choose among three different options within the template section:

  1. K-Bricks: here you will access to Kloudymail drag&drop template editor: you will just drag elements to the right position and the game is done. Read here to learn how to create them. (to open the dedicated section click here)
  1. Empty template: if you already have the HTML code you can paste it here and your template is ready (to open the dedicated section click here)
  1. Kloudy template: Kloudymail has created more than 50 different ready templates. You can use them as you want, just replace texts and images and you are ready for sending your newsletter. (to open the dedicated section click here)
  1. Your personal templates: here you can find all the templates that you have created and saved for your previous email marketing campaigns. This way, you can use the same layout and change the contents.

Do you want to send a perfect communication and always be original? Contact us, our marketing department is what you need! Discover Hook, click here!

3template

 

Customize our ready-made Kloudy templates

You can create your newsletters starting from one of our ready-made templates. To help you choosing we have divided them by category, color and layout. You can customize them according to what you want to communicate to your recipients.

Once you have prepared your newsletter you will just send it to the desired contact list. Do not forget to check the statistics in the following days!

4template