This article is aimed to users that are familiar with HTML code: both advanced developers who have worked with code for emails, and those who need guidance.

This guide provides what you need to keep in mind!

It is important to pay close attention when populating HTML code into the element, so that the code does not interfere with your Email.

Here's the best general advice we can give you when working with the HTML element in the Email editor:

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

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 refers to the animated content created with Adobe Flash. Most email clients block Flash.

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.

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.

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.

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:

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.

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.

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.

Here is how to:

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

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.

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

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.

4. Click 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.

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 applies to the Image element in the Email editor, since you have the possibility to add an image via a URL.

Our 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:

Email editor - Elements