I recently had to code an HTML email signature for the first time and naive me used standard HTML/CSS features. It exploded in all kinds of wonderful ways.
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
In the future, just use https://mjml.io/. Yes, the HTML it generates is god-awful-ugly, but it does generate responsive emails that render very nicely in almost every client back to Outlook 2010.
I guess one way to "solve" this is to skip the signature in the email and do what every person working in my kids school do: Write your message in MS Word and make sure it's propperly decorated with clipart. Then mail the wordfile.
This 1000x! I damn near fell off my chair when i saw my daughter's school do this...then noticed that it was done with ever, single, official memo from the school and asociated school district.
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.)
I'm not sure i agree with "most", but certainly agree that many are poorly formatted...But even then - whether it is most or only some - these authors tend to want to have that "formatting" preserved almost exactly...missing an important point of web documents. :-)
> these authors tend to want to have that "formatting" preserved almost exactly...missing an important point of web documents. :-)
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 have received emails with an attached word document named xxx.jpg which contained a single page with an single non jpg image of an screenshot of a browser tab containing an image, and yes it was about that image and
no "anti-copy" DRM prevented coping that image.
There is a huge amount of nuance to what will work in emails.
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.
If you are someone (like me) who's done CSS/Frontend 'a few years ago' do take a look at this video to see the progression. A lot of things (CENTERING!) which were much harder in the past are now complex but possible. The newer style stanzas will look alien to you.
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.
That is so great. I don't really make website anymore, but we used to struggle to create layouts like these, it awesome to see how much easier it has become.
It should be mentioned that modern layout solutions have much better performance. Have you ever seen how complicated float layouts are struggling during window resize? When using grid or flexbox redraws are almost instant.
Until you actually try them yourself in various browsers (and versions) with dynamically sized content of the elements inside those layouts and see that it is still buggy and not that much has changed and it still needs insane amount of hacks to make the layout work reliable across browsers.
EDIT: The common example when grid and flexbox layouts break is when a child of a child element in the layout overflows.
I don't think it's really correct to call code a one-liner unless a human being would typically write it as one line of code, which is not the case here.
For the vertical/horizontal centering, this author uses display: grid on the parent and place-items: center. But there is an older way to do just the same, give parent a display of flex and put margin: auto on the child
The thing I want to see in css is a way to define blocks where the height is a percentage of the width. There is a well know hack to do this with padding-bottom but.. yea its a non-intuitive hack.
ah, shame on me for not reading further. Yea that sounds like just what I'd like, assuming that the aspect ratio block can also contain children (which I'm guessing it will)
Wow appreciated. Am now seriously considering stripping bootstrap out of my app and replacing with grid and flex. Stuck in 2015 as a front end developer apparently.
I thought about trying tailwind and then saw "Step 1: install via npm"
I am so goddamn sick of having to download a giant mess of JavaScript modules just to use a tool to generate something that has nothing to do with nodejs or it's ecosystem.
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.
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