Last month, Jenna Molby wrote an article about the best tools for coding email. Being knee-deep in email design and code lately, I started thinking about the tools that I use and wanted to share what I think are the essential tools for designing and coding HTML email.
First things first. You have to design somewhere. I doubt I am in the minority when I say that I design in Adobe Photoshop. If you work on the web, chances are that you do most of your design work in Photoshop. I’d love to use something less expensive or a little lighter weight but after a decade of working in PS, it is hard to match my productivity level in anything else. If I need to do any illustrations or vector work, I jump over to Illustrator. My Macbook kicked it earlier this year so I’ve been trapped on Windows, but once I can afford a new Mac I will try using Sketch. I had the first version on my Macbook and loved it despite all of its shortcomings. The new version looks absolutely stunning.
Jenna mentioned using Slicy for slicing up designs. When I need to slice, I always just use Photoshop’s built in Slice Tool. I’ve never really had many problems with it. More likely, I will create individual design components - buttons, heroes, images, etc. - and save them out. I’m a big proponent of designing and sketching in code, so a lot of the time the design will shape up in the browser and I will only hop into Photoshop as needed.
It is important to optimize images used in your emails to keep file sizes down, especially as mobile opens continue to climb. My favorite tool is RIOT, which makes optimizing JPEGs, GIFs, and PNGs a breeze. I used to use ImageOptim on my Macbook and highly suggest it if you work in OS X. You can still get away with just using Photoshop’s Save For Web, but that extra optimization could go a long way on shoddy connections.
I feel like the vast majority of people working on HTML email use Adobe Dreamweaver for coding. Here I can say that I’m definitely in the minority as I despise Dreamweaver. I see where people like it - spell checking, panels for filling out attributes, link checking, the design view - but I have a glitch where I just cannot use it. I try to about every six months but after five minutes I rage-quit and jump back into a plain text editor. I’ve always found the design view to give me inconsistent results from what is actually rendered and that interface is… tedious to use. There is just something about typing in a simple text editor that feels so pure. I don’t want to have to dig through panels and menus to get anything done.
I much prefer using Sublime Text for my coding. Sublime Text is such a nimble, elegant editor that I find coding in anything else annoying. You can usually find plugins to handle tasks that are baked into Dreamweaver. It’s a much lighter weight application than Dreamweaver, less prone to crashing, and is customizable in nearly every way. My favorite plugins for Sublime Text include the essential Package Control, which makes installing other packages effortless, Emmet to speed up coding, and Sidebar Enhancements for extending Sublime Text’s right-click functionality.
The killer combination is Sublime Text and Mozilla Firefox. Everyone always talks up Chrome and its Developer Tools, but Firefox has one feature that I absolutely adore - Responsive Design View. With a simple keyboard shortcut, I can see how my responsive emails adapt to the viewport - making my life much easier. Code in Sublime Text, save it, refresh Firefox, see how it looks on a variety of screen sizes. It can’t be beat.
I still use the Web Developer Toolbar in Firefox to inspect my document when necessary and, more importantly, to validate my markup for any problems that could cause rendering issues.
If you aren’t testing your emails, you’re doing it wrong. There are so many clients out there that just testing in your own browser or the few email clients you regularly access is unnacceptable.
My favorite has always been Litmus. The interface is solid, tests run quickly, and it has a ton of tools for inspecting your code and identifying problems. The only problem with Litmus is that it is expensive to use. The base account will run you $79 a month. If you don’t do this full-time, it might not be worth it.
An alternative is Email On Acid. It is more affordable at $35 a month, but I find their interface to be fairly clunky to use. What’s more is that their tests take longer to render and the service generally experiences outages more than Litmus does. I’ve been assured by EOA team members that a refresh is in the works that addresses these issues, but right now it makes the service less than ideal if you work on email professionally. Still, for someone that only tests the occasional email, it’s not a bad service at all.
More and more, I find myself using Campaign Monitor’s built in testing service on all of my campaigns. Since I use them for sending, I find their testing service to be an essential step in the campaign lifecycle. Previews are rendered at a reasonable speed and since I am not sending massive numbers of campaigns each month, it is far more affordable than Litmus or Email On Acid. Other ESPs may offer similar testing tools, and if yours does, I recommend using it. It’s nice to have it integrated into the campaign process as opposed to having it as an external service.
I still recommend testing on any devices you have as well. I personally keep an Android device at hand for testing on the stock mail client as well as the more problematic Gmail client, a Blackberry, my Surface Pro for both Outlook and the default Mail app, a linux box that has Thunderbird, and my iPhone 5 with a smattering of clients. I maintain a number of addresses for various web mail clients, too.
What are yours?
These are my essentials for working on email. I’ve used a lot of different tools over the years and have found these to be the best. If you think differently, I’d love to hear from you. Let me know over on Twitter or shoot me an email.
Did you know that I wrote a book on responsive email design? Why not do your campaigns and clients a favor and grab a copy today.