Long story short it took me a week (try something, test it a bit, send it to a larger group of people and fix what broke) and email clients are stuck in the distant past. You have to use fixed-width tables to embed images (but also define the image width in the image tag ! Some clients ignore one or the other), you also have to use tables for layout and style inheritance doesn't really work because clients override styles. The only way to get consistent layout is to embed text in <span> and repeat the styling everywhere.
I also coded something to auto-generate the signature using data from the company intranet and I discovered that when you copy paste HTML code the browser will only copy HTML/CSS code that's actually rendered (you can fix that using draft APIs) but you still have the same problem when pasting the signature in the signature form (roundcube in our case) some duplicates attributes that the browser skip are actually useful for broken mail clients.
I finally got it working but I'd really wish mail clients would use modern web engines. All major mail clients come from organization that also make browsers. I doesn't have to be that painful
Edit: thanks to those who suggested tools to help with that ! It took so long because I was just telling myself, it can't be that broken. Just try that and it should work. I'll definitely try them if I ever have to write email HTML again
Which makes me feel like here's how things really went down back in the day...(with much respect and admiration to TBL)...
Tim Berners-Lee: Look everyone, there's this thing called the web, where a worldwide network of authors can publish content, and the audience/visitors/recipients accessing said content have plenty of liberty to adjust the style/look of said content to suit their display needs (e.g. increase text size, expand window/width of content, etc.)...So, no one needs to all have/use the same software/application, plus this all helps with accessibility concerns, plus everyone can use different "reading/viewing" as well as authoring software/apps, etc...Cool, right!!
(Almost) Everyone: Nah, we're good.
Tim Berners-Lee: But, wouldn't you want to reap the benefits of the flexibility that the world wide web can afford to everyone?
(Almost) Everyone: We don't understand the flexibility being offered here...We just want the content to behave like books have ever since the late 1500s...nothing should change, every pixel should remain fixed/static, and the control should always exist within the hands of the author, and not the audience/readers. Besides, we will all just use some silly application like MS Word, insert our content and signatures exactly how we want it to display in the Word document (cheesy or not), and add some useless clipart, and control it 100%. That's what we want, and that's what we understand.
Tim Berners Lee: But, don't you see that html docs (or something like that) as published via this world wide web can also help people who struggle financial, or don't have the means of affording tech, etc. since they need not have to purchase all the premium applications to view and edit content?? There can be no-cost or low-cost options for the software that poor folks can use, and even just this can at least slightly help to level things out for inequality, and so much more. Much like the original print press, this - and other aspects of the web - can give many more people access to knowledge and wonderful, essential content!
(Almost) Everyone: Meh. For poor folks who can not afford MS Word, I'm sure Microsoft (and other big companies) will "solve" this by donating "freemium" versions of Word, and de facto establish Word docs as a standard format. Or, people can just borrow more than they can afford, and go into debt to afford the latest, premium technology. Who cares about MS' nefarious business practices. By the way, Mr. Berners-Lee, you should really call your "web thing", something better like "world wide Word docs (wwds)"...plus allow for way more emoji usage, because that would help me avoid having to think and write expressive prose...icons are easier for us to convey meaning, and its not due to our collective laziness, not at all. Just look for instance, how advanced our culture would become if we could, say, deliver cat photos (without much text/content added) as fast as possible to other rich people around the affluent world!?!
Tim Berners-Lee: (Throws his hands up in frustration, focuses the remainder of his career on speech-making, academia, and a few start-ups, and leaves the flock to fend for themselves, which of course get taken over and controlled by for-profit companies.)
Ironically, most word documents tend to be poorly formatted anyway, as if the original author didn't care at all about formatting.
Yes, I agree :). That's why I said "ironically": they want to preserve their formatting, even though it's terrible, and it looks like they didn't want to think about how to format it anyway.
I built the lion's share of the WYSIWYG email editor for ActiveCampaign a few years back, and got quite a few horror stories out of it.
There are a lot of tricks that have to be learned, and a lot of trial and error, but responsive emails, that look the same(ish) across most browsers and email clients are possible. I wouldn't want to generate the HTML myself though, as email is stuck ~10 years in the past compared to the web.
Sadly not only HTML is a mess with mails but literally (nearly) every part of it. Is a wonder that mails tense to work in general.
First real forays into FE that didn't involve slicing PSDs to tables were in Bootstrap and Foundation in ~2013. The responsive grid those frameworks delivered seemed magical at the time, but you got the sense that the benefits came on the back of some serious CSS wizardry and framework overhead.
The newer CSS features (grid, flexbox) seem so light and magical.
EDIT: The common example when grid and flexbox layouts break is when a child of a child element in the layout overflows.
'one liners? half of these are 5 lines of csss...'
and fallback is easier with @supports
And is much less overall inline-class (I was worried that tailwind mean bigger .html but nope, in fact is less overall)
It's at the point where I'm in full "crotchety old man" mode and forcing myself to build the entirety of my frontends in pure HTML5/ES6/CSS3.
It's quite liberating, actually.
I wish instead of npm it have a Go or Rust binary. What it need it for is to generate the .css clases and to prune it for size reduction.