Skip to content

2. Building Templates and Blocks

Jump to bottom
Dan Sabin edited this page Jan 19, 2018 · 2 revisions

i. Generating a Parent Template

Most email services sites allow you to build modular templates. The issue is that it can be hard to manage the styles and make sure that both the parent templates and the blocks will work nicely together.

Lets start with a good parent template and see how the tool can make it easier for us to build nice modular emails that can be used by any email service.

<!-- Emails use the XHTML Strict doctype -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- The character set should be utf-8 -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width"/>
<!-- Link to the email's CSS, which will be inlined into the email -->
<link rel="stylesheet" href="emails.css">
<link rel="stylesheet" href="block-one.css">
<link rel="stylesheet" href="block-two.css">
<style>
/* This area will be populated with our linked style sheets. DO NOT USE IT. We need this to support gmail users. */
</style>
</head>
<body>
<!-- Wrapper for the body of the email -->
<table class="body" data-made-with-foundation>
    <tr>
    <!-- The class, align, and <center> tag center the container -->
    <td class="float-center" align="center" valign="top">
        <center>
        <!-- The content of your email goes here. -->
        </center>
    </td>
    </tr>
</table>
</body>
</html>

The above template was taken from Zurb Foundation for Emails 2

If we run the template through the command line we'll get the new inlined file. I don't recommend --force since if you're not careful the file will be overwritten so I'd leave that guard on.

inline-email --html parent-template.html --out inlined-parent-template.html

The new file will now have a <style> block in the <head> for clients that need it, as well as inlining all other CSS automatically where needed. It's also important to note that we're including all the linked css sheets for the blocks we plan on supporting here. This is critical because we need the <style> block in the <head> tag to have all the styles in it to support as many clients as possible. If you're worried about email performance feel free to make multiple parent templates for the various commonly used block combinations. That way you don't send the kitchen sink every time. Though depending on your emails this may not really be a factor.

ii. Generating Embeddable Blocks

Embeddable blocks work differently. We can't have random <style> tags in the middle of the emails and we won't have any <link> tags either as these are partials meant to be used anywhere. The solution is to use the --css flag and pass in a list (order matters) of the css files you need for that block. This way each block gets the css it needs inlined, while still being able to be slotted in to the larger template file. Lets start with a simple block-one.html. Note we're using an Inky derived HTML file here.

<container>
  <row>
    <columns>Put content in me!</columns>
  </row>
</container>

For example generating our first block might look something like this.

inline-email --inky --css emails.css block-one.css --out inlined-block-one.html block-one.html

We pass the --inky flag to parse and re-work our html into email safe html (or spaghetti depending on your opinion). We also pass in two css files with the --css flag. These are the same files we linked automatically in our parent html template. Note that we pass them in the same order they were linked before so we get the same cascading effects. And lastly we capture the output with the --out flag. Our resulting file will now work as intended if we were to plop it in anywhere between the <center> tags of our parent template html.

If we wanted to go ahead and now do our block-two.html we would proceed as follows with a new html file.

<span>I'm block two</span>
inline-email --inky --css emails.css block-two.css --out inlined-block-two.html block-two.html

Note that we can mix and match --inky templates with normal ones. You don't have to re-write all your templates at once if you're thinking about using Inky.

iii. Tying it All Together

We now have three html files. They can be combined in any way we want and will render together as expected. If we want to change block-one.html all we need to do is regenerate the corresponding inline version of that file. If we change a stylesheet we only need to update the affected files. In the case of editing block-one.css we'd only have to regenerate the parent and block one inlined html files. Not to mention we can edit the css file outright instead of trying to pull the styles out of the inlined css file. This really helps scope down the error prone work of reading large inlined css html files.

Ultimately, you can make changes to your emails with confidence and easily have peers review your work.

Made with ❤️ in Playa Vista, CA.

Clone this wiki locally