Email coding is getting a better and more professional reputation and we are now starting to see tools made specifically for email coding, such as the new Litmus email builder. While this is an impressive and rapidly evolving tool the fact that is an online editor and not desktop app is still a deal breaker for me.

While most email coders out there probably use Adobe Dreamweaver I know our peers in the Web Design industry often sneer and jeer at us email coders. Not only do we code in “gross” table mark-up but even our editor of choice (Dreamweaver) is super uncool. Well quite a while ago now I caved to peer pressure and made the switch to Sublime Text and I have never looked back. I am now using Sublime Text 3 and it is a seriously powerful text editor and does an excellent job of email coding. The installation and setup is easy and much like any other app.

So, let’s go over some of features and highlight why I think Sublime Text is perfect for email coding.

Firstly it has multiple cursors. While this might be a difficult concept to explain the sheer power and usefulness of this tool quickly becomes apparent. Essentially it allows you to write, edit or delete anything from multiple locations simultaneously. This is so much more than ‘find and replace’.

Sublime Text is a bit like lego, well at least in they way you can customise it to your needs. If you open up the key bindings page in Sublime Text it allows you to set you own key bindings. If you are like me and do a lot of copy and pasting from Photoshop into your text editor, its useful to have some keyboard short-cuts to upper-case, lower-case and title-case your text. I have also created keyboard short cuts allowing me to preview emails in any browser I choose.

One of the most powerful features of Sublime Text is its plugins. There are countless plugins available and many that can speed up your work flow. First you’ll need to install Package Control which allows you to install new plugins from within Sublime.

Colorpicker is a useful one, it highlights the hex colour codes and gives them the background colour of the the code. Another useful one for email coding is Tags. It highlights unclosed tags which is extremely useful when coding hundreds of complex tables. Emmet is a plugin that allows you to write large amounts of complex code with very little effort. Essentially, you write a small shorthand version of the code, hit the tab key and it expands the line into the full HMTL version of the code. So if I wrote:

table[cellpadding=0][cellspacing=0][border=0][width=600]>tr*4>td

It would expand to

<table cellpadding="0" cellspacing="0" border="0" width="600">
    <tr>
        <td></td>
    </tr>
    <tr>
        <td></td>
    </tr>
    <tr>
        <td></td>
    </tr>
    <tr>
        <td></td>
    </tr>
</table>

This is a very powerful tool – for example creating a numbered image stack could be done like this:

tr*4>td>a>img[src=images/img_0$.jpg]

and would expand to:

<tr>
    <td><a href=""><img src="images/img_01.jpg" alt=""></a></td>
</tr>
<tr>
    <td><a href=""><img src="images/img_02.jpg" alt=""></a></td>
</tr>
<tr>
    <td><a href=""><img src="images/img_03.jpg" alt=""></a></td>
</tr>
<tr>
    <td><a href=""><img src="images/img_04.jpg" alt=""></a></td>
</tr>

To add to the power of Emmet I also make my own Snippets. These are small macros of code that can easily be triggered by a keyword. So for an email image I just type:

eimg

and get

<img src="images/img_.jpg" alt="" style="display: block; border: 0">

It’s even possible to place where you would like the cursor to appear in the snippet after it appears in your document.

While Emmet, snippets, plugins and multi-cursors make Sublime Text the best editor in my opinion, its ability to be customised to suit your needs is its biggest strength. I’m not only an email coder, I need to work on the web, write Sass, create preview lists and write documents – and it’s all done in Sublime Text, even this blog post!