An Email Assembly Line

Despite their shared DNA, (CSS, images, and HTML), email and web design are very different.

Consider CSS — with web projects, you can define all of your styles in one organized .css file. With email, you have to style every element ‘inline,’ creating extra work and messy code. And don’t even get me started on using tables instead of divs.

Fortunately, you can design great emails without drowning in HTML. Just roll up your sleeves and download ModernMail from Patrick Coffey.

ModernMail has four big advantages over pre-built email templates:

  1. Support for LESS, so you can go beyond vanilla CSS
  2. Bootstrap scaffolding & button components - you can even make it responsive
  3. Automatically compiles LESS into CSS & inlines it into HTML file
  4. <a href=”http://gruntjs.com” title”Grunt”>Grunt</a> automatically watches for & manages changes in the background

As a bonus, ModernMail also generates zip archives which you can use with an email service provider like MailChimp. The entire workflow requires just two commands to monitor changes and compile the final output.

```bash # 1. Monitor LESS file and update email.html as necessary $ grunt watch

2. Edit styles in app.less

3. Edit copy in email.html

4. Build final email (compile LESS, inline styles, and generate zip file)

$ grunt ```

Join the discussion

2017 Neal Shyam