loading...
Cover image for How To Take The Headache Out Of CSS And HTML In Emails
Glitch

How To Take The Headache Out Of CSS And HTML In Emails

ezramechaber profile image Ezra Mechaber Updated on ・3 min read

I recently went down a rabbit-hole of creating a high-powered email workflow using Glitch to code, compile, and preview our HTML marketing emails.

It was so useful to me to be able to do all of that in one place that I created a guide for how you can do the same.

Who is this post for?

If you send emails, this post is for you.
Maybe you send emails as part of your job or as a side-gig or even for fun. You might use Mailchimp, TinyLetter, Customer.io or one of the literally million other services out there.

This post is definitely for you if you have found yourself coding your emails in raw HTML rather than a drag-and-drop builder.

And this is most definitely for you if you like advanced style sheets.

The problem is email

Or, more accurately, email clients. See, they all have a terribly mismatched set of requirements for rendering email.

Clippy
Some Outlook clients (I know) even use old Microsoft Word engines to render their email (I KNOW).

Some clients don't respect style sheets entirely, while others don't respect certain parts of style sheets. It's a whole thing.

So the best practice in our funny corner of the world is to inline as many styles as possible.

Customizing emails with inline styles is hard work, especially when you have to do it again, and again, and again.

This is so frustrating that lots of new tools have cropped up to do this for you. Take Automattic's Juice or Litmus' paid email builder. All great!

But some aren't free and some only solve a piece of the puzzle.

The solution is a task runner

A task runner (like Grunt) combines a number of different chores into one execution step.

I know very little about JavaScript, but I do know how to follow READMEs and tinker until I break things and get them working again.

So when I came across Grunt and finally understood it, it rocked my little email world. Especially when I found Lee Munroe's grunt-email-workflow. I could use SCSS (fancy CSS) and inline it all at the same time, keeping my templates clean while I coded but outputting everything I needed.

Grunt logo

Once I got it up and running (and customized), thanks to the magic of Glitch's Preview functionality, I could see the live previews at the drop of a hat.

What does this task runner do?

Using some basic modules, I created a Glitch app that does a few main things:

  • Takes SCSS/Sass partials and combines them into a unified stylesheet
  • Takes that stylesheet and inlines all of the styles into a single HTML file
  • Loads that HTML into a preview file that you can copy/paste directly into your email client.

How do I use it?

  1. Go Glitch.com 🎏 and create an account if you haven't already.
  2. Head to the project grunt-for-email and hit remix for your own version of the very same. You'll need to update a couple small things like some fixed links in /public/index.html.
  3. Make it a private project if you want your code to be just for you.
  4. Follow the readme to customize your folders and your workflow. Exploring the file tree
  5. Start running your own tasks. Compile using the code in the readme
  6. Hit "Show" > "Show Next to Code" for some sweet, sweet previewing. Live preview demonstration
  7. For extra fun, check out the additional resources in the README.

If you've got questions or feedback, feel free to leave a comment! And if you find this tool useful, please Unicorn 🦄 this post.

We're launching some exciting new features on Glitch real soon. Be the first to know.

Discussion

pic
Editor guide
Collapse
sarneeh profile image
Jakub Sarnowski

Just use MJML 😃

Collapse
nataliedeweerd profile image
Collapse
ezramechaber profile image
Ezra Mechaber Author

Thanks for sharing! Looking forward to checking it out and playing around with it.

Collapse
blindfish3 profile image
Ben Calder

The simplest solution is: don't use HTML and CSS. Instead just send plain text emails :P

Collapse
ezramechaber profile image
Ezra Mechaber Author

My original headline was "How to make HTML emails needlessly complicated," so plain text might not meet the mark!

Collapse
blindfish3 profile image
Ben Calder

I was being just a little facetious :D

But I honestly feel there's little justification for anything other than plain text in email; except to fulfil the fantasies of marketing departments the world over. I do wonder how much development effort has been wasted on all the pointless emails I've received over the years that I have never seen as was intended 🤷

Maybe a better suggestion would have been: if you think you need HTML/CSS in an email then just don't send it? :)

Collapse
nataliedeweerd profile image
𝐍𝐚𝐭𝐚𝐥𝐢𝐞 𝐝𝐞 𝐖𝐞𝐞𝐫𝐝

Are your pre-built templates responsive? Only asking as, based on your gif with the preview above, they don't appear to be. And do you have any Litmus tests you could share to show the output is robust enough for Outlook 07/10/13?

Collapse
ezramechaber profile image
Ezra Mechaber Author

The template I built within the project is responsive - I just have it previewed in a fixed-width frame for the GIF.

Here's an example of the rendered HTML:
glitch-email-runner.glitch.me/comp...

Collapse
ezramechaber profile image
Ezra Mechaber Author

Oops, missed your question about a Litmus test. I don't have one on-hand, but I like how they perform (with the exception of the buttons - they could use some VML).

But you can use or build any template you want with this builder by dividing out the CSS/SCSS into their component parts.

Collapse
codypearce profile image
Cody Pearce

Styling emails is still massive pain in 2020, I wonder when the major email providers will finally create something that supports modern HTML and CSS.

Collapse
ezramechaber profile image
Ezra Mechaber Author

Feels like we're getting closer overall, but it's hard to believe even the latest rendering engines are still so non-uniform.

Collapse
nataliedeweerd profile image
𝐍𝐚𝐭𝐚𝐥𝐢𝐞 𝐝𝐞 𝐖𝐞𝐞𝐫𝐝

I'm hoping we see an improvement as we move toward more cloud-based email clients.