How to get the most out of your free Subscriber Love email templates

Your subscribers’ inboxes are jam packed with emails asking them for something. In fact, in 2020, over 300 million emails were sent and received on average per day. That’s a lot of email! Which is why it’s important to give something back to your subscribers and show you genuinely care about them. And when you give your subscribers a great email experience, you get a boost in email engagement and brand loyalty.

To help marketers give their subscribers a bit of love, we created the Subscriber Love Email Template Pack. Six email templates you can download—for free.

• Welcome email: Create a great and lasting first impression.
• Anniversary email: Thank your customers for their loyalty.
• Birthday email: Celebrate your subscribers on their special day.
• Review email: Get feedback to improve your audience’s experience.
• Re-engagement email: Win back those customers who’ve strayed.
• Plain text style email: Add a one-to-one touch with a friendly face.

They’re all fully optimized for over 90+ email clients, apps, and devices. Including Dark Mode.

Free email templates to show your subscribers love Showing your subscribers you care can do wonders for your email marketing program and overall brand loyalty. Here are six free email templates so you can hit the ground running. Get your email templates →

And to help you get the most out of them, here are some guidelines and tips on how you can use these email templates. We’ll cover:

• General design tips
• General coding tips
• Email-specific tips
  • Welcome email
  • Anniversary email
  • Birthday email
  • Rating & review email
  • Re-engagement email
  • Plain text style email

General design tips for customizing for your brand

The designs for every single one of these email templates were made with busy people in mind—those with small teams or limited resources. You can easily pick up the templates and, with a few design changes, use them for your own brand. Here’s how.

Get familiar with the design grid

Have design resources? Want to create layouts in a design application (like Figma or Sketch) before applying changes to the email templates? Get a head start by understanding the details of the grid that the emails were designed over.

Each template uses the following six-column grid structure:

The emails are all 600px wide with six columns that are each 75px wide. And there is 30px of space separating each column. This gives you flexibility to create single-column, two-column, three-column, or even six-column designs that stack nicely on mobile.

Create Dark Mode versions of your images

Each email template has been optimized for Dark Mode. Meaning the appropriate changes will be applied to background and font colors when viewed in Dark Mode. So it’s important to ensure that your visual assets—such as your logo—are legible with the lights turned off.

In Dark Mode, we swap out the placeholder Wonderblum logo, changing the text from gray to white, to ensure it doesn’t get lost against the dark background. I recommend you use similar tactics for yours.

Update with on-brand imagery

We sourced all of the imagery in the email templates from free stock imagery site Pexels. Another site that offers an extensive collection of free imagery is Unsplash.

If you’ve got a bit of budget to spend, we highly recommend either Shutterstock or iStock. These sites provide vector downloads if illustrations are a better option for your brand, as well as photography.

When creating imagery, we advise saving images at twice the size you display them in the email. Doing so, you’ll get nice crisp rendering on retina displays. But be sure to define the width and height for your images in the HTML to stop Outlook warping your imagery. This will be overwritten for devices by the mobile CSS media queries which are embedded toward the top of the template code.

Keep image file sizes small

To keep your email at a healthy weight, it’s good to compress any of the graphics you plan to use. There are some free online tools you can use to compress your images, such as tinypng, tinyjpg or ezgif. Or download ImageOptim, our image compression tool of choice.

Ensure your customized emails look flawless Any time you touch an email template, it introduces a chance to break. Preview your emails across 90+ email clients, apps, and devices to ensure an on-brand, error-free subscriber experience. Every time. Learn how →

General coding tips to make these templates your own

Diving under the hood of these templates can be intimidating. But don’t worry, we heavily commented the code in the templates to help you through it. (Be sure to take the comments out before you hit send to keep your email file size low. You’ll avoid slow loading times or clipped messages!).

Here are some more helpful tips in case you’re still scratching your head.

Use a web-safe font

We used Trebuchet MS as the default font for these emails. Trebuchet has 99.67% support on Windows and 97.12% on Macs. Break out of the standard Arial or Helvetica font spiral without the difficulty of web fonts (minimal support and more coding required) by picking a web-safe font with good support.

Get the hang of hover effects

We added some interactive elements to the email templates to help with accessibility. And to make the emails pop.

All of the call-to-action buttons have two hover effects: the color change as well as a scale effect. Although they’re not supported everywhere, they’re a great addition in the places where they are supported. Think of them as another way to surprise and delight your subscribers!

Text links and linked images also have a hover effect. For text links, the underlines disappear as a visual cue that they’re actually linked content and not just underlined content. The linked images have a fade effect to act as a clue that the image is linked.

All of the hover effects are created in the header CSS styles with the :hover pseudo class which has decent support across most email clients.

Take note of the two-column stacking rows for mobile

The two-column blocks were created using the hybrid coding method. They use a Z-pattern so that images alternate being on the left and right of text as you go down the email, creating a zigzag.

This creates two types of stacking blocks: standard and reverse.

In the standard stacking order, the content on the left comes first in the code and ends up on top when stacked:

With reverse stacking blocks, the content on the left comes second in the code and will end up on the bottom when stacked:

Check to make sure you’re updating the correct content block so that your blocks stack the way they should on mobile. Hint: The reverse stacking rows are denoted by dir=”rtl” in the code aka the direction is “right to left” since the right will sit on top of the left on mobile.

The welcome and the re-engagement email templates use both standard and reverse stacking content, so pay close attention!

Specific guidance for each email template

Our Subscriber Love email templates are at their best when combined with a spot-on strategy, on the marketing and design/development side. We’ll dig into some template-specific tips in this section.

Welcome email

A welcome email is likely going to be the first email your customers or subscribers see from you—so it’s your chance to make a great first impression.

The best way to make a great first impression? Timing. Try to send this email to your customers or subscribers as soon as you can. You don’t want your subscribers to have forgotten about you by the time your welcome email hits their inbox.

While I don’t believe in the fold (I believe in the SCROLL!), that hero section at the top of the email is incredibly important as it’s the first thing your subscribers will see. So make it count.

Visually, the design calls for the content to flow seamlessly into the image. This effect can be done with either a JPG or a PNG file. However, a transparent PNG offers a more flexible experience in both dark and light modes, as it allows the background color to be controlled with CSS so that the cohesiveness of the hero area can be maintained.

Dark Mode with a transparent PNG gives you the option of changing the background color with media queries so you could create either of the options shown in the example below. Using a JPG limits you to just the option on the right.

This also helps the fade effect that’s used to indicate that the image is linked.

When a JPG is used, the background in the image fades which creates a color block effect. Whereas when a transparent PNG is used, only the image fades leaving the background color to match the area above it.

See an example of the fade effect in light mode with a transparent PNG (on the left) versus a JPG (on the right):

Once you’ve got your subscribers’ attention with the visuals, keep that attention with the call-to-action (CTA) button.

Avoid using button copy that doesn’t give the reader a hint of where a click on it could be going (think, “find out more” or “click to learn”). Instead, use copy that adds some context.

And think about where your subscribers should go after they’ve just subscribed or started with your service. Is there an introductory page? Or do you just want them to jump in and start buying or browsing on their own?

While we’ve included an entire section in the email template that we call “benefits”, this section is entirely optional and can easily be removed from the email template. If you have something to offer here, get some content populated! But if not, there’s nothing wrong with a short and sweet welcome email with a single CTA button.

And as we mentioned previously, this email uses the two-column stacking rows.

Specifically in this email, the section starts and ends with reverse stacking rows and has a standard stacking row between them. This creates a Z-pattern for the desktop layout with the image starting on the left, but allows for a mobile layout where the copy sits on top of its coordinating image.

Birthday email

Birthday emails can be tricky. For a birthday email to be truly successful, you should give something genuine to your subscriber or customer. And that doesn’t have to be a coupon or retail offer (though those are great options!). Birthday emails are often classified as “surprise and delight” emails. So how can you surprise or delight your audience with a birthday email?

Another tricky thing about birthday emails is you have to decide whether they even make sense for your brand to send. And do you even collect birthdays from your audience?

If you do want to lean into birthday emails but don’t currently have your audiences’ birthdays, send an email campaign asking your subscribers for their birthdate. Give them an incentive to offer that information by telling them they could get something awesome on their special day. But make sure you follow through with that!

Anniversary email

Like the birthday email, you get the most out of the anniversary email if you can offer a genuine reason to email your subscribers on a specific anniversary.

An example I like is celebrating how long a customer has been with your brand. This type of messaging shows that you care about your customers’ loyalty.

Rating & review email

When you’re asking your customers to rate your services or products, timing is essential. You don’t want to ask for a review too soon—they may not have properly assessed your product yet!

While we’ve positioned this email template to ask for reviews for a product or service, you can easily use this same email template to ask for feedback on a newsletter. Kind of like a Net Promoter Score (NPS) email. Get some quantitative feedback on how your subscribers feel about your newsletter by sending them a review email every quarter.

As you dive into the code of this email template, make sure you assign the correct URL to the correct star. The increasingly highlighted star effect is created by using HTML symbol stars, pseudo selectors, and the dir=”rtl” attribute. So the first star that appears in the email is controlled by the last star in the code.

We put comments in to help make sure you add the URL correctly, but here it is visually as well:

<tr>
<td align="center" valign="top" dir="rtl" style="padding:0 0 50px">
<p class="star" style="font-family:'Trebuchet MS', Arial, sans-serif; font-size:18px; line-height:28px; color:#262524; margin:0; padding:0;">

<!--Fifth Star-->
<a rel="noopener" target="_blank" href="http://www.example.com" style="font-size: 50px; color: #028383; text-decoration: none;">&#9733;</a>

<!--Fourth Star-->
<a rel="noopener" target="_blank" href="http://www.example.com" style="font-size: 50px; color: #028383; text-decoration: none;">&nbsp;&#9733;</a>

<!--Third Star-->
<a rel="noopener" target="_blank" href="http://www.example.com" style="font-size: 50px; color: #028383; text-decoration: none;">&nbsp;&#9733;</a>

<!--Second Star-->
<a rel="noopener" target="_blank" href="http://www.example.com" style="font-size: 50px; color: #028383; text-decoration: none;">&nbsp;&#9733;</a>

<!--First Star-->
<a rel="noopener" target="_blank" href="http://www.example.com" style="font-size: 50px; color: #028383; text-decoration: none;">&nbsp;&#9733;</a>

</p>
</td>
</tr>

The HTML above is color coded so you can see which piece of code relates to which star in the screenshot of the email below:

As an interactive rating scale, it pairs great with a survey tool such as SurveyMonkey or GetFeedback.

In this case, you’d create a survey with the first question (or only question) as a rating question. Grab the URL for each rating and paste it in the corresponding star’s href in the code. Make sure to set up the thank-you page for your survey for your audience to land on when they click through.

Alternatively, you can use it in a less complex way: Set up a thank-you landing page and link each rating to that same page. But add a query string at the end specific to each rating, like so:

Then, use the click tracking from your ESP to track which rating was clicked. Easy!

Re-engagement email

You may need to re-engage or win back your inactive customers or subscribers, and that’s where this email template comes in.

Maybe customers haven’t purchased from you in a specific duration of time. Or subscribers haven’t opened or engaged with an email from you in awhile.

Either way, this email should make an impact in the inbox with a clear and concise headline and CTA button. If you do manage to get an unengaged audience member to open this email, that headline and CTA button are your only chance to re-engage them.

Design-wise, the re-engagement email looks similar to the welcome email, but the stacking rows in this email are done with standard stacking rows on the top and bottom and a reverse stacking row in the middle.

The Z-pattern is the same on desktop as in the welcome email, but on mobile, the images end up on top.

Plain text style email

Along with all of the beautifully designed email templates, we’ve also thrown in a fully optimized plain text style email template.

Why plain text? We’ve had success with plain text style emails for some campaigns, so they definitely have a place in our email program. They’re worth A/B testing to understand if they have a place in yours, too.

Plain text style emails can work really well if your messaging aligns with the format. It should feel genuine as if they’re coming from an actual human being!

You may notice there are no CTA buttons in this email template.

Instead, you’ll rely on text links to add to the authenticity. So ensure you link specific parts of your text. We found that linking text that’s related to the action or goal of the email works best.

Subscriber love for the win!

We marketers are always asking for our subscribers and customers to make their next purchase or restart a subscription or fill in another form. Give back to your subscribers. Remind them that you do value them beyond being just another member of your list.

These Subscriber Love email templates are just the start of what you could do to show your audience some love. We’d love to hear how you’re using them in your email program!

Are there any other email templates you’d like to see from us? Let us know in the comments below.

Test your emails with Litmus Email Previews Prevent broken emails and protect your brand reputation with every email send. See how your emails look across 90+ email clients, apps, and devices—including Dark Mode—in one spot. Get your 7-day free trial →