Creating HTML emails is hard — much more difficult than creating a web page in HTML.  Bootstrap and Foundation spoil front-end developers.  Slap a couple classes in your code and you can have a beautiful, or at least beautifully rendered, adaptive/responsive site in nearly every browser.  Not so with email.  Many email clients strip external CSS, leaving only inline styles.  Some email clients render only a small subset of CSS.  And of course, JavaScript is out of the question.

This article was originally published on MarkCarlson.io and is republished here with permission from the author. 

Fortunately, there is a tool which makes creating HTML email pretty easy.  Plus, the email renders nicely in both desktop and mobile.  It’s called MJML.

HTML Email: Before and After

Before

Let's take a regular old HTML email and look at it in a desktop mail application:

Plain HTML email-1.png

This is a plain old HTML email. It has a masthead image, different font sizes, font weights, centered text, etc. Let’s take a look at this same email in a mobile device:

Plain HTML On Mobile .png

Even with a retina screen, users will have to use their fingers to zoom & scroll to read the content.

After

With MJML, you compose the email using MJML markup.  If you are familiar with HTML, it’s not hard at all to learn.   Peruse the docs and you can be composing adaptive/responsive HTML emails in an hour or so.  As we work in the app, we compose the MJML on the left and view the resulting rendered HTML in real time on the right:

MJML and HTML Rendering.pngA closer look at the code on the left and you can see how the top of this email is created:

Code On The Left.png

Unlike HTML in email, we can even use a class structure for our styling.  For example, we could refactor the above markup using HTML-like classes:

Refactoring Code.png

When it comes to converting this to HTML, MJML does all the heavy lifting for you to insure your email looks good in all kinds of email clients.  The HTML it generates looks like this:

HTML Generated By MJML.png

Yuck!  Aren’t you glad you have a tool that will do this for you?  But how does it look?  You be the judge.  Here’s the desktop view:

Desktop Email After MJML.png

And now, that same email on a mobile device:

Mobile Email After MJML.png

“Look, mom!  No pinching & zooming!”

Try MJML.  Spend a little time looking at the features and gallery of samples.  For HTML email, you’ll wonder how you ever lived without it!


Author

Mark Carlson

Mark Carlson is a Senior UI Developer at Avenue Code. Once a radio station personality and programmer, Mark built an online music research system to help determine song rotations. That project turned into a business of its own, taking Mark out of the on-air studio. Now, Mark is sharing his web development experience with Avenue Code clients in the SF Bay Area.


How to Improve the Relationship Between UX and Development Teams in an Agile Context - Part 1

READ MORE

Directives to the Point: Manipulating the DOM with Angular

READ MORE

A Developer's Perspective On Angular 2+

READ MORE