Skip to main content

HTML best practice

Tips for a successful email​

  1. Embedded images
  2. How to create a responsive email
  3. Don't forget mobile optimization
  4. Non-negotiable limits
  5. Test before sending

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.

info

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 in Send​

  1. The starting point is a standard HTML, in which images are loaded from an external server., such as: <img src="http://server.it/img/photo.jpg">.
  2. Edit the image tags manually by entering the URL of the image, as follows: @(http://Image_URL)@.
  3. Once you have modified all the tags as indicated in point 2 above, save the edited HTML on your PC.
  4. Access the platform and go to Send in the section Create > New Campaign > (group name) > Message Content.
  5. Once on the message content screen, upload the file with the edited HTML using the “Upload from: a file on my computer" button or paste the code directly into the Text-Area.
  6. Now, the edited HTML is loaded into Send. Complete the campaign creation process normally by clicking next. The images will be included within the <body> of the message.
  7. Run a test to ensure that the embedded images display correctly.
info

If you do not modify the paths in the <img> tags with the syntax @(http://…)@, no error will be generated; however, those images will still be loaded from the server where they are located when the email is opened and may therefore be blocked by the image-blocking devices of the email client or webmail service.

How to create a responsive email​

There are several techniques to develop a responsive email:

  • With a fluid layout, by declaring table values in percentage or using max-width and min-width.
  • With an adaptive layout, by developing a custom HTML so that the structure adapts to the viewport (e.g., with box stacking).
  • By declaring CSS: media queries allow styles and sizes to change based on the display size on which the newsletter is viewed.

Each technique has support limitations imposed by various clients/apps/devices, and they should be evaluated based on the layout. Below are some basic guidelines.

  • In the head, add the following code:

    <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">

  • Declare the media queries in the style as follows:

    @media screen and (max-device-width: 568px), screen and (max-width: 568px) { CSS* }

  • Where 568px is the maximum width of the viewport on which the CSS styles will be applied. Declare the classes used in the HTML for mobile display.

    For example, to not display content on a mobile, use the following class:

    .onlydesktop {display:none !important; width:0 !important;}

  • 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]–>

  • Enter the following in each <td> tag : style="padding: 0px; vertical-align:top;" to prevent additional spacing.

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.

Non-negotiable 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.

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 (cf. “Configure –> User DB”) and send a test delivery (cf. “Create –> Email Campaign”). t’s recommended to include various addresses in the test to 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.