In the first two parts of this case study series, we’ve seen how the new Envato Tuts+ emails were designed, then built as static HTML/CSS deliverables. In this final piece of the puzzle, I’ll show you how we converted those files into Campaign Monitor templates.
At this stage there were a couple of team members involved in the process: Cameron and me. Cam took charge of integrating the digests into Campaign Monitor, I handled the newsletters, which I’ll be explaining in this post.
1. Prepare Your Files
Nicole delivered a series of files at the end of the build process, including HTML, CSS, and image assets. Together, they catered for a number of different email types, so I needed to take only the bits necessary for the newsletter template and work from there.
Tip: Download the source files if you want to follow along.
Local Hero
Currently, the paths within the files are all relative. There are a couple of links to CSS files, some links within those to images, and they all point around the local file directory as we see it. For example:
1 |
<!-- Stylesheets -->
|
2 |
<link rel="stylesheet" type="text/css" href="css/styles.css" /> |
3 |
<link rel="stylesheet" type="text/css" href="css/var-newsletter.css" /> |
4 |
|
5 |
<!-- Optional - for selectable topic colours -->
|
6 |
<link rel="stylesheet" type="text/css" href="css/topics.css" /> |
When we upload our files at the end of the tutorial, Campaign Monitor will recognise all these paths and alter them accordingly.
2. Start at the Top
Our process is this: we’ll take all the static bits of our email template and swap them out for dynamic snippets wherever possible. Scrolling down, the first culprit I find is around line 73: a link to the web version:
1 |
Something not looking right? <a href="#">View the web version</a> |
That link will be different every time, so let’s switch it for CM’s dynamic <webversion>:
1 |
Something not looking right? <webversion>View the web version</webversion> |
Easy as that. Next!
3. More Important Links
The <webversion> which we just took care of is one of a few important links made available by Campaign Monitor. While we’re in the mood, let’s make use of one or two others. The email preferences paragraph can be found at around line 346, and looks like this:
1 |
<p>You’re subscribed to this newsletter because you’re part of the translation team. Not quite to your liking? No problem: <a href="#">update your email preferences</a> or <a href="#">unsubscribe</a>.</p> |
Let’s use <preferences> and <unsubscribe> to make that section dynamic:
1 |
<p>You’re subscribed to this newsletter because you’re part of the translation team. Not quite to your liking? No problem: <preferences>update your email preferences</preferences> or <unsubscribe>unsubscribe</unsubscribe>.</p> |
There are a couple of other important links, such as <forwardtoafriend>, but we won’t be making use of them in this case.
4. Single Lines
The next thing we need to attend to is the main email heading.
Around line 87 you’ll find it marked up like so:
1 |
<p class="heading h1">Translation Project Newsletter</p> |
2 |
<p class="heading h2">Month 20XX</p> |
Paragraphs, with classes of heading and h1 or h2 (thanks email HTML). Each one of these needs to be editable from within Campaign Monitor, so, given that we’ll only ever need to edit the text content and nothing else, we can use the <singleline> template element:
1 |
<p class="heading h1"> |
2 |
<singleline label='Newsletter title'>Translation Project Newsletter</singleline> |
3 |
</p>
|
4 |
<p class="heading h2"> |
5 |
<singleline label='Newsletter subtitle'>Month 20XX</singleline> |
6 |
</p>
|
The paragraphs remain perfectly intact, we’ll just add an editable region within each one. Each singleline has an optional label attribute, which will be helpfully displayed from within the Campaign Monitor editor:
5. Multi Lines
For content which is a little more complex than headings and straplines, we’ll use the <multiline> element. On line 134 you’ll find the content of our “first article” which we’ll use as an introduction for each email:
1 |
<p>In this translation project newsletter n tempus nunc ullamcorper at. Etiam eget turpis augue. Proin a efficitur massa. In ac augue libero. Nulla in tortor commodo, hendrerit nisl non, placerat nunc.</p> |
2 |
|
3 |
<p>Ian Yates<br /> |
4 |
<strong>Editor, Envato Tuts+</strong></p> |
Let’s make these two sections dynamic:
1 |
<multiline label='Intro blurb'> |
2 |
<p>In this translation project newsletter n tempus nunc ullamcorper at. Etiam eget turpis augue. Proin a efficitur massa. In ac augue libero. Nulla in tortor commodo, hendrerit nisl non, placerat nunc.</p> |
3 |
</multiline>
|
4 |
|
5 |
<multiline label='Your friendly host'> |
6 |
<p>Ian Yates<br /> |
7 |
<strong>Editor, Envato Tuts+</strong></p> |
8 |
</multiline>
|
These follow the same pattern as before: editable regions, with optional labels–but this time they allow us a WYSIWYG editor:
6. Editable Images
Scroll down to line 168 and you’ll find an image within a table cell, all on its own:
1 |
<td class="image"> |
2 |
<img src="images/onecol3.jpg" width="514" alt="" /> |
3 |
</td>
|
This will be part of a repeatable section (which we’ll deal with in a minute) so let’s first make this image dynamic. I don’t like using the word “simply” in tutorials, but in this case I’ll let it slide: simply add the editable attribute to the image tag. Done!
1 |
<td class="image"> |
2 |
<img editable src="images/onecol3.jpg" width="514" label="section image" alt="" /> |
3 |
</td>
|
The width attribute is required, but the src (which gives us a default image) is optional, as is our friend the label attribute.
With that done, the editor allows us to remove the default image, upload a new one, add alt text, and (crucially) add a link.
“The hard data says: emails with images convert almost twice as well.” – Chris Hexton, CEO and Co-founder of Vero
Note: bear in mind that if we choose to remove the image completely, the containing markup will remain. This can result in large padded areas without content, so consider how you markup your images in the design.
7. Repeatable Areas
That image is part of a section which we want to be able to repeat as many times as needed. It begins on line 146 and ends on line 176, with the comments:
1 |
<!-- Repeatable Article, Stroked at Top -->
|
2 |
<table width="100%" cellpadding="0" cellspacing="0" border="0" align="center"> |
3 |
|
4 |
</table>
|
5 |
<!-- END Repeatable Article, Stroked at Top -->
|
As we did earlier with other areas, we need to make the heading within this section a <singleline> and the content a <multiline>, so do that before going any further.
To make this whole chunk repeatable, we wrap the necessary bits in a <repeater> element:
1 |
<!-- Repeatable Article, Stroked at Top -->
|
2 |
<repeater>
|
3 |
<table width="100%" cellpadding="0" cellspacing="0" border="0" align="center"> |
4 |
|
5 |
</table>
|
6 |
</repeater>
|
7 |
<!-- END Repeatable Article, Stroked at Top -->
|
This will give us some extra controls in the Campaign Monitor editor, allowing us to duplicate the section, move it (useful for reordering), or delete it.
Note: the <repeater> must container either a <singleline>, a <multiline>, or an <img editable>.
Another note: you can’t nest <repeater> elements!
8. Layout
Now for a repeatable section with a difference. It’s a topic-specific section, and each topic has one, with the appropriate topic colour.
In the case of our translation project newsletter, sometimes we might feature a Photography & Video section, along with Code, and Game Development. Sometimes we may skip Code. Sometimes we might feature all nine topics. So what’s the best to organise this? Enter the <layout> element.
We can use multiple layout elements within a single <repeater> block, so that each time we duplicate the block we’re given a choice of layouts. In our case, we want to choose from the available topics, so our markup will look a little like this:
1 |
<repeater>
|
2 |
|
3 |
<layout label='Topic: PHOTOGRAPHY & VIDEO'></layout> |
4 |
<layout label='Topic: WEB DESIGN'></layout> |
5 |
<layout label='Topic: DESIGN & ILLUSTRATION'></layout> |
6 |
<layout label='Topic: CODE'></layout> |
7 |
|
8 |
... |
9 |
|
10 |
</repeater>
|
There you’ll see layout elements, each with a unique label.
Important: don’t use escaped HTML entities (like & rather than &) within the layout labels.
Begin on line 183 by wrapping our topic blocks in a <repeater>. Then wrap each of the topic blocks in a <layout label=''> element, being sure to assign them unique labels.
Now, once we upload everything to Campaign Monitor, the editor will give us all our layout options when we want to repeat a section:
9. Upload to Campaign Monitor
All our hard work is done, now we need to upload our files to Campaign Monitor in order to use our template in an email campaign!
In your Campaign Monitor dashboard go to Templates > Import.
Next, enter a name for your template, select your finished HTML file, then select all other necessary assets (CSS and images) as one zip file.
Your files will be uploaded and processed which will take a moment. Styles will be optimised (some inlined, some injected into the <head> of the HTML), and paths will be updated. When that’s all done, your template will be available to select when you start a new campaign!
Conclusion
That wraps up this email case study; an insight into how we designed and built the Envato Tuts+ emails. I hope you enjoyed following the process, and if you’re in need of email inspiration for your next project be sure to check out the latest email templates available on Envato Market!
