[Spotlight] Responsive HTML Email Frameworks

Sorry! I forgot to post about this spotlight session I gave a fortnight ago now.

I spoke about how in my career, I have often worked for employers who wanted to send complicated designs by email. Pre-smartphones and tablets, the best way to do this was to create the design in Photoshop or Powerpoint, export it as a PNG or JPG and slap it on the email using basic HTML. It isn’t a responsive practice, so doesn’t work well for users on smartphones or tablets and it isn’t very accessible either (most screenreaders can’t read text baked in to images)

The difficulty traditionally with writing HTML emails is that if you want to have a nice design, you have to use lots of <table> elements and keeping track of them all can be a bit of a pain (and your markup ends up looking like a mess).

I first started looking into ways to make writing HTML emails easier 3-4 years ago. I found lots of boilerplate templates online which could be modified to suit your needs, but a prefabricated template wasn’t exactly what I was looking for.

I then found a framework called Foundation for Emails which is an email-focused alternative to Bootstrap which has a lot of pre-written blocks and elements to pick from to construct your emails. I stopped using it after a few months because I realised it wasn’t as responsive as it made out and the emails I was sending that I had built using it weren’t rendering very well on some smartphones.

The example emails I gave were using MJML. MJML replaces a lot of the complexity of writing HTML tables with their shorthand. You can install command line tools to render your MJML files, and most IDEs include linting packages for MJML syntax (I usually use Sublime text which has a good package for MJML). Otherwise, you can even write your MJML in the browser and see it rendered in real time using their live editor

Once you are done, you can export your email as HTML for sending with the service of your choice (typically I’ve used Mailchimp in the past but there are plenty of other providers)

MJML isn’t perfect, but it’s definitely my ‘go-to’ tool for writing HTML emails these days.

Please let me know if you have any questions and if you have any of your own experiences writing HTML for emails!

1 Like