HTML Code for Email

 Before you begin

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.

If you're not proficient with HTML, this article might not be for you. Take a look at the other articles in this section to learn more about how to use the Email Editor's elements to create beautiful emails. More articles are coming soon.

 

HTML Code for Email

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.

Click on the left-side navigation to jump to a section of this article.

HTML8.jpg

 


 

Best Practices

Here you can learn more about the best practices for HTML code for emails, different elements that you should use with caution, as well as the types of elements that we don't recommend that you use with APSIS One.

Best Practices Requires Attention

You may create static, nested and other HTML tables.

Pay special attention to your email's preview when using custom web fonts
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. Background images, image maps and layouts that may be wider than your email's body should be used with caution. Mobile devices may have a hard time displaying your email properly.
Respect the standard template width of 600px to 800px.

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.

Elements to Avoid

Expand an item below to learn more:

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

Click on an item below to expand:

Row Visibility in Row Settings

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!

 

Show Only on Desktop

Show Only on Desktop

1. Add a HTML element into the Canvas.

HTML5.jpg

 

2. Paste the HTML code for the desktop 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.

}.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;
}

 

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

HTML16.jpg

 

4. 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 HTML code in the Structure Panel.

HTML18.jpg

 

5. Click on the mobile icon to hide the row in mobile, and show only on desktop. That's it.

HTML19.jpg

 

Show Only on Mobile

Show Only on Mobile

1. Add a HTML element into the Canvas.

HTML5.jpg

 

2. Paste the HTML code for the mobile version of your email.

 

 

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

HTML26.jpg

 

4. 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 mobile HTML code in the Structure Panel.

HTML20.jpg

 

5. Click on the desktop icon to hide the row in desktop, and show only on mobile. That's it.

HTML21.jpg

 

 

Row Visibility in HTML code

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:

Coming soon...

 

 


 

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:

<img src="https://images.apsis.one/710a0c94-be6d-4194-a4e9-55bea5287ce8.png" width="150" style="width:150px">

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.

Mobile Stylesheet

Here's the default stylesheet for mobile:

.m-show-row {
@include show-settings;
display: table !important;
table {
@include show-settings;
display: table !important;
}
tr {
@include show-settings;
display: table !important;
}
th {
@include show-settings;
display: table-cell !important;
}
td {
@include show-settings;
display: table-cell !important;
}
div {
@include show-settings;
}
span {
@include show-settings;
}
img {
@include show-settings;
}
a {
@include show-settings;
display: block !important;
}
&.regular .column {
display: block !important;
}
.text {
div {
display: block !important;
}
span, a {
display: initial !important;
}
}
.menu {
.menu-item.m-hide {
display: none !important;
}
.menu-item.m-show {
display: block !important;
}
}
.icon-menu {
.icon-menu-item.m-block,
tr.m-block {
display: block !important;
}
.m-hide {
display: none !important;
}
}
}
.menu {
.menu-items {
display: block !important;
}
.menu-item.m-show {
@include show-settings;
padding: 10px 0 !important;
span, a, div {
@include show-settings;
display: block !important;
}
}
}
.icon-menu-item.icon-text {
span {
display: inline-block !important;
}
}
.icon-menu {
img {
max-width: 100% !important;
}
tr.m-show {
@include show-settings;
.icon-menu-item * {
display: block !important;
@include show-settings;
}
.icon-menu-item,
.icon-menu-item td {
display: table-cell !important;
@include show-settings;
}
}
}
.list {
width: 100% !important;
table {
width: 100% !important;
}
.m-list-item {
display: block !important;
max-height: unset !important;
@include show-settings;
span, a, div {
display: initial !important;
@include show-settings;
}
.decorator {
padding-right: $list-decorator-padding-right;
}
}
}
.m-block, .m-show {
display: block !important;
}
.m-inline-block {
display: inline-block !important;
}
.m-table {
display: table !important;
}
.m-inline {
display: inline !important;
}
.m-full-width {
width: 100% !important;
}
.m-half-width {
width: 50% !important;
}
.m-align-center {
text-align: center !important;
}
.body-padding {
padding: 0 !important;
}
.body-text {
max-height: unset !important;
}
tr {
width: 100% !important;
display: table !important;
}
.row {
height: auto !important;
}
table.menu {
td, th {
width: 100% !important;
}
}
.button-link a {
border-radius: 5px !important;
display: block !important;
padding: 10px 20px !important;
box-sizing: border-box !important;
}
.image img {
max-width: 100% !important;
}
/* Keep last to override other classes */
.menu .menu-spacing,
.list .list-type,
.list .list-item,
.m-hide {
display: none !important;
}

 

Desktop Stylesheet

 Here's the default stylesheet for desktop:

.preheader { color: #303030;
display: none;
font-size: 1px;
line-height: 1px;
max-height: 0px;
max-width: 0px;
opacity: 0;
overflow: hidden;
mso-hide: all;
}body {
height: 100% !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1 !important;
}table {
border-spacing: 0;
}th,
td {
text-align: left;
font-weight: 400;
}a {
text-decoration: none !important;
}.container {
height: 100% !important;
width: 100% !important;
text-align: center;
}
.container td:first-child {
vertical-align: top;
}.center,
.column {
border-collapse: separate;
}.row {
width: 100% !important;
text-align: center;
border: 0 !important;
}
.row .table:first-child {
width: 100%;
}.column {
text-align: center;
}
.column .menu,
.column .text,
.column .image,
.column .text,
.column .spacer,
.column .line {
width: 100%;
}.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;
}
.button {
border-collapse: separate;
}
.button.full {
width: 100%;
}
.button tr {
border-collapse: inherit;
}
.button td:first-child {
text-align: center;
}
.button a {
text-decoration: none;
}
.button .button-link {
border-collapse: separate;
}
.button .button-link td {
line-height: 1.4;
word-break: break-word;
word-wrap: break-word;
overflow-wrap: break-word;
}.image a {
display: block;
}.line {
width: 100%;
}
.line table {
width: 100%;
}
.line image {
display: block;
}.list .body-text span {
color: #0a0a0a;
}.list .list-type {
padding-right: 3px;
}.list .list-item {
text-align: left;
}.list .m-list-item,
.list .m-list-item .body-text {
display: none;
mso-hide: all;
max-height: 0px;
overflow: hidden;
}.list table {
table-layout: fixed;
}
.list table tr {
vertical-align: top;
}.list a {
text-decoration: none !important;
}.menu .menu-item {
vertical-align: top;
text-align: center;
word-break: break-word;
word-wrap: break-word;
overflow-wrap: break-word;
}
.menu .menu-item a {
text-decoration: none !important;
}.menu .menu-spacing {
height: 5px;
vertical-align: top;
text-align: center;
}.icon-menu table {
table-layout: fixed;
}.icon-menu .icon-menu-item {
vertical-align: middle;
text-align: center;
word-break: break-word;
word-wrap: break-word;
overflow-wrap: break-word;
}
.icon-menu .icon-menu-item a {
text-decoration: none !important;
}.icon-menu .image-margin {
width: 10px;
}.icon-menu .align-left {
text-align: left;
}.icon-menu .vertical-top {
vertical-align: top;
}.text {
width: 100%;
}
.text td {
mso-line-height-rule: exactly;
word-break: break-word;
word-wrap: break-word;
overflow-wrap: break-word;
}
.text sup {
mso-line-height-rul: exactly;
mso-text-raise: 25%;
}
.text sub {
mso-line-height-rul: exactly;
mso-text-raise: -15%;
}.spacer td {
line-height: 1px;
font-size: 1px;
}.spacer img {
display: block;
}

 


 

 

Was this article helpful?