Tutorial: 5 Responsive Email Templates You Can Create

We’ve written before about the essential templates email marketer should have on-hand: a letter or text-based template, an invitation template, an announcement or reminder template, a content roundup template, and a product feature template. And the templates are even better when they’re automatically responsive on mobile devices. Designers use responsive email templates as a consistent brand foundation, which saves time and improves workflow efficiency. (Can you imagine starting from scratch all the time?!) In this tutorial, we’ll first show you some solid examples from big brands, and then we’ll walk you through how to mimic and build these essential templates (all mobile responsive) in the BEE editor.

1. Text-based templates

Letter or text-based templates are commonly used to send a personal or serious message to subscribers, like an update to the Privacy Policy or Terms of Service. Check out this email from Airbnb:

A letter or text-based email template is useful for:

1. Welcome emails
2. Apology messages
3. Company or product change announcements
4. Privacy policy or terms of service change announcements
5. Weekly or routinely sent messages

For letter or text-based email templates, important components to consider including are:

1. A standard, branded header/logo
2. An easy-to-read email-safe font for the body text
3. A call-to-action button
4. An e-signature
5. A footer

Building a text-based template in BEE

Open up a simple one-column template and begin customizing the template in the Settings menu on the right. This menu will let you make changes for the entire email in one go. Let’s change the font to Helvetica, make sure the background colors are white/transparent, and update the links to show up as Airbnb’s coral brand color.

Next, recreate the basic structure of the email, which has three basic parts: the logo header, the body text, and the footer separated by a divider.

Drag in an image block, followed by two text blocks separated by a divider:

Once you drop in the logo, position it by turning off the auto-width function and making sure it’s left-adjusted.

After updating the footer text, the template is ready to go! Now, this letter-style template can be updated by just dropping in the appropriate body text.

---

2. Invitation-to-join templates

Invitation emails require companies to introduce an offer’s value proposition quickly, whether it’s joining a webinar or downloading a free e-book. Having a strong invitation template means you’ll always have a consistent way to alert readers to the “what, when, where, and how” of an offer, so that readers can get the basics in one scan and take action. This email from Skillshare invites subscribers to sign up for new workshops:

An invitation email template is useful for:

1. Webinars, conferences, or other reservation-required events
2. Lead gen offerings like giveaways or downloads
3. New product introductions

For invitation email templates, important components to consider including are:

1. A logo/header
2. A strong visual image or two (especially of the product)
3. A fairly short section providing promotion highlights
4. Clear and strong call-to-action language
5. A footer

Building a text-based template in BEE

First, in the Settings menu, make sure the email body has a white/transparent background, teal link text, and Helvetica for the font.

Then, pull in the rows that correspond to the layout, from single-column to triple to double, along with content blocks. Here’s how the template is shaping up:

Next, update the font color and style throughout the email, along with the CTA buttons (extra button formatting tips can be found here!) so that this template will be easy to update later with copy and images.

---

3. Announcement/reminder emails

Every marketer needs a template that’s ideal for sending out an email, with a single, clear message to readers. While the template might get updated from time to time, it’s valuable to have a structured template with a standard width and flow in place. Everlane, for example, always uses the same header, content dividers, “Radical Transparency” section, and footer for announcement emails.

An announcement email template is useful for:

1. Big promotion alerts or reminders
2. Product teasers, reveals, or updates
3. Event reminders

For announcement email templates, important components to consider including are:

1. A standard, branded header/logo
2. A placeholder for artwork
3. A consistently-formatted section for body text
4. A clear call-to-action button
5. A footer

Building an announcement email template in BEE

Start by modifying elements in the Settings menu, like an all-white background and a serif font.

Then, use the simple one-column template and bring in three main components: an image placeholder for the logo, an image placeholder for artwork, a CTA button, an image and text bucket for the “Radical Transparency” section, and text for the footer. Let’s also add horizontal dividers like Everlane. The skeleton looks like this:

Now, bring in the Everlane logo and the Radical Transparency image; then, format and update the text and CTA button. Here’s the template, ready to be updated with the next product announcement:

---

4. Content roundup emails

A single column, modular design is perfect for content roundups—something any brand should have in their template library. Core77 lists their most popular free classes in a well-organized and well-formatted email, which can be easily repurposed from week to week with new content:

A roundup email template is useful for:

1. Product/service lists
2. Blog/article digests

For content roundup email templates, important components to consider including are:

1. A standard, branded header/logo
2. Consistently-formatted modules containing images, text, and CTAs
3. A footer

Building a content roundup email template in BEE

This email is especially easy to create in BEE with a sweet little shortcut. To begin, build the header and first module of the email, like so:

Then, copy the first module as many times as needed without having to reformat each time. Simply use the duplicate button in the upper right.

Now, the template is ready to rock-n-roll!

 

---

5. Multiple products templates

A product feature email template is a baseline for a regularly-scheduled product offering message that features multiple items. Danner uses a simple template to introduce and remind subscribers about featured boot collections:

A multiple-product email template is useful for:

1. Featuring products/services in a photo collage or grid
2. Blog/articles organized in a grid

For multiple-product email templates, important components to consider including are:

1. A standard, branded header/logo
2. A consistently-formatted module highlighting a single product
3. A mobile-responsive grid of images featuring additional products
4. A call-to-action button

Building a multiple-product roundup email template in BEE

Over in the BEE editor, begin with a basic one-column template. Then, pull in content blocks so the structure is similar starting with a logo image, header text, a header image, text, a CTA button, and on and on.

Once the text and CTA buttons are formatted, the template is ready to go!

Build your own responsive email templates today with a free trial of BEE Pro! The editor is intuitive and easy to use, and all your beautiful templates can be saved and repurposed for every newsletter need!