Design Great Emails

read

Welcome to the Course

Over 200 billions emails are sent everyday. With all of that noise, how do you stand out? What makes an email truly great? This course will answer that question and dive into how to use Klaviyo to make beautiful emails.

We will look at the following:

  • Email Design Basics
  • Klaviyo's Email Template Editor
  • Best Practice Tips to Make Emails Faster 

Let's get started!

Anatomy of an Email

While design work may look daunting, good emails have similar traits. Namely, they are simple, look good across all devices and email clients, and have clear next steps for your reader to take.

In this section, we go through an overview of email design basics. We'll walk piece-by-piece through an example email and highlight the basics of what makes a great email. In the next section, we will do an in depth dive into how you can use the Email Template Editor to customize your email.

Great emails usually have:

  • preview text,
  • a logo, 
  • navigation links,
  • body content,
  • social links,
  • and an unsubscribe link.

If you want to follow along, I will be editing the prebuilt email template Newsletter #7 in Klaviyo. Let's go!

template-num-seven.png

Preview Text

Preview text displays next to the subject line and displays before someone opens an email. It's important to make this text simple and to the point, as you're cluing in the customer on the content in the email. Using language alluding to exclusivity or urgency is a great way to increase open rates.

2019-02-05_15-44-06.png

2019-02-05_15-47-22.png

Additional Resources: Insert Preheader (Preview) Text

Header Bar

You can drag in a Header/Link Bar block and add in your logo and navigation bar with 3-4 links to keep things simple. Klaviyo's Header/Link Bar block has four different common header layouts for you to choose from.

A simple way to make your email look great is to match the style of your navigation bar to the navigation setting on your website. To make your header and navigation bar a solid color, make the block background and the button colors the same. Also, your logo shouldn't be more than 150px tall to avoid pushing the content of your email too far down the page.

header-link-bar.png

Additional Resources:

Email Body

The body of your email can vary greatly depending on the purpose of your email. However, most of your body content will have a

  • Heading
  • Image
  • Content
  • Call to Action Button

The body of your email is your chance to tell your customers why they should be looking at your email. Whether you are informing your customers about a new product in your store or sharing more information about your company, you have the opportunity to let loose and show off your branding. Try picking different complimentary fonts to polish your email, use spacing to draw the reader's eye, or add in some dynamic content (covered in the next section) to personalize your email. Sky's the limit!

email-body.png

Additional Resources: Create a Base Template - Body Content

Footer

Last on the list -- the footer. A footer is a great place to add links to your social media accounts, as well as links to more information about your organization, and an unsubscribe link. You can also add a navigation bar to your footer if you want to include more than the 3-4 links in the header of your email.

The CAN-Spam Act legally requires all organizations to include an unsubscribe link in their marketing emails. People typically look for these in the footers of emails, so you should make these links easy to find (otherwise recipients might mark your emails as spam instead). You can also include a manage preferences link and give recipients the option to change their email preferences rather than unsubscribe completely. You can find both an unsubscribe and manage preferences tag in the Insert Tag drop-down in the text editor.

email-footer.png

Additional Resources: Create a Base Template - Footer

Example Email Template

There you have it! We've walked through the anatomy of an email template from preview text to footer.

example-template.png

If you want more information on email template design basics, be sure to check out our help center.

Overview of the Email Template Editor

So you have your email template basics. Now let's head on into the Email Template Editor in Klaviyo and learn how you can use it customize to fit your specific email design needs.

The Email Template Editor allows you to add the fonts, colors, and other stylistic properties you need to make your brand and products shine. From the Styles Tab on the left side menu, you can edit the default settings for the entire email template.

In the Blocks Tab on the left side menu, you can access the different types of blocks that can be used to add content and enhance an email. When you use a block, there will be further options to set your preferences in the Block Tab on the left side menu and to customize the block using the Block Styles Tab.

Additionally, there is an option to preview an email either sent to your email or in Klaviyo. This can be used to test make sure dynamic content is pulled in correctly and to check out the preview text.

overview-of-editor.gif

Additional Resources:

Demonstration Scenario

So let's say that we're running a high-end, luxury dog supply store called Scratch & Sniff. We want to send an email to our customers that

  • Gets readers excited to open our email
  • Highlights our logo
  • Gives information about our company 
  • Shows off 3 new products
  • And encourages people to follow our social media pages

Keep this in mind as we go through this example. I will walk you through transforming prebuilt Newsletter #8 into a completely styled newsletter email. If you want to follow along you'll need your logo, an ecommerce store integrated with Klaviyo, and an idea of your brand's colors and fonts. Let's get started!

demo.gif

Template Styles

To begin, let's start by looking at the Template Styles Tab (labeled Styles) on the left side menu. Here you can edit styling options that will apply throughout the entire template. You can adjust, email, text, link, mobile, and background settings, along with heading styles and data format.

template-styles.png

Helpful Tips:

  • Some of the popular hex color codes are
    • White - #FFFFFF
    • Black - #000000
    • Off Black - #222222 (Softer Black)
    • Red - #FF0000
    • Green - #00FF00
    • Blue - #0000FF
    • Yellow - #FFFF00
  • Some popular font parings are
    • Font XYZ/Font XYZ, Sans 
    • Georgia/Century Gothic
    • Helvetica/Garamond 
  • Keep content between 500 and 700 px to make sure your email will display well in the mobile setting
  • Use the same color scheme as your website, but if not the some good color pairings for your content and background are...
    • White/White
    • White/Neutral
    • White/Black
    • Black/Black

Next, let's jump into our demonstration and highlight some additional resources.

Template Styles Demo

For our example, we are going to add our branding to the template styles so throughout the email.

  • I am going to leave the email width at 600px to ensure our email is optimized for mobile
  • Make the margin top padding 0 px to make sure that our logo is the first thing someone sees when they open their email
  • Edit the text color to a dark gray and the text font to Trebuchet MS to match with my brand. We will do the same to Heading 1, as well as changing the font size.
  • And upload a photo for the background

Additional Information:

Text Block

Text Blocks can be used to, well, add text to your email. In both the Block and Block Styles you can adjust the font, font weight, line height, and background for the text.

While the default text settings are set in Template Styles, a preview text block is an example of using a block setting that is different from the rest of the content because, as we learned in the previous section, once someone has opened the email, we want to make the preview text disappear.

text-blocks.png

Helpful Tips:

  • Editing in the Block Styles is recommended, as it will add less HTML code to your email, making it able to load faster and to prevent it from getting clipped by certain email clients.
  • If you need to edit the source or HTML code in the Text Block, click on the Source button in the top right hand corner of the text block.

Back to our demonstration...

Now that we have our template styles set, we're going to add preview text to our email using a text block. Preview text will get our recipients excited to open an email from us.

preview-in-inbox.png

  • We'll change the size, color, background color, and the padding of the text block in the block settings to make my preview line invisible.

Additional Information: 

 Header/Link Bar

In the Header/Link Bar Block, you can add a logo and navigation links that redirect to different locations on your site. If you haven't put in your default header links when going through the Setup Wizard, you will see placeholder values populate that you can edit. In the Block Styles menu for the Header/Link Bar Block, you can change the background color, link padding, and layout. You can also create distinct mobile layouts using the Mobile submenu.

header-link-bar-example.png

Helpful Tips:

  • Make your navigation bar mirror your website. If you have more than 4 links on your website's navigation bar and want to include them in your email, stick the most important links at the top of the email and add the rest of the links at the bottom.
  • Keep your logo smaller than 150 px to ensure your content doesn't get pushed too far down

Hopping back into the demonstration...

In our demo, we're going to feature our logo upfront and match the navigation bar to our website.

  • We'll edit the text, URL, background, and overall feel of the link buttons

Additional Resources: 

Body Blocks

Column BlocksColumn Blocks can be used when you want information to be next to each other. You can also add columns to an email from the Blocks Tab by clicking on Add Columns to Email in the bottom right corner. Using this setting, you can add multiple columns as well as giving the columns different widths.

Image Blocks: You can add an image to an email by adding an image block or by including it in a column. You can import an image from an URL, by uploading it from your computer or your Klaviyo image library, from your product catalog, or by inserting a placeholder in a flow email that will dynamically populate an image.

Button Blocks: Call to action buttons are an important of any ecommerce email. You can drag a Button Block in from the Block Tab and customize the font, colors, and size according to your brand. A small Border Radius will make the button more round and a large value will make the button more round. Similarly, the Drop Shadow will make the button look more 3D.

body-block-example.png

Helpful Tips:

  • Add Alt Text to your images so that if they don't load, your customers will still understand the image that should have been there.
  • Make buttons obvious, but still in-line with your brand

Back to the demonstration...

In this section, we want to give our recipients information about our brand and direct their eye to the call to action button that will send readers to our site.

  • We will Change the header to match my template style and the padding to change the space around I text
  • Insert a split block with an image and text
  • Edit the alt text on the image and its size
  • Change the button block color, font, and border to match with my brand

Additional Resources:

Product Block

Product Blocks are a great way to showcase your items in an email and prompt your customers to purchase. When you add in a Product Block, you can choose to populate from a feed, which is a great way to show trending products or personalize the items without having to manually change the photos, or you can choose the items from a catalog. These images will remain static and will not change.

product-block-example.png

Helpful Tips:

  • Integrate your Klaviyo account with your ecommerce store to get the most out of your product blocks
  • Learn more about the specifics of how product feeds update

Hopping back into the demonstration...

We want to feature 3 new products. To do this, we'll use a product block where we select items from a catalog.

  • We'll edit the text to match with my template style
  • Add in a horizontal rule to create separation between the content and the items I want to sell
  • Changed the order of the items
  • Match the button text, color, and border to match with our brand

Additional Information:

Social Block

Social Blocks are an easy way to add in social icons to link your customers to your social media sites. If you have a custom icon, you can also add it here. You can add spacers to adjust where your icons sit on your email. You can also edit this under Block Styles.

social-block-example.png

Helpful Tips:

  • Save your social and unsubscribe blocks to use for future emails.
  • Use the colors that match with your email's style.
  • Add in a manage preferences tag so recipients can adjust their email preferences rather than unsubscribing.
  • Check out the mobile view to make sure the links fit to your style

Last step in the demonstration...

We want to encourage our readers to follow our social media pages.

  • We'll add in a Social Block with Facebook, Instagram, and Yelp icons
  • Move the icons to the middle 
  • Change the icon color to match the style of the email

Additional Information:

Tips to Build Emails Faster

Creating beautiful emails is no short process. Here are 5 tips and tricks to make your email creation go a little faster.

1. Use Klaviyo's built-in email templates

Klaviyo has already done the hard work for you. In your Klaviyo profile there are eight different email templates just waiting for your to add your content and brand. If you integrate your store with a ecommerce platform like Shopify, even more email templates will populate in your account for events like a customer account welcome or shipping confirmation.

Want a designer's touch to your email? Check out Klaviyo's Template Library where there are 52 different pre-designed emails for any occasion. You can find in by clicking on the Email Templates Tab and navigating to Create Template and then to Themed. Under the Basic Tab, you can also find 19 different basic layouts for emails that can be customized to your liking.

tips-to-build-faster.gif

2. Use prebuilt dynamic blocks and product blocks

If you navigate over to your flows and have integration with an ecommerce platform, you'll see an abandoned cart or browse abandonment flow with emails featuring prebuilt dynamic blocks for items left in someone's cart. Rather than creating your own, use the blocks built into Klaviyo.

Also, rather than having to change the items within your emails before sending them out, use product blocks to personalize suggested items or to highlight trending items.

use-dynamic-blocks.png

3. Save templates and email blocks

Create templates that can be used either in a variety of ways or multiple times without having major edits on them. Also, save your email blocks that you use often, like your header and footer. You can save a block by clicking on the block and clicking on the star icon that pops up in the upper left corner of the block.

use-saved-blocks.png

Additional Information:

Email Design Best Practices

There you have it! By now you know the basics of email design and how to use Klaviyo's email template editor. Let's highlight some best practices to really make your emails shine!

1. Check the Length of Your Emails

Some email clients clip emails that are too large, so your recipients won't be able to see everything in the email in their first go round,

To test how long your emails are, go to your email templates, click the the drop down arrow under Actions and click Export. Then, copy the text and put your emails into a site like this before they send to make sure they are under approximately 102 KB (where Gmail begins clipping emails).

In a similar vein, make sure your images are no more than 1 MB and between 600 and 1200 px when you upload them and style your content in the styles and block styles tab, rather than in the block itself. An exception would be if you want to make a specific word a different color or font.

export-template.png

2. Stay on Brand

Make sure that your email brand is consistent from header to footer. Save your blocks to make your emails faster, but especially for header and footers that should be the same in every email. Try to pick a color scheme, preferably the same one as your website and in your logo, and stick with colors that compliment.

klaviyo-branding.png

3. Make Your Mobile Email First

More than half of emails are read on mobile devices. With that in mind, use the variety of tools within the Email Template Editor to make sure that your emails are optimized for mobile.

mobile-templates.gif

Additional Information:

Congratulations

Congrats on finishing this course on designing great emails. You should feel comfortable using the Email Template Editor and have a good idea of what makes an email look great. Be sure to check out our Help Center for more information or contact support if you think you have a problem with your account.

Happy Sending!

Was this article helpful?
1 out of 1 found this helpful