Notes from the Dev: Using Emmet for Faster HTML Email Coding
How many keystrokes do you think you make when you code up a new email? Probably a lot. What if you could cut all that typing down drastically and develop campaigns faster than ever?
That’s exactly what the Emmet toolkit can do for you. And in this episode of Notes from the Dev: Video Edition, Shannon Crabill introduces us to the way it works.
Shannon develops emails for United Health Care. As you can probably imagine, UHC is a high-volume sender. That means Shannon’s got her work cut out for her, and saving time is a big deal.
Of course, we could all use a little extra time on our hands. So, let’s dive into the latest episode and find out how Emmet can make HTML email development more efficient. Watch the video below, check out the show notes for more information, and don’t forget to subscribe to our YouTube channel. You can also read the full transcription of this episode.
Table of content
What is Emmet?
No, it’s not about Emmet from the LEGO Movie, but this is still pretty special. In fact, you might even say “everything is awesome.”
Emmet is a set of free, open-source plugins that work with a variety of text editors. By the way, it used to be known as Zen Coding, but it got a rebrand. While it’s typically presented as a web development solution, plenty of email developers use Emmet to simplify and speed up their processes.
Emmet is written in pure JavaScript, and it works across platforms, including web browsers, Node.js, Microsoft WSH, and Mozilla Rhino.
In our video, Shannon Crabill uses it with Adobe Dreamweaver. But Emmet can also be used with other popular editors. That includes Parcel, which is my email editor of choice.
How does Emmet work?
Emmet is built on the use of abbreviations or shortcuts, which are special expressions that get parsed and transformed into blocks of code.
Shannon gave us a simple example to start things out: Type a “p”, hit the Tab key, and Emmet automatically creates an open and closed paragraph tag <p> </p>. To add a child element to the abbreviation for a larger code block, you just use the > symbol (right-angled bracket).
For example, typing body>table>td>tr and hitting Tab would generate:
<body>
<table>
<td>
<tr></tr>
</td>
</table>
</body>
There are tons of useful shortcuts in Emmet. Just type an exclamation point (!) and hit Tab to get the code for your HTML doctype. If you want to quickly code elements that are close to each other but not nested within each other, you can just use a plus sign (+). Typing h2+p+ol>li would transform into:
<h2></h2>
<p></p>
<ol>
<li></li>
</ol>
Check out a comprehensive cheat sheet for Emmet abbreviations from the plugin’s official documentation.
Cool coding tricks with Emmet
Obviously, coding with Emmet can get a lot more complex than those basic examples. Shannon took things up a notch by showing us a few other capabilities.
You can quickly add multiple HTML tags at once. Just use the star or asterisk symbol along with the abbreviation followed by the number and it will multiply the tag that many times.
For example, p*3 would produce three paragraph tags in a row. Typing ul>li*3 and hitting Tab would generate an unordered bullet list with three items:
<ul>
<li></li>
<li></li>
<li></li>
</ul>
Shannon says this helps her out when she needs to add multiple paragraphs to include disclaimer text in UHC emails. But this handy trick could be used in lots of situations, such as email newsletters that have repeating blocks of code.
Using curly brackets with Emmet allows you to add content to HTML tags as you code. Shannon showed us how she quickly used h2{title} to generate <h2>title</h2>. This may not seem like a huge time-saver, but it’s nine keystrokes instead of 14. That’s going to add up, and the better you get at using Emmet the more efficient you’ll become.
You can also use square brackets to add attributes such as alt text for your images. Shannon went on to show us how to add classes and IDs with Emmet shortcuts. There's even a shortcut for adding lorem ipsum placeholder text with Emmet.
Using code snippets with Emmet and Dreamweaver
This is where Emmet can really help you code faster and more efficiently. Beyond the standard abbreviations, you can build shortcuts for reusable code snippets in your emails. If you’re using an editor that supports snippet libraries (which Dreamweaver and Parcel do), you can customize the Emmet experience for your brand and coding preferences.
After you create a reusable snippet, you can assign a trigger key to that reusable code so you can insert it into your email super-fast. Shannon pointed out that you’ll likely want to create unique trigger keys for your snippets because you will overwrite the Emmet abbreviation in Dreamweaver if you don’t.
Shannon has reusable snippets that help her easily include things like brand colors and link styling. But you can do it for just about anything you’d rather not type over and over again.
Get more information on Emmet and Shannon
Interested in exploring this tool more? Here are some great resources:
- Emmet documentation: Dig into the details of this open-source development tool.
- Emmet playground on CodeSandbox: Mess around with Emmet abbreviations in a playground from developer Joseph Shambrook.
- Get more Emmet tips from developer Fatima Amzil on Medium.
A big thanks goes out to Shannon Crabill for taking the time to share her knowledge with us and help us discover new ways to do our jobs faster. You can check out her website, or connect with her on Twitter at @Shannon_Crabill. Shannon has also contributed articles to the Email on Acid blog, and you’ll hear from her as well as other email experts in our on-demand webinar, Optimizing the Email Experience from Start to Finish.
