What Is Emmet?

[ 0 By

As companies send more and more email, marketers and designers are on the hunt for tools to help reduce the time between campaign brainstorm and completed send. One of the most time-consuming aspects of email marketing has always been coding and testing campaigns.

While pre-coded email templates can save time during the development process, how can email designers code campaigns more efficiently from scratch?

One way is to write less code with the help of a tool called Emmet.

What is Emmet?

Emmet is a free add-on for your text editor that allows you to type shortcuts that are then expanded into full pieces of code. By using Emmet, email designers type less, saving both keystrokes and time when building a campaign. Also, relying on Emmet’s autocompletion means fewer typos and missing tags, leading to more robust emails.

Emmet is available for a variety of text editors and is built right into Litmus Builder. Popular with web designers, Emmet is also popular among a small set of email developers, particularly Europeans and marketers who code emails from scratch. For instance, 11% of marketers in Europe and the UK and 13% of those that code emails from scratch use Emmet, according to our 2018 State of Email Workflows research.

Emmet Plugin Usage Remains Niche

Once installed, Emmet allows you to type using abbreviated code that follows the same conventions used in HTML and CSS. Designers can type element names, add ID and class selectors, and take advantage of Emmet’s more advanced functions to speed up the coding process. They can even nest elements using the same child and sibling selectors found in plain CSS to quickly scaffold large blocks of code.

Using Emmet

The easiest way to understand Emmet is by looking at an example. Say you want a table with three rows, each containing a table cell with an image above a paragraph of text and a link.

Our desired structure.
Our desired structure.

Instead of manually typing—or copying and pasting—each row, table cell, image, paragraph, and link tag, you can condense that down to one line and let Emmet do most of the work for you.

table>tr*3>td>img+p+a

After hitting the TAB button to trigger Emmet, the one line of code above is expanded into full HTML.

<table>
  <tr>
    <td>
      <img src="" alt="" />
      <p></p>
      <a href=""></a>
    </td>
  </tr>
  <tr>
    <td>
      <img src="" alt="" />
      <p></p>
      <a href=""></a>
    </td>
  </tr>
  <tr>
    <td>
      <img src="" alt="" />
      <p></p>
      <a href=""></a>
    </td>
  </tr>
</table>

That line of code looks intimidating, but once you get familiar with Emmet’s syntax, it becomes second nature. Let’s break it down.

The line begins with the table element, which tells Emmet that the first element to expand is an HTML table. Using the child selector (>) and multiplication operator (*), we then tell Emmet to include three table rows within the main table.

Next, we include another child selector to add a table cell into each table row. Within those table cells, we include an image, paragraph, and anchor tag as siblings (+) of each other.

For email designers, who rely on HTML attributes to ensure consistency across different email applications, you can even include attributes which Emmet will then use in your expanded code. Simply place your attributes and their values within square brackets, separated by spaces. If we wanted to include cellpadding and cellspacing on a table, for example, we would write:

table[cellpadding=0 cellspacing=0]

Emmet has a ton of useful features, including functions to group items, quickly navigate, remove tags, merge lines, and even add dummy text. While there are far too many features to discuss here, Emmet’s online documentation is a great place to learn more.

There are also a number of fantastic tutorials online. While most focus on using Emmet in the context of web design and development, the same principles can be applied to email design, as well. Here are a few of our favorites:

You can also watch our own email designer Kevin Mandeville show off Emmet in this talk from the Litmus Live Conference:

Use Emmet Today

Interested in using Emmet in your own workflow? Litmus Builder has support for most Emmet features. Combined with our Instant Previews, it allows you to code and test campaigns in over 90 different email clients faster than ever before.

Explore Litmus Builder →

Emmet is but one tool email designers can use for a more efficient workflow. Do you have a favorite tool or trick to make email design and development faster? Leave a comment below or join in the discussion over in the Litmus Community.

2018 State of Email Workflows

2018 State of Email Workflows

In this report, we take a detailed look at how brands plan, build, approve, and send their email marketing campaigns.

Download the free report →