6 ms·

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. Lon

by icefo 6y ago

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

krimeo 6y ago
Just use tables! Seriously, with display:table css layout gets easy again.
- Flimm 6y ago
  People read emails on their small screen devices, and I think it would challenging to read an email on a small screen made with tables.
  - wolco 6y ago
    Write emails in text and let your email client format it.
mscdex 6y ago
For those working with HTML/CSS in email clients here are a couple of sites that can help determine compatibility: https://caniuse.email/ https://caniuse.email/ https://www.campaignmonitor.com/css/ https://www.campaignmonitor.com/css/
dathinab 6y ago
The funny part is there isn't even a standard which says which parts of CSS/HTML need to be supported and which not. 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.
progre 6y ago
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.
- dathinab 6y ago
  Please at least convert it to pdf.
  - GLGirty 6y ago
    user prints docx and scans the paper to pdf....
    - progre 6y ago
      I have, for real, recieved emails from the kids school with a photo of the printed word document as an attachment.
      - dathinab 6y ago
        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.
- mxuribe 6y ago
  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.) ;-)
erichurkman 6y ago
In the future, just use https://mjml.io/ 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.
jammaloo 6y ago
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.
thoughtpalette 6y ago
Just wanted to post another great resource for developing HTML emails: https://get.foundation/emails/docs/inky.html https://get.foundation/emails/docs/inky.html

by icefo 6y ago

krimeo 6y ago

Just use tables! Seriously, with display:table css layout gets easy again.

Flimm 6y ago
People read emails on their small screen devices, and I think it would challenging to read an email on a small screen made with tables.
- wolco 6y ago
  Write emails in text and let your email client format it.

mscdex 6y ago

For those working with HTML/CSS in email clients here are a couple of sites that can help determine compatibility: https://caniuse.email/ https://caniuse.email/ https://www.campaignmonitor.com/css/ https://www.campaignmonitor.com/css/

dathinab 6y ago

The funny part is there isn't even a standard which says which parts of CSS/HTML need to be supported and which not. 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.

progre 6y ago

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.

dathinab 6y ago
Please at least convert it to pdf.
- GLGirty 6y ago
  user prints docx and scans the paper to pdf....
  - progre 6y ago
    I have, for real, recieved emails from the kids school with a photo of the printed word document as an attachment.
    - dathinab 6y ago
      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.
mxuribe 6y ago
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.) ;-)

erichurkman 6y ago

In the future, just use https://mjml.io/ 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.

jammaloo 6y ago

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.

thoughtpalette 6y ago

Just wanted to post another great resource for developing HTML emails: https://get.foundation/emails/docs/inky.html https://get.foundation/emails/docs/inky.html