A friend of mine recently accepted a job offer as a digital designer and as part of his new job he'd be responsible for coding responsive HTML emails. His previous jobs were mainly in print design so he asked me to give him a crash course.

After about 3 hours he left my house with a fair bit of confidence on the subject, a pretty impressive feat for someone that had no prior coding knowledge. I thought it might be interesting to share what I showed him with a view to help seasoned coders and newbies alike. I'll be splitting this into three parts starting with this one.

The topics we'll cover in this post are:

1. Software and hardware requirements for email development [Part 1]
2. Designing for email and email best practices Part 2
3. Boilerplate's, WYSIWYG editors and templating [Part 3]

Note: If you're already a seasoned coder and are in need of a refresher on email development, skip to [Part 2] for design tips, or [Part 3] for code tips.

Software and Hardware Requirements for Email Development

To make sure you hit the ground running, you'll need the following software:

Adobe Dreamweaver

Dreamweaver is hands down the best editor for emails. The ability to click an element in the preview pane and be instantly taken to the corresponding code in the coding pane is something that other editors have been missing for some time. When you're working with tables, its your best friend.

Adobe Photoshop

Whether it's you who designs the emails or someone else. You'll want Photoshop. Wherever I have worked I have always received email designs as PSD's, occasionally the odd AI, PDF or JPEG slips through, but as a rule of thumb it's generally always PSD's I work with. Photoshop is great for managing layers and slicing the content you need in the dimensions you want, rather than what the designer thinks you'll want.

Brackets / SublimeText / Atom

These are alternative code editors. They're not as user friendly as Dreamweaver but if you want to get into web, or you stick with emails for a long time, you'll want to know what they are, what they can do and how to use them. With a bit of hard work and dedication you'll soon ditch Dreamweaver and be coding emails with Node.js and Handlebars or some other semantic template language.

Notepad++ and Microsoft Excel

I've included these two as possible extras you might need. If you'll be working with large customer data files these two will aid you in formatting them correctly and also setting up lookups and filters. Excel will also come in handy if you'll be expected to provide reports on the emails you send out.

Litmus

My friend didn't know about this one, but its an absolute must. Your company should provide this for you, but if you're freelancing you'll need to get it yourself. Litmus lets you preview your code on lots of different devices and platforms. You'll get to see exactly how your email displays in all the major email providers and also on mobiles. Its far quicker than testing on different devices or sending separate emails to AOL, Yahoo, gmail and Microsoft Outlook. Their new builder tool is also very handy, and provides similar functionality to Adobe Dreamweaver. There are also alternatives to Litmus but I do not know of a free equivalent.

Git / BitBucket / SourceTree

I've also included this as an optional extra, but its a great addition to your workflow. Git and BitBucket are online repositories you can upload your code to. It gives you a means to version control and allows multiple people to work on the same project at once.

Once I've written part two, you can find it here.