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:
Outdated
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.
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.
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.
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.
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:
Parse the HTML/CSS code
Loop over the parsed HTML
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
…
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.
