DEV Community

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

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

Ezra Mechaber on March 04, 2020

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. ...
Collapse
Β 
jsardev profile image
Jakub Sarnowski β€’

Just use MJML πŸ˜ƒ

Collapse
Β 
nataliedeweerd profile image
𝐍𝐚𝐭𝐚π₯𝐒𝐞 𝐝𝐞 π–πžπžπ«π β€’

Came to say this, MJML is brilliant!

Collapse
Β 
ezramechaber profile image
Ezra Mechaber β€’

Thanks for sharing! Looking forward to checking it out and playing around with 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 β€’

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 β€’

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
Β 
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 β€’

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
Β 
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
Β 
nataliedeweerd profile image
𝐍𝐚𝐭𝐚π₯𝐒𝐞 𝐝𝐞 π–πžπžπ«π β€’

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

Collapse
Β 
ezramechaber profile image
Ezra Mechaber β€’

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