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.
Did this answer your question?