How to work with HTML emails in Metrilo

Our HTML editing window consists of a composer (on the right), where you write the HTML, and a live preview screen (on the left) where you see how your message will look.

File manager

At the bottom of the screen, there's a File manager button. You can use it to host your images on Metrilo's servers.

When you need an image, go to the file manager, pick the image and simply click on the Copy URL button and then paste it into the HTML.

Variables

Next to the file manager, there's a button for all variables that can be applied in the HTML. Currently, those are:

*|NAME|* - full name
*|FNAME|* - first name
*|LNAME|* - last name
*|ADDRESS|* - billing address
*|COMPANY|* - company name 
*|LTV|* - all-time customer revenue

*|UNSUB|*  - adds unsubscribe URL 
(Example: <a href="*|UNSUB|*">Unsubscribe</a>)

Supported elements in HTML mode (for full HTML emails and custom templates):

Structural Elements: article, aside, blockquote, body, br, div, figcaption, figure, h1, h2, h3, h4, h5, h6, head, header, hgroup, hr, html, main, p, section, wbr
Head Elements: meta, title
List Elements: dd, dl, dt, li, ol, ul
Text Formatting Elements: a, abbr, address, b, bdi, bdo, center, cite, code, del, dfn, em, i, ins, kbd, mark, pre, q, rp, rt, ruby, s, samp, small, span, strike, strong, sub, sup, time, u, var
Media Elements: img
Table Elements: caption, col, colgroup, table, tbody, td, tfoot, th, thead, tr

Supported attributes in HTML mode (for full HTML emails and custom templates):

All attributes support: align, bgcolor, class, dir, height, id, lang, style, title, width
a tag support: href, name, target
blockquote tag support: cite
col tag support: span, valign
colgroup tag support: span, valign
del tag support: xmlns
html tag support: href, name, target
img tag support: alt, src
ins tag support: cite, datetime
meta tag support: content, http-equiv, name
ol tag support: reversed, start, type
q tag support: cite
style tag support: data-premailer, type
table tag support: border, cellpadding, cellspacing, summary
tbody tag support: valign
td tag support: abbr, axis, colspan, rowspan, valign
tfoot tag support: valign
th tag support: abbr, axis, colspan, rowspan, scope, valign
thead tag support: valign
time tag support: datetime, pubdate
tr tag support: valign
ul tag support: type

Best practices for using HTML in Metrilo

Whether you’re sending a one-off HTML email or creating a reusable custom email template, the following best practices apply:

You don't need to Inline your CSS styles

Most email clients require you to inline your CSS styles and it can make for a not-so-nice development experience. That’s because when you want to add a style, you have to add it to each individual <p> tag. And if you want to change the style you’ve added, you’d have to change the style for each <p> tag individually. However, in Metrilo you can (and should) write your HTML and styles using style tags and classes like you normally would. Then when the email is sent, Metrilo will inline all your CSS styles to the appropriate elements.

Media Queries currently are not supported

In case you want to use media queries in your HTML emails, please let us know at support[at]metrilo.com. Thanks :)

Include the unsubscribe attribute

When creating a custom template or writing in full HTML in Metrilo, you must include *|UNSUB|* to comply with anti-spam laws. You can place it anywhere within the <body> tag.

Get the HTML basics right

And lastly, we couldn’t go without sharing a few fundamental tips about how to create better HTML emails:

Create your layouts using tables to ensure that your email displays correctly across all email clients. If you want to place a 20px gap under a paragraph of text, for example, it’s best to add a row with an attribute of height="20" Don’t use padding, margins and floats as they won’t always work (most notably with certain versions of Outlook).
You can use custom hosted web fonts from an open source font service like Google Fonts. All you have to do is embed the code in your email template. However, do note that if your email client doesn’t support this, the text in your emails will fallback to use your websafe font.
To create a responsive design, your width should be at least 320px but no more than 600px. And it’s best to use a maximum width of 600px as your default view.
For image file sizes, try to keep your images as small as possible (maximum 1MB in size). Downloading large images will provide a sub-optimal experience to your users, especially those who are viewing your email on mobile devices, as images may take a long time to appear.

Use an email testing tool like Litmus to test your emails in all of your target email clients and browsers. It's not good enough to just look at your email in a regular browser or in one or two email clients. They all produce different results. Tools like Litmus give you full visibility of how your email will look everywhere.