Is there an ideal “email design toolkit” that every coder should be carrying? What should we familiar with to get an edge in our field? To find out, we asked 5 email professionals to weigh in on the apps (and habits) that keep them productive and sane when creating email newsletters.
While there are common tools used to work on both web and email projects, woe be the web designer that thinks that they can say, apply the responsive web frameworks they know and love to the notoriously glitchy world of email. Once you scratch the surface, it becomes clear that many hours have been spent by long-suffering email designers to create everything from specialized acid tests, to guides and drag-and-drop builders – all with the purpose of making their next email project (or someone else’s) that little bit less painful.
That isn’t to say that web/email stalwarts like Sublime Text aren’t important, too. And then there are the browser extensions, which are often incredibly useful when testing.
So, without any further delay, we’re going to uncover what tools some of the industry’s notable coders are using, plus how they use them. Naturally, we’d love to hear your suggestions and “must-haves” in the comments below, too.
Jason Rodriguez, Litmus
What is your favorite text/code editor for email?
Traditionally, I’ve been a big fan of using either Sublime Text or Coda for coding emails. I still use both occasionally but most of my email coding time is spent in Litmus Builder – a new development environment built specifically for coding email. While it’s still in beta, it has features built specifically for coding emails and is integrated right into Litmus, allowing me to quickly kick off new tests and send emails to myself. It’s significantly sped up my coding process and we can’t wait to get it into the hands of everyone that codes email.
How about your favorite browser for email testing?
Chrome is a great browser for just about everything. While I used to prefer Firefox’s developer tools and their Responsive Design View, Chrome’s newer Device Mode blows it out of the water. Being able to (fairly) reliably test a variety of device sizes right in the browser is a powerful tool. That being said, the more I use Builder, the more I just use our built in preview which can switch between desktop and mobile sizes and is updated in real time as you code.
I know it’s silly to ask a Litmus person, but testing… You have a favorite tool?
Do I really have to answer this? Of course Litmus is the best email testing tool! It’s built right into our workflow and is indispensable when it comes to developing email campaigns.
Do the Litmus emails use any specific frameworks?
Most emails I do for Litmus are built on top of a few templates we have for various purposes. Emails for personal projects are either built from scratch or use the Salted template, which is an abstracted version of the Litmus newsletter structure that was put together for an article on A List Apart a while back.
So, is there one thing you can’t design and code email without?
I can’t design or code an email without a purpose. Too often, email marketers build campaigns just because they feel they need to send something to their subscribers. But, I need a better reason to send a new campaign than just ‘I haven’t emailed my list in two weeks’. I need a well-defined purpose for each email I design, or risk sending my subscribers a complete trash fire.
Justin Khoo, CampaignWorkHub
Runs a supremely-useful email blog, FreshInbox, build email apps for a living!
As both an email and app coder, I’d love to know your favorite editor
Sublime Text. I prefer it to TextMate, but it does have a lot of quirks and you need plugins to really use it well.
And your favorite browser for email testing?
Chrome, as I really like its DevTools / Element Inspect. That said, when using the “-webkit-min-device-pixel-ratio: 0” media query to target WebKit email clients, Firefox comes in handy since it allows me to simulate non-WebKit email clients without tweaking the code.
I know you’re a Litmus fan, but is that all you use for testing?
I use both Litmus and Email on Acid. I would have to lean towards Litmus for the community and the analytics tools.
I know you love really bespoke work, but do you use an email framework?
I don’t use a framework, but I have a template that I start my emails from.
Finally, is there something you can’t possibly design and code email without?
Nicole Merlin, Campaign Monitor
Straight to the show – what code / text editor do you use?
I’ve been using Sublime Text for a while now, but I’m not set on it anymore; Stig has showed me some cool things that you can do with Coda (like using placeholder tokens for advanced find & replace) so I’m thinking of switching!
Do you have a favorite browser for email testing?
I use Firefox with the Web Developer Toolbar so that I can validate my local HTML regularly via a keyboard shortcut. I also use CodeKit, which auto-refreshes Firefox whenever I make a change.
You’re a thorough tester, that I know – what do you use?
I test with a combination of Litmus, Email on Acid and live devices to cover all my bases. I could not pick a favourite because I need them all!
I never use a framework.
I couldn’t stop by without asking, what’s the one thing you can’t code without?
Patience and time! The process is incredibly stressful if you’re not in the right frame of mind and you don’t leave yourself enough time to do everything. When you’re more relaxed and have plenty of time, you can really enjoy it.
Mike Heimowitz, Atlassian
Mike, rapid-fire questions here. What do you code with at Atlassian?
I currently use Panic’s Coda 2 and love it!
Do you have a favorite browser for email testing?
I’m not sure that I have a preference. I use Chrome for everything.
I know you were a speaker at Litmus’ recent conference, but… Your favorite testing tool?
Do you use a framework as part of your everyday work?
I really like Salted or Email on Acid’s boilerplate.
Finally, is there something you definitely need when coding email? I suspect a Giants’ winning streak would help…
A whole lot of patience and the cold hard fact that things probably will be broken in some client – somewhere – on the first attempt. Also, my glasses. I have to be able to see.
Elliot Ross, Action Rocket
You manage an email team – what email and code editors do they use?
Traditionally, everyone here uses Dreamweaver, but it’s showing its age pretty badly – especially when we’re working on complex, large templates.
Everyone on the team has their preference, but I’ve been moving more and more towards using Coda, Chrome and a huge screen. Brackets and Litmus Builder are also really promising.
Any thoughts on a favorite browser for email testing?
Chrome, though Firefox seems to be mine-canary for any code that might be breaking.
Working in an agency, I’m curious to know your favorite testing tool.
Litmus! We use Litmus all of the time. Aside from that, we have a suite of the popular devices just so we can also test out the experience as well.
Same goes for email frameworks – any favorites for commercial use?
We have our own as yet unnamed framework, which is loosely based on the HTML5 email boilerplate, with a whole load of common layouts pre-built out. I have a real trust problem with other frameworks, which is probably entirely unfounded, but I think as email code is so nuanced, I’m reluctant to add in more uncertainty from other people’s code.
Last but least, you’ve been designing and coding emails for a long time. What’s kept you running?
We have a coffee shop just down the corridor from our new studio, so totally coffee. I almost always listen to Spotify when I’m coding, just to cut out the general studio noise. My blast-through-HTML music is either the Kaizer’s Orchestra, or insufferable 90s trance music.
One thing I’ve found really useful on the business side of things is having a solid SLA of which email clients we support and where things might fall back – and ensuring the client knows the score before we start work.
Our experts’ top picks
|Text/code editor||Sublime Text / Coda / Litmus Builder||Sublime Text||Sublime Text||Coda||Coda|
|Testing tool||Litmus||Litmus / Email on Acid||Litmus / Email on Acid||Litmus||Litmus|
|Framework||Salted||n/a||n/a||Salted / Email on Acid||tba|