Ten modern layouts in one line of CSS
I recently had to code an HTML email signature for the first time and naive me used standard HTML&#x2F;CSS features. It exploded in all kinds of wonderful ways.<p>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&#x27;t really work because clients override styles. The only way to get consistent layout is to embed text in &lt;span&gt; and repeat the styling everywhere.<p>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&#x2F;CSS code that&#x27;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.<p>I finally got it working but I&#x27;d really wish mail clients would use modern web engines. All major mail clients come from organization that also make browsers. I doesn&#x27;t have to be that painful<p>Edit: thanks to those who suggested tools to help with that ! It took so long because I was just telling myself, it can&#x27;t be that broken. Just try that and it should work. I&#x27;ll definitely try them if I ever have to write email HTML again