An email’s HTML. Specifications and advice. Part 2

The Contactlab Marketing Cloud provides all the tools you need to manage automatic email communication plans, then engage with just the right contacts, in the most appropriate way, through personalized messages that are tailored to the individual needs and wishes of each customer.

But is this enough to successfully generate interest, or is something different required?

We have written two articles that we believe will help answer this question, and already shared some important advice with you about how to get the HTML to display correctly. Now, we would like to give you some tips about how to make messages immediately available on every device, including mobile ones.

ADVICE for successful emails

  1. Embedded images.
  2. How to create a responsive design email.
  3. Don’t forget mobile optimization.
  4. Insurmountable limits.
  5. Test before sending.



1. Embedded images

Normally, images in an HTML-based email are placed on an external server, then loaded when the recipient reads the message. As an alternative to this standard procedure, it is possible to embed images in the message, so they are already present in the email, and no longer loaded from the external server.

Advantages and disadvantages
The main reason for having images embedded in the email is to avoid them being blocked, which is something most mail clients and webmail services implement. By embedding the images, the message is immediately displayed correctly to everyone, with all the visual elements in place.

However, embedded images increase the risk of the message being regarded as SPAM, because they increase the email’s file size. The file size of the images is added to that of the HTML.

Note:
The email tracking image, which is used to record email openings, cannot be embedded because it is automatically inserted by the system.

How to proceed using Send

  1. The starting point is a standard HTML, in which images are loaded from an external server. For example:<img src = “http://server.it/img/foto.jpg”>
  2. Edit the image tags manually by entering the URL of the image, as follows:@ (http://Image_URL) @
    Note:
    if you do not change the paths in the <img> tags using the @ (http://…) @ syntax , no error is generated. Instead, the relevant images will still be loaded from the server when the email is opened. As a result, they may be blocked by the email client or the webmail service.
  3. Once you have edited all the text tags as described in Step 2, save the modified HTML to your computer.
  4. Access the platform, select Send and go to Create > Email campaign > (group name) > Create delivery > Create a new campaign > Message content.
  5. On the Message content page, do one of the following:
    1. Upload the file with the modified HTML by clicking Upload from > a file on your computer.
      or:
    2. Paste the code directly into the HTML version text
      The modified HTML is loaded into Send.
  6. Click Next and finish creating the delivery.
    The images will be included within the <body> of the message.
  7. Carry out a test delivery to verify that the embedded images are displayed correctly.



2. How to create a responsive design email

There are different techniques you can use to create responsive design emails:

  • A fluid layout.
    Enter table values as percentages or use max-width and min-width settings.
  • Adaptive layouts.
    Develop HTML that self-adapts the structure to the viewport. For example, HTML that stacks the different individual boxes in columns.
  • A CSS declaration.
    A media query that allows you to vary styles and sizes, based on the size of the display on which the message is displayed.

All these techniques have support limitations imposed by different clients, apps or devices, and must be evaluated according to the layout. The following are some basic techniques:

  1. Add the following code to the header:

<meta http-equiv = “X-UA-Compatible” content = “IE = edge” />
<meta name = “viewport” content = “width = device-width, height = device-height, initial-scale = 1, minimum-scale = 1.0, user-scalable = no” />
<meta http-equiv = “content-type” content = “text / html; charset = UTF-8”>
<meta name = “x-apple-disable-message-reformatting”

  1. Declare media queries in the style sheet as follows:@media screen and (max-device-width: 568px), screen and (max-width: 568px) {CSS *}
  2. Where 568px is the maximum width of the viewport to which the * CSS styles will be applied, declare the classes in the HTML used for the mobile display.
    For example, to not display content on a mobile, use the following class:
    .onlydesktop {display: none! important; width: 0! important;}
  3. Use conditional comments such as [if mso] to ensure the display is correct in Outlook.
    For example: <! – [if mso]> </ td> <td style = “padding-top: 0; padding-bottom: 0; padding-right: 0; padding- left: 0; vertical-align: top; ” > <! [Endif] ->
  4. Enter the following in each <td> tag :
    style = “padding: 0px; vertical-align: top;”.

 

3. Don’t forget mobile optimization

Today, mobile is one of the most commonly used communication channels, and not just for SMS and Instant Messaging either, but also for receiving emails. Ensuring that your communications are received correctly, respect the appearance established at the design stage and demonstrate a high-quality level, is essential.

To develop a layout that can be used on mobile devices, it is necessary to rethink the structure from a ‘mobile first’ perspective and follow some simple tips:

  • Text should be larger than 14px.        
  • Large buttons for touch devices, which are at least 40px.
  • Use a space between various clickable elements of at least 10 or 15px.
  • Use double size images with identical proportions, to ensure rendering is correct on Retina/HD displays.
  • Fixed elements should not be taller than 320px.
  • Eliminate low priority, large and unusable content.
  • Use a strong contrast for the elements.

4. Insurmountable limits

The advice given above facilitates a correct appearance in the majority of webmail services and mail programs that are currently in use. However, there are limits imposed by the policies of individual providers or software producers that cannot be resolved. For example, display problems are often reported with the Lotus suite mail program.

5. Test before sending

The best way to check an email displays correctly, and that all its elements work well, is still to send a test before the actual delivery.

Send enables you to create a test filter for each database (see Configure > User database) and send a test delivery (see Create > Email deliveries). It is advisable to enter several addresses in the test, so you can check them with different email programs and webmail services.

As we have seen, there are many different measures you can undertake to successfully create emails that can be viewed correctly and entice your contacts as a result. By following these tips, you can create better quality emails, which are both displayed as intended in every type of browser and easy to read.

In case of any questions or queries, do not hesitate to contact our Customer Service, who are always at your disposal.