- html 2017-03-19T16:58:15+01:00 https://fadeit.dk/blog/tag/html.html HTML emails & email signatures, how hard can it be?! 2015-10-21T02:23:32+02:00 https://fadeit.dk/blog /2015/10/21/html-emails-and-email-signatures-how-hard-can-it-be <h2 id="tldr">TL;DR</h2> <p>I put together some gulp stuff to generate simple HTML email signatures / templates &amp; hope others will find it useful. Check out <a href="https://github.com/fadeit/responsive-html-email-signature">the repo</a>. There’s plenty to do to improve it, so fork away! The current samples look like this:</p> <p><img src="/blog/assets/html-emails-and-email-signatures-how-hard-can-it-be/html-responsive-email-template-signature-light.png" alt="Light Signature" /></p> <p><img src="/blog/assets/html-emails-and-email-signatures-how-hard-can-it-be/html-responsive-email-template-signature-dark.png" alt="Dark Signature" /></p> <h2 id="intro">Intro</h2> <p>A few weeks ago I was listening to the the JavaScript Jabber <a href="https://devchat.tv/js-jabber/177-jsj-ui-validation-with-oren-rubin/mini_player">episode 177</a> with <a href="https://twitter.com/shexman">Oren Rubin</a>. For those that know nothing about Oren, he’s been developing stuff for the past 20 years. In his career he worked with machine learning, distributed computing and compilers, just to name a few. He moved on to web development afterwards, which he admits in the podcast was ‘the really hard stuff’. I know many of you would be tempted to close this article, run outside and burst into tears of joy… but there’s actually more to this post!</p> <p>Web development <strong>is hard</strong> indeed. It also seems like it’s not going to get easier anytime soon. Hell, the next generation of web developers won’t be able to work on a so called ‘web application’ without using some sort of transpiler. You will be the laughing stock of the web if you are still writing in ES5 (or ES6 in about a year or so). The days of writing code in Notepad++ and refreshing a page in a browser are gone and they are not coming back.</p> <p>So… you need to know all the new stuff, but that’s not enough. You also need to know all the old stuff, because the web is not your colleague with a MacBook Pro using the latest version of Chrome. The web is any device with an internet connection, so we have to develop accordingly. I’ll say it again:</p> <blockquote> <p>Web development is hard. Damn, web development is hard!</p> </blockquote> <p>I believe the web today is not much different from the web 10 years ago (in a philosophical sense at least), however the ‘what’ and ‘how’ of web development have changed quite a lot. I am not talking about JS frameworks here or smartphone apps, but the stuff ‘under the hood’: the way we think of progressive enhancement (after all, we should learn from past mistakes), mobile-first designs, responsive layouts, etc.</p> <p>You see, a lot of these revolutionary changes are strongly related to layout. In fact, web layout is changing again as we speak (web-time, not human-time). We moved from tables, wacky flash sites knew how to navigate, grids, now (almost) flexbox, tomorrow CSS shapes / multi columns layouts and who knows… as VR enters mainstream - some kind of 3D layout that we can’t even imagine yet.</p> <p>(I get it, I’m bad at intros but I’ll make my point super soon, promise)</p> <p>Before we look ahead, we need to take a good look back. We need to focus on a place forgotten by the web… a dark and scary box that gives me shivers when I think about it. I am of course talking about <code class="highlighter-rouge">email</code>, the last medium on the web were table layouts are the norm.</p> <p>We need to take a good look at it and face the truth - we messed up.</p> <p>Don’t get me wrong, there has been progress, but in general email clients still suck. If there were some ‘html email standards’ the story might have been similar to the browser one, but there aren’t. Everybody is free to do whatever they want. <br /> I am not thinking about crazy things here. It would be enough if we could ditch table layouts and inline styles. I would also be happy if email clients would have some basic support for media queries. Sure, it would be even nicer if we were able to do CSS3 animations or whatnot, but that’s not what I really care about.</p> <p>It’s hard enough to work with nested tables as it is. When you throw a sausage of inline CSS in the mix, various techniques to punch your computer will suddenly become appealing to you.</p> <h2 id="the-bad-news">The bad news</h2> <p>There’s no way to get rid of tables / nested tables. There is just hope and tears. I’ll point out a very unlikely solution later in the article.</p> <h2 id="the-good-news---in-your-face-inline-css">The good news - In your face, inline CSS</h2> <p>As you probably figured out from the intro, I got fed up with all of this. That inline s*** is impossible to maintain. So I started on a very basic (I thought) gulp build system to reduce my increasingly high blood pressure. About 10 npm modules later, I realized this entire business could take a couple of hours.</p> <p>My attempt to destroy inline styles and attributes was fairly successful. I used <a href="https://github.com/jonkemp/gulp-inline-css">gulp-inline-css</a>, thanks to <a href="https://twitter.com/jonkemp">@jonkemp</a>. <br /><small>By the way, inlining CSS is the new black (performance benefits), check out <a href="https://github.com/addyosmani/critical">this cool lib</a></small>.</p> <p>Unfortunately, you can’t get rid of all of them. I learned that if you wish to be on the safe side, you should use attributes whenever you can (progressive enhancement, remember?). Here are some of the things that don’t work:</p> <ul> <li><strong>width</strong> will be added as an attribute only if it’s provided in pixels</li> <li><strong>height</strong> won’t be added as an attribute at all</li> <li><strong>background-color</strong> won’t become <strong>bgcolor</strong></li> <li><strong>text-align</strong> won’t become <strong>align</strong></li> <li><strong>vertical-align</strong> won’t become <strong>valign</strong></li> <li>etc. See <a href="https://github.com/jonkemp/inline-css/issues/8">this issue</a> for more</li> </ul> <p>On the flip side, <strong>border</strong>, <strong>cellpadding</strong> &amp; <strong>cellspacing</strong> will work just fine.</p> <h2 id="re-using-templates">Re-using templates</h2> <p>It’s common that footers or headers are redundant across templates. I figured that the ability to include templates would come in handy, so I installed the awesome <a href="https://github.com/jas/gulp-preprocess">gulp-preprocess</a> plugin.</p> <p>I could then include files by writing up some HTML comment directives (e.g. <em>‹!– @include head.inc.html –›</em> and that’s about it. There are other useful directives, for displaying stuff from a configuration file you can use <em>‹!– @echo foo –›</em>.</p> <p>If pre-process was a dependency anyway, I figured might as well go deeper and do a configuration-based setup. Fast-forward a few npm modules and I ended up with a build system that can take multiple templates &amp; can handle contact info for a team (if you want it too). Here’s an overview of how it works:</p> <p><img src="/blog/assets/html-emails-and-email-signatures-how-hard-can-it-be/html-responsive-email-template-build-diagram.png" alt="Diagram: overview of what the build process can do" /></p> <h2 id="going-forward">Going forward</h2> <p>If gulp was already there I thought I should also add the classical pre-build clean-up &amp; watch the HTML, CSS &amp; configuration files for changes. I went further and minified HTML &amp; inline styles (<em>‹style›</em>), embedded images in the template (base64) for local assets and probably some other smart thing that I can’t remember at the moment.</p> <p>But why stop here? Let’s throw everything we have at it… hell, can we even make a HTML email ‘transpiler’, which converts semantic HTML into a table layout &amp; adds schema.org attributes automagically? Let’s generate screenshots of tests on the popular email clients, all at the convenience of our terminal. Let’s add pre-processor support… How do <strong>you</strong> think we can make writing email templates easier?</p> <p><a href="https://github.com/fadeit/responsive-html-email-signature/issues">Let’s get this over with, once and for all!</a></p>