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!
Brilliant write up. We use Dreamweaver to build all of our emails, but we have been trying out different editors. Sublime keeps standing out, but we have been a bit behind in finding the right plugins to speed up our workflow.
But this is staying bookmarked and we’ll definitely be referencing it when we give it another go.
I’ve been thinking about leaving Dreamweaver for a while, but the ability to click on text and images on the preview and have the code jump to the right place is a must for me.
You can get emmet for dreamweaver so I’ve yet to make the jump to sublime 😀
I agree with Matt. That’s why our team is still sticky with Dreamweaver. Click & Jump function makes it easier to target to a specific places.
I have never used Dreamweaver personally.
I started just using notepad/text edit then moved onto using Brackets/Edge Code from Adobe. It gives you live changes in Chrome so you can see instant results without having to refresh.
I have dabbled in using Sublime and all the devs in my office use it and I must say it has some nifty features that I could probably utilise, plus if I get stuck they can come over and easily help out, knowing the program.