Designing and Coding

Now that you have a basic understanding of how HTML email campaigns work, and how
you should deliver them, we can start talking about designing and coding them (the fun
part!).
Tools of the Trade
If you want to get good at coding HTML email, here are the tools you’ll need...
1. A design application, like Adobe Photoshop, Fireworks, Dreamweaver, or
Illustrator. Use these tools to layout your template, and slice out your graphics
(like your company logo, and product photos). We’re really partial to Fireworks,
but to each his own.
2. A good, “pure” HTML/Text editor, like BBEdit and TextWrangler for the Mac, or
HomeSite, and NoteTab Pro for the PC. You could use “WYSIWYG” style tools to
generate HTML, like Microsoft FrontPage, or maybe Adobe GoLive or Macromedia
Dreamweaver. But they have their disadvantages. WYSIWYGs very often throw in
gobs of junk into your code (FYI, Microsoft says the extra code is to help with
“round tripping” which means you can export from Word to Powerpoint to HTML,
then back again, without losing anything). All this extra code usually ends up
just breaking things, or setting off spam filters. There are some WYSIWYGs out
there that generate “clean code” but we’ve found those are a bit “too perfect,”
because they’re designed for web pages, not HTML email (so they don’t know all
the things you have to “rig” in your code.). If you want to do HTML email
correctly, you should learn to code HTML “from scratch” with a good text editor.

Your own web server, to host all your images and archives. You should create a
folder on your website for email newsletters. This is where you’ll store images,
then point to them with absolute paths in your HTML code. You might also want
a folder on your website to store archived newsletters. When we first started out,
we created a folder on our website called, /monkeywrench/ and then kept
campaigns under subfolders named by /date/ to store each campaign. Everybody
has their own organization style, though. Just be sure to come up with a system
and process for archiving, so that each newsletter isn’t a huge chore to publish.
Nowadays, we don’t even bother, because we use MailChimp’s built-in archive
functionality. It’ll save a copy of every campaign you send from our system. You
can build a page on your website called “Newsletter Archives” and paste a little
code snippet from MailChimp. We’ll keep your page updated with all your most
recent campaigns. Saves so much time.
4. An FTP program, like Fetch for the Mac, or CuteFTP for PCs. When you design
your email and slice out all your graphics, you’ll use FTP to move those files from
your computer to the server.
5. A test machine (or two), loaded with as many different email applications and
accounts as possible. You’ll want to check your HTML email designs under lots of
different scenarios. Unlike web design, where you only have to check your work
in a small handful of browsers, there are tons of email applications out there,
and they all handle HTML email differently. If you use MailChimp, you can use
our Inbox Inspector tool and let us do all the testing for you:
http://www.mailchimp.com/add-ons/inboxinspector/