Hello world!

This article is aimed to APSIS One users that are familiar with HTML code: both advanced developers who have worked with code for emails, and those who need guidance to create HTML code that works great for emails in all devices and email clients.

Not you?
Get in touch with your development team... or reach out to our Creative Services!

When populating your emails with HTML code in the HTML element, you must pay close attention that the HTML code does not interfere with your email.

In this section we will focus on the things you must have in mind when writing code for your emails, so that they look stunning in all devices and email clients.

htmlElement.jpg

In this article


Best Practices

Here's the best general advice we can give you when working with the HTML Element in APSIS One:

  • Use simple inline CSS, and fonts that are safe for web. If an email client does not support a font, it will be replaced by a fallback font.

  • Any links included in the HTML Element cannot be tracked by Google Analytics.

  • You may create static, nested and other HTML tables.

  • Mobile devices may have a hard time displaying your email properly. Respect the standard template width of 600px to 800px.

  • Pay special attention to your email's preview when using custom web fonts.

  • Background images, image maps and layouts that may be wider than your email's body should be used with caution.

  • If you plan on using embedded CSS, test your email in different email clients with Litmus to make sure that it works with the rest of your template.


Restricted Elements

The following elements are not supported or recommended when working with the HTML Element in APSIS One.

JavaScript

JavaScript is a programming language that allows you to create interactive content. It is blocked by most email clients in order to avoid malicious content hidden in emails. You can use other strategies to make your email more appealing, like an outstanding design, captivating content and even gif animations.

Flash

Flash refers to the animated content created with Adobe Flash. Most email clients block Flash.

Iframe Elements

An iframe is an HTML element useful for adding content from another website. It's blocked by most email clients due to the presence of scripts. If you must display content from another website, please add a link to an image that can bring Profiles into the website.

Media

Very few email clients support HTML5 for the use of video and audio tags to embed media into emails. We suggest you try a link instead.

Forms

Unfortunately, in order to submit information that is entered in a form, you must use Javascript. Since Javascript is blocked by most email clients, it's best to avoid this practice.


Device Compatibility

Please make sure that the mobile version of your HTML element works as intended by using the Preview and Email Client Test features to double-check that it works in both desktop and mobile.

The rule of thumb is that you create content that is optimised for viewing in mobile, and content that is optimised for viewing in desktop. However, you can achieve maximum compatibility by following one of the following two methods:

1. Row visibility in HTML Code

2. Adjust Row visibility in Row Settings

1. Row Visibility in HTML code

Instead of creating two rows with two HTML elements to enter your code, you may use APSIS One's default classes to display a row in different devices.

Take a look at this example.

2. Row Visibility in Row Settings

A very simple solution is to work with HTML code the same way you work with APSIS One's Design Panel elements.

Create two different versions of your email's HTML content, one for mobile and one for desktop. For optimal results, get in touch with your development or design team to make sure that your HTML code works as intended. Need an expert hand? Get in touch with us!

You can choose to show a Row in only desktop, only mobile, or show in both. Follow these steps to show your Row in only one device, but don't forget to make an alternative Row for the other device.

1. Add a HTML element into the Canvas and paste the HTML code for the desktop or mobile version of your email.

htmlElement.jpg

These are the elements that the Email Editor supports when hiding or showing rows in different devices. If you intend to use an element that is not listed below, simply test your email with Litmus to make sure it's hidden.

}.hide,
.hide th,
.hide table,
.hide tr,
.hide td,
.hide div,
.hide a,
.hide img,
.hide span {
  display: none !important;
  line-height: 1px !important;
  max-height: 0px !important;
  max-width: 0px !important;
  opacity: 0 !important;
  overflow: hidden !important;
  mso-hide: all !important;
}

2. Click on the row in the Structure panel to open the Row Settings.

HTML16.jpg

3. The Row Settings will open.

It's a good idea to give your row a name so that you can see this row is the one with your desktop or mobile HTML code in the Structure Panel.

emailEditor21.jpg

4. Click on the mobile or desktop icon to choose which device this row should be shown on.

Repeat this step for the other device's version, or perhaps a version that works well in all devices.

HTML19.jpg

Images

If you decide to use images in your HTML code, use images hosted in your own server in order to ensure that they're available at the time of sending. If later you choose to replace an image that is being used on your HTML element, you must double-check that the new image has the same dimensions not to disrupt your HTML code.

When it comes to the dimensions of images in HTML, we recommend that you add their width as an inlined style for your emails to work optimally in Outlook.

Also, consider that your recipients will have to load all the content of your email in order to view it, and those with slower connections as well as restricted data plans on their mobile devices may be affected. Whereas the average image file size tends to be around 2MB and 2.5MB, we recommend that you keep the file size at 1MB or under.

This is also true of the Image Element in the Email Editor, since you have the possibility to add an image via a URL.

HTML23.jpg

Stylesheets

APSIS One's Email Editor has a default stylesheet for how the Canvas renders all of the elements available in the Design Panel. When writing HTML code for your emails, it's good to have in mind how this stylesheet looks like so that you can write code that works flawlessly.

Here are the classes you can use in your code

  • General classes
    .imgfix
    Remove client-added padding to images
    .FullW
    Show element as 100%

  • Mobile classes
    .m-show-row
    Show row in mobile, add to surrounding table
    .m-hide
    Hide element in mobile

    .m-show / .m-block
    Display element as block
    .m-table
    Display element as table
    .m-inline
    Display element as inline
    .m-inline-block
    Display element as inline-block

    .body-padding
    Remove elements all padding
    .m-vertical-spacing
    Add 10px padding-bottom

    .m-full-width
    Show element as 100%
    .m-half-width
    Show element half width

    .m-align-center
    Align center

Did this answer your question?