Cross HTML/CSS Compiler

Hey all!

I’ve recently taken on a task at my company to build an email template. Naively, you might think it would be simple. However, I quickly realized that HTML/CSS support in email clients is:

  1. Outdated
  2. Inconsistent from one client to another

I’m considering the idea of a cross-HTML/CSS compiler that transforms standard HTML/CSS into versions supported by various email clients. This would allow you to code as usual without worrying about client-specific rendering engines.

Would this be useful for you?

I dont… think there’s that much inconsistency that i’d be worried about it?

Limitations of HTML Email | Mailchimp

That said, I dont regularly code email templates (partly because that’s not my job, and partly because… email templates arent supposed to be coded very often, which is why they’re templates), so I may not be the target audience. I’m not really sure who is the target audience.

1 Like

I can feel you. I have the same problem many times. Especially when you cannot assume that all your email recipients are using outlook it gets more hard. At the end you cannot even position divs correctly. The only way for me, what seems to work 100% in all email readers are html tables to format the text.

So yes, if there would be a tool that helps it would be really great. But it must be able to create code which is useable in other email readers also.

1 Like

If it were possible it would be very useful but I don’t see how you can turn a page built with normal html and css .(i.e.grid/flex/positioning etc) into an email friendly template which basically needs everything controlled via table-cells with no positioning or other layout techniques at all.

You’d probably have to abstract it into another kind of markup like this one.

I’m sure if it were possible it would have been done by now as emails have been a pain since year dot :slight_smile:

1 Like

Thanks for the answers :bowing_man:

That’s a good point, coding emails is not a task that I expect to see often in a developer backlog. On the inconsistency point, I framed it wrong. I meant the difference between the HTML/CSS supported in the browser and the one supported in email clients. I haven’t really looked at the difference between email clients themselves (but will take a look at the link you provided, thanks !)

Yeah what’s bothering me there is that as a user, you still need to “learn” a new markup language. I haven’t written a line of code yet to be honest, but I imagine something like:

  1. Parse the HTML/CSS code
  2. Loop over the parsed HTML
  3. Check if CSS property are supported.
    If CSS property == flex or something
    Then replace it with tables
    If CSS property == box-shadow
    Then replace it with a combination of linear gradients
  4. Re-assemble the HTML code
1 Like

Absolutely! Email coding is a nightmare with all the client quirks. A cross-compiler sounds like a dream come true. Even if it wasn’t perfect, it would be a massive timesaver. I’d definitely use it.

A cross-HTML/CSS compiler that converts standard HTML/CSS into email-client-friendly versions sounds like a great idea! It would definitely streamline the process and ensure better compatibility. I’d find that very useful.

“We aren’t doing this because it is easy, but because we thought it would be easy” comes to mind.

This is one of those problems where the main outline of the problem seems trivial, but the further you go the more challenges and race conditions you find, until in the end you either give up or accept the product will never reach 100% completion.

1 Like

“And now add timezones.”

1 Like