Solutions

Originally published on December 28, 2015. Last updated July 30, 2021.The reign of single column layout is over. It used to be common advice that single-column emails render better on mobile devices. Luckily, responsive design tools like BEE Pro are here to save the day.It’s true that single-column works best for mobile and that 50% of users check email on mobile devices. But responsive emails show up in the best format no matter which device is used. That means you can design a multi-column email and still be confident that it will render well on both mobile and desktop.Why is this important? From a graphic design perspective, the single-column email view is pretty boring. Multi-column design takes advantage of F and Z patterns to create a visual hierarchy, rather than creating an endless one-column scroll.From an email marketing perspective, users are 65% more likely to click through if they open your email on a different device.What this means is that emails are opened in different environments by the same user. So you can’t just optimize for mobile or just optimize for desktop. You have to optimize for both. That’s where multi-column design comes in.Let’s learn more about when to use multi-column design and how to optimize your next marketing campaign.

When to use multi-column email layout  

The multi-column email layout allows for endless design flexibility and has a number of benefits. Just a few pros of multi-column design:  

• Get more creative with your designs. Columns, multiple CTAs, bright images. You can use these in single-column, but multiple columns allows for much more creativity. 
• More opportunities for CTAs. Buttons, links and images allow for more opportunities to get your audience to act. 
• Recurring components. Repetition and patterned elements can come off as repetitive in single-column. When used in multiple columns, it creates an aesthetically pleasing effect. 

Here are some examples of when you should use a multi-column email template:

• To display products. Arranging products on a grid allows you to showcase a lot of items quickly, maximizing the amount viewed above the fold.

• For image-driven email with little-to-no text content. If your email is almost entirely image-based, and the images don’t require descriptive text, multiple columns might be the optimal layout. 

• Multiple calls to action. Having a simple, clear, focused message with a single call-to-action is a wise strategy for busy readers. But if you have more than one call-to-action and no strong hierarchy to your message, multiple columns can be beneficial.

• To link to secondary content. Many publishers send emails with a feature story at the top, followed by secondary content in multiple columns underneath it. This layout, that goes from first a single column then to multiple columns, can be used to focus readers’ attention on the most important piece of content but still provide additional information.

Benefits of multi-column email design 

Now that we have some examples as to when we can use multi-column email design, let’s listen to an expert. Yuliana Pandelieva, a graphic designer at BEE, shared some key insights on why multi-column is the best email design choice:

1. Flexible width columns. You can resize and adjust the width of any column you choose. This allows you to add 5-6 columns to each of your rows. 
2. Design for mobile. When you design emails, you want to make sure it renders just as well on mobile as it does for desktop. Check how your designs will render on mobile right in BEE Pro for easy and fast creating.
3. Responsive with no code. The diversity of your layout will not require you to code anything. The endless features will allow you to simply focus on the elements for faster production time.
4. Proper text alignment. The multi-column design allows for more copy without repetitiveness. Rearrange the copy within multiple columns to avoid repetitiveness for more visually appealing emails.
5. Reverse stacking. Rows containing multiple columns will render vertically on mobile. You are able to override this function, but you are also able to reverse the way in which those columns are stacked to avoid zig-zag looking designs. 

“Multi-column email layouts with BEE Pro give you more design freedom - you can easily alternate between different layouts, widths and see exactly how it will render with mobile design mode - it’s painless creativity”.     —Yuliana 

Wrap up

When it comes to email design preference, a responsive multi-column email is optimal. This layout has numerous benefits due to its design flexibility. Try BEE Pro and access our template catalog for design inspiration. If you have questions or just want to let us know how it goes, reach out to our team or get in touch on Instagram.

Have you noticed more animated GIFs in your inbox? We have! Watch this quick video tutorial on how to design a simple yet effective animated GIF. To learn more, check out workshop tutorial: How to properly incorporate GIFs in email...and try it out in the BEE email editor: http://beefree.io/

Watch how to design a unique content divider in your email message that stands out from your basic horizontal dividers. Follow along and give it a try with our BEE email editor: http://beefree.io/To learn more, check out our workshop: How to create unique content dividers in email

The layout ofanemailis every bit as important as the message it contains. When your email is well organized with an effective layout, you can better communicate your message.This week's Design Inspiration email from BarkBox isa great example of how a modular, or grid-based, design improves readability withclearly defined sections. Have a look:

High-contrasting background colorsdistinguish each module, giving a clear order tothe information and allowing the viewer's eye to take in one message at a time. It's agreat way to create division of content and help readers quickly understand how thecontent is organized.Any email withenough information to requirescrolling likely usessome form of content dividers.Dividers section offcontent within an email, typicallywith a horizontal lineor with white spacethat visually groups and separates content without distraction. Here's an example offull-bleed black and gray dividers typical in emails:

While most email editors allow you to adjust the color, width, and padding around dividers, the look can still get tiresome.In thecase of BarkBox's email, however,an asymmetrical content block in the central module caught our attention:

It's an eye-catching variation compared to standard horizontal divider lines we're used to seeing. The off-beatshapecreates a sense of playfulness that's in sync with the BarkBox brand, and it's a simple tactic you can use whendividing the content blocks in your next email. In today's workshop, we'll show you how.

Today's workshop

Let's create ablue content block like BarkBox's that can be used as a module in any email. Watch our video tutorial and all the steps below.

Getting started

We'll open up the BEE editor to get started—it's free, online, and requires no registration. Try it out or follow along with us in your usual email editor.Starting with a basic one-column email template, we'll set up the overall look and feel of our emailby adjusting the General Optionsin the Body menu on the right. BarkBox's email is 640 pixels wide with a white background. Lucida Sans Unicode is the email-safe font most similar to the branded BarkBox font used in their email.

Setting the HTML background color

The BarkBox email is comprised of all images, which isn't a design best practice (read about the pitfalls of image-only emails here), so instead of uploading images in BEE, we'll use HTML to create the vibrant blue background of this module. We'll simply select the row structure, then adjust the content background in the Structure menu. The row background can remain white.

Our module looks like this so far:

Text formatting

We'll update the text, then format it by center-aligning it, adding line breaks, and making "FREE PREMIUM TOY" phrase bold. Then we'll use the Content Properties menu on the right to make the font color white and increase the line height so there's more breathability between the rows of text.

Our module now looks like this:

Creating the asymmetrical content structure

Now for the fun part. To change the shape of the content block, we'll simple add a triangular image beneath it. We took a screen shot of the shape in BarkBox's email:

Beneath our text block, we'll drag and drop an image placeholder.

Then, we'll pull in our triangle image.

If you ever need to detect theHTML color usedan image, you can use a website like this oneto get the exact code. That's how our triangle image and text block match perfectly.Now, we can adjust the padding to eliminate the white space between these structures and make them appear to be one seamless section of our email. We'll click on the row with our image and navigate to the Padding section of the Structure menu that appears on the right. The default top and bottom padding is 5px. We can simply reduce the top padding to 0...

... and instantly the content blocks come together!

It's that simple!Any shape can be added above or below a content structure to seamlessly adjust the look of its shape, making your module design unique. And since every email designed in BEE is fully responsive, your content dividers will always look great on mobile. Here's ours:

Let us know if you give this a try, and how it turns out!

In this week's Design Inspiration post, wetook a closer look at anemail from Aveda(below). Aveda made some smart choices inthishighly visual, on-brand message,incorporating modern design trends like infographics, natural textures, and a monochromatic color scheme. Butit has a fatal email design flaw: the email is made up entirely of images (i.e., it's an image-only email).Here's the Aveda email.

A quick recap: Avoid designing image-only emails

Image-only emails areproblematic for a number of reasons: some peoplewon't be able to see an image-only email at all (because of their email client settings); image-only emailsend up in spam folders; they aren't mobile-optimized; and they often don't getfully downloaded. Check out our post to get the full scoop and ensure you aren't making the same commonly-made mistakes in your email campaigns: read how to avoid the pitfalls of image only-email.

In today's workshop

After enablingimages in our inbox, one design tactic that we noticed and liked right away in the email is this infographicshowcasing their product:

It's prettyquick and easy to tell what the product is and how to use it, isn't it? That’s because our brains take only 1/4 of a second to process visual cues. With just a quick scan—no need to read much or watch a video or keep scrolling—we understand just what the shampure™ product does. That's what makes an infographic such an incredibly effective tool.In today's workshop, we'll show you how to recreate this infographic, optimizing it for email. Notice the original Aveda's infographic is a single image, meaning all the pitfalls of image-only emails we mentioned above apply here. If images are turned off, we just see empty space in our inbox:

We'llbreak down how we'd recommend recreating Aveda's infographic—into different content blocks—so that it's mobile responsive, renders fully, and looks great across devices and email clients.

Getting started: Let's open the BEE editor

First things first: for this workshop we are going to usetheBEE email editor(it’s free, online, and requires no registration). Give it a try and follow along!

Step #1: Set up a 2-row, 2-column structure

Properly setting up the email's structure is critical here because it will determine how the emailwill rearrange—or be "responsive"—on a smaller screen.Let's take a step back for a moment and think about what responsive design is and how it works. Broadly speaking, responsive email design is a collection of design and coding techniques thatoptimize a viewing experience on different sized devices, particularly on small mobile screens. Responsive designworks by usingCSS media queries (conditional statements) to detect the exact screen size of a device then adjust the email based on the statements in the code.Lucky for us, the BEE editor automatically makes any email wedesign responsiveby applyingsmart CSS media queries, optimizing emails for mobile screens without needing tocode a single line.For ourinfographic to function in aresponsive way, we simplyneed to redesign it to consist offour sectionsarranged on a grid instead of as a single image block. By breaking up the infographic into sections, the BEE editor will be able to rearrange them into a single column for easier viewing on a mobile.So, let'sthink ofthe infographic in quadrants, like this:

To create this grid in the BEE editor, we'll draga couple of two-column rows from the Structure menu into the body of our email...

...so that ouremail design mimics the 4-quadrant infographic structure:

Step #2: Customize your 2-column structure

On the right side, switch menus from Structure to Content so we canpopulate each quadrant with the appropriate content.

The first quadrant needs text and abutton.

The following three quadrants will all have the samelayout of image and text, so we'll drag those content elements in one at a time.

Now our structure is customized with all of the proper content blocks ready to go.

Step #3: Add the content

One by one, we'll go through each quadrant adding Aveda's content. Here aresome design decisions we made:

• We've chosen Georgia as our font as it most closely resembles the Aveda typeface. Because we're using a text block and not embedding an image, the text will always be shown.

• We formatted the "WATCH VIDEO" button to match the color and style of Aveda's. Ours, however, is bulletproof (like all buttons created in BEE) so we don't have to worry about visibility or functionality issues that image-only buttons face. (Here's our how-to post on creating and formatting bulletproof buttons in BEE).

• We left-aligned the "WATCH VIDEO" button and images to match Aveda's layout—an easy adjustment in the Content Properties menu.

Step #4: Preview the mobile version

Before we finish formatting and polishing our infographic, let's double-check thatthetwo-column grid structure we've chosen reformats intoa single-column layout the way we want it toformobile devices. In BEE, we can preview the desktop and mobile versions of our email at any point in the design process. Before we finish our infographic, let's take a peek.We simply navigate to the Actions dropdown in the top left and select Preview.

Then, we select Mobile and scroll through our email.It looks great!

Step #5: Add the finishing touches

Adding background color

In the Body menu, we can change the background color of the entire email all at once.We chose to use a neutral HTML color (gray #d7d9d2), which matches the color of the background image, and we also made sure to update the font colors to mirror Aveda's.

Adding a link to the call-to-action button

Don't forget to make that "WATCH VIDEO" button functional! Selectit, navigate to the menu on the right, and add Aveda's video link to the URL field in the Action section.

Link the images and add ALT text

Let's optimize our images. We'll add links, making surewe're providing readers with more opportunities to click for more info (i.e., to the video of how to apply the product).We'll also add ALT text so any subscribers who aren't viewing images (per their email client settings) know what the images are and can tap to download.

A side note on ALT text

Fortoday's workshop, wedida few quick tests on how ALTtext renders in our inbox, in particular in Gmail in our web browser and on our iPhone. We noticed that inGmail, the ALTtext was not showing at all:

At first we thought it was because the ALTtext that we wrote was too lengthy. Then we thought it was because the image height dimension was not specified to empty (shown as height=""). But inour tests, we learned these weren't the issues.We're currently doing some additional testing and researched ALT text support in email clients. We'll keep you updated! A good resource and recent article that we found is from Litmus (April, 2015):

Source: Litmus: iPhone vs. Android: How to Get Your Email Looking Great on Both Platforms, April 2015

We're finished!

Our final infographic looks awesome on our desktop...

...and on our phone:

Our email design best practices

Aside from aesthetics, let's review why our email-optimized design of the infographic follows email design best practices:

• Subscribers are guaranteed to see all—or at least most—of the email, regardless of their inbox image settings. That's because most of our message is in content blocks outside of our images (in email-safe fonts). With our email preferences set to NOT show images, check out the difference:

Aveda's infographic:

Our infographic:

Our infographic could have been even further optimized if the ALT text was shown. But even without the it, the infographic that we created is already such a big improvement from a blank, empty image! We'll keep you updated on why the ALT text wasn't showing here :)

• It's responsive and mobile-optimized. A single column layout vastly improves viewing on a smaller screen; the images and text are larger and easier to view without sacrificing scale or resolution.
• Content (text) appears no matter what. Not only does this ensure our message actually reaches our readers, but the increase in quality text will keep our email out of spam folders (read why we recommend hitting a 500-word threshold).
• The entire email is likely to be fully downloaded. With smaller images, it's unlikely an email client will reach a maximum email message download size limit and fail to show our pictures.

In the BEE editor, it's super easy to create dynamic, fully-responsiveemails that will reach and resonate with your audience. The possibilities for in-email infographic design are almost limitless. Let us know in the comments if you've given it a try and how it turned out!

Earlier this week, we gotinspired by the email design of a recent webinar invitation email from Skillcrush, a coding academy that focuses on teaching women how to code. Their webinar invitation email had all the relevant information—event time, cost, key details, and a way to register—but they didn't get boxed in by the standard, bland email template we so often see... and that we start to tune out. Instead, they created an engaging, personality-packed webinar invitation email. There's plenty to learn from! Check out our email design tips on How Skillcrush Built a Unique Webinar Invitation Email.In today's workshop, we're going to focus on a key design element of the Skillcrush email: the bulletproof call-to-action (CTA) button. But first, what does bulletproof mean? It's a term used by email professionals for a CTA button, written in HTML, that renders across all inboxes and, because it's HTML code and not an image, the CTA button will always be shown, no matter what.Now that we know what a bulletproof button is, the next step is to figure out: how do we design one? And this is where it can be a little bit tricky for some. You can either turn a standard CTA button bulletproof by adding a few lines of HTML code or check that the email editor that you're using generates bulletproof buttons (and that those buttons are not simply images). We'll look at how to design a bulletproof button with the use of the BEE email editor.

How a bulletproof CTA button should look

Let's start with a look at the bulletproof button from the Skillcrush email. For reference, here's the full email:

And here's a close-up of their unique call-to-action button:

It's a refreshing change of pace fromthe typical "webinar blue" button weoften see, like this one:

Notice how Skillcrush uses smart design tactics for its CTA button, which in turn reflectits modern, feminine, and personable brand:

• The button is on-brand pink with bright white text
• It's the full width of the email and doesn't have a bulky outline (like the black one around the "Register Now" button), evoking a light, modern feel
• "Claim your spot," with the use of a personal pronoun "your," has an approachable, friendly tone while still directing readers to act

But perhapsthe most important design feature ofthe CTA button is that it’sbulletproof, meaningthe button is written in HTML so that it fully renders on all inboxes. We can see how the button is shown even with images turned off on iPhone:

Let's now get much more hands-on and see how to design a bulletproof button ourselves and recreate the Skillcrush CTA button. We'll be using the BEE email editor, which generates bulletproof CTA buttons.

Be sure to follow along and open the BEE email editor in a new browser tab. The BEE email editor is free, online, and requires no registration. So, do give it a try!

Video Overview: How to design a bulletproof CTA button

As a quick overview, here's our video tutorial on how to design the bulletproof CTA button from the Skillcrush email in the BEE email editor:

A step-by-step guide in the BEE editor

Let's walk through how to easily create a stellar CTA button in the BEE editor, where we have full customization of width, border radius, border color, padding, and color and text styling.

To get us started, we took a couple minutes to recreate the top portion of Skillcrush's email,populating abasic one-column templatewith the header image and intro content. (For a step-by-step guide on how to set up a modular single-column email, check out this workshop post).Now, let's create our button!Over in the Structure menu to the right, we'll grab a button content block and simply drag it into the body of our email.

Notice that the default button is blue, rectangular, and centered on the page:

But there's a lot we can do to customize it! To match Skillcrush's button, we'll need to:

• Change the background color
• Update and style the text
• Increase the width and adjust the padding
• Insert a link

In the body of our email, we'll click on the button structure to activate it, then start making our adjustments in the Content menu on the right.

Button color

First, we'll set the button color to pink(#F16059 in hexidecimal format) to match Skillcrush.

Then, we'll update the text. As we type, the button automatically widens to accommodate our content:

We can keep our default font color (white #ffffff), font family (Arial), and font size (16px), but we'll make our messagebold (and be sure to type in all caps).

Full button width

Makingthe button stretch to the full width of the email body is easy. Back in the Content Properties menu, we'll adjustthe width slider to the right, up to 100%. From a design perspective, the full width makes sense: it mirrors the Skillcrush header at the top of the email, providing an aesthetically pleasing balance, and it also givesmobile readersmore space to click.

Finishing touches

Under Content Padding, we'll make sure we have a padding of 5 px top and bottom.Let's also remember to insert a link to the button: in the same Content Properties menu we've been working from, we'll scroll to the Action section and paste in our link.

Now, we have a fully functional bulletproof CTA button, identical to the Skillcrush email! Wasn't that easy?

If you would like to further customize the CTA button, here are a few additional button design settings in the BEE editor:

Border radius

You can adjust the Border Radius to change your button's shape. From a design perspective, rectangular elements generally connote a senseof traditionalism, practicality, and balance, while circular elements can be perceived as softer and calming.

Here's a rounded version of our CTA button after adjusting theradius to25 px:

Button padding

We can also make the button taller (or shorter): make sure the "More options" button is turned on in the Content Padding section, and bump up thetop and bottom padding.

Here's our button with an upper and lower padding of 20 px.

Borders

Another adjustment we can make is the color and width of the button's border, found under Content Properties in the BEE editor. Notice how we have granular control on borders (to learn more watch a quick video tutorial on borders).

The traditional "Register Now" button we looked at earlier had a thin black line around it. In the Border settings in the BEE editor, we can play with different colors and thicknesses.A thin, light border adds a bit of depth:

And slightly thicker, darker border is more prominent but has a similar effect:

Switching to a totally different color generally detracts from the light, modern feel of the button:

But a border can also be useful in maintaininga light, airy, and modern look if weomit a background color, like this:

As you can see, we could spend probably all day customizing a CTA button in the BEE editor!

Our CTA button design takeaways

As you're designing your own emails and customizing your CTA button, hereare the key thingstokeep in mind:

• Buttons should be on-brand, too. Skillcrush does a great job of demonstrating how a well-designed button can go a long way in reflecting your brand so you can connect with your audience. Play with colors and styles to achieve a look that matches both your brand identity and your email's aesthetic. The button should attract attention (it should be obvious that it's a button) but not stick out like a sore thumb.
• Balance the size of your button. Bigger isn't always better. Don't make your readers feel like you're shoving a demand in their faces. Strike a balance by making your button wide if it's not too tall, or by making it a little taller if it's not too wide. Remember, readers on mobile devices or tablets should be able to easily click with a fingertip, so allow ample white space around your button.
• Don't forget content! "Register," "Learn more," "Sign up," and similar CTAs are overused. Think about how you can customize your message in a way that reflects the tone of your brand. Be sure to use a clear, direct action verb—and be concise. Try using personal pronouns like "my" and "your" that make your message friendly and engaging. You could try: "Reserve my spot now" or "Get my free ticket."
• Placement is key. Research has shown that placing a CTA button below the fold actually increases clicks by 304%! Let readers know what they're signing up for first—with great copy and visuals—then invite them to act. Skillcrush does exactly this by placing their CTA button last.
• Be bulletproof. Above all else, it's critical that your button looks great and works as it should, no matter the device or email inbox. Always use HTML instead of an image. We've seen that in the BEE editor, all buttons are bulletproof, so you'll never need to worry about how they'll render!

We have to ask: are your CTA buttons bulletproof? What did you think of our button design tips? Share your ideas and thoughts in the comments below!We'll see you in our next email design workshop, every Friday!

Let's look at how to design a call-to-action (CTA) button in our drag-n-drop BEE email editor. You can try the BEE editor yourself and follow along on http://beefree.io/.Keep in mind that we want to design a CTA button that is written in HTML (and not an image) so that our button is visible and renders across all inboxes. Email marketers typically call this a bulletproof CTA button because it always renders, no matter what!Looking for more details about CTA button design? Check out our recent workshop How to design bulletproof CTA buttons in email.

Modular email design is becoming a very popular trend for email marketers and designs alike. One of the biggest benefits of applying modular design tactics is that you can improve your email production process and speed up the way you build an email, a template, a campaign, and even how you work within your team.A recent product launch email from Litmus caught our eye where we can really see how to structure content (such as images, text, call-to-action buttons) through a modular layout. Let's have some fun and recreate theLitmus email and show you howto implement modular design tacticsto quickly build our email message. Be sure to follow along this workshop by opening the BEE drag-n-drop email editor in a new browser tab.Here's the email from Litmus that we're going to build in the BEE editor:

Getting started

Let's open the BEE editor and pick a basic one-column email templateto match the layout of the Litmus email:

We're going to start off with this basic email template (think of it as our canvas) and customize it quite a bit by dragging and dropping structures and content blocks, including images and text blocks. This is where we can really see the efficient use of modular design in email. Let's go over this in more detail.

Modular email design in action

The Litmus email that we're looking at today is a perfect example of modular design (see also Tip #5: Use a modular, single-column email layout. Works great for mobile!).Notice that the Litmus email has 4 identical modules (i.e. sections) below the blue heading, with each module showing a new Litmus feature (such as "Instant email previews").

This means that we only need to create one module in the BEE editor instead of four, and then clone it a few times. This is a huge improvement in our productivity! Let's see how to do this.We first need to find the specs of the module, which are, in order:

• Heading text: font color #514E4C, size 18px, weight bold, line-height of 24px, padding 20px 0px 10px
• Text: font color #7F8C8D, size 16px, line-height of 24px,
• Image: width 500px
• Background color of module: light grey (#f8f9fc)

Let's drag-n-drop two text blocks and one image block into our module and apply the various specs. This is done under the Content tab on the top-right menu. Here's the finished module:

What is truly exciting is that we can duplicate this module three times by clicking on the square icon (to the right of the trashcan icon). We've just build our 4 sections in record time, thanks to modular design!

Now that we have created these modules, we can insert the text, and upload the images. For example, here's the first completed section:

Editing the remaining modules is just as simple; we've essentially cut our workflow 4-fold! In addition to the modular layout, the Litmus email has two noteworthy design elements:

• A header design using only HTML colors
• A bulletproof call to action button

Let's look at how to design each one in the BEE editor!

How to design your header with an HTML color

Notice that Litmus opted for a simple HTML color as the full-width background for its email header design. Read our Tip #2: Use a vibrant background color. Flat design is in! section.Now let's go over how to build the email header design from the Litmus email, taking advantage of the flexible background color settings in the BEE email editor. Here's our video tutorial:

Before customizing the background color of the header, we first need to add a newmodule to the message. As you can see below, the Litmus email header contains:

• The Litmus logo: 64 x 62px
• Heading text: font size 48px, bold, Arial
• Sub-heading text: font size 20px, and light grey color (#dddddd)
• CTA button: green (#62be7f)
• 100%-width blue background (#363795)

Let's get to work and build this email header design!We need to start with an image (i.e. the Litmus logo) followed by the text, then the CTA button.Using the single-column template we had selected, we'll simply movethe header text structure(click and hold the 4-directional arrow icon on the blue tab to the left) and drag it below the image:

With the beginning of our structure now in place, let's go ahead and dragthe white Litmus logo into the image placeholder (we right-clicked and saved the image straight from their email). You can drag and drop images directly from your desktop into the image block.

We can now focus on the text. As a font, we chose Arial - which matches the Litmus email the closest - so we won't change it. But we willformat the text by:

• Centering it
• Changing the color to white
• Increasing the font size (We chose 36px for the main header and 20px for the sub-header text)

How to design and customize a CTA button

Our header content is nearlyall in place. Lastly, we need to add the email's first call-to-action: the green "Play video" button. Navigating to the Content tab on the right, we'll grab the Button icon and simply drag it in place below our header text.

Let's customize the button to match the design used by Litmus. We'll need to:

• Update the text (adjust the size, color, and style)
• Change the background color
• Change the shape
• Link it

By double clicking on the button, we caneditthe text toread "Play video." We'll increase the font size to 18px and make the typeface bold—we can keep the default Arial font again.Next, using the Content Propertiespanelto the right, let's can change the textcolor to white, then adjust the button's color.

Finally, still in the Content Propertiespanel, let'salterthe shape of the button to match Litmus's by:

1. increasing the border radius (we went up to 30)
2. adjusting the button width (to 35%), which makes the button rounder and a bit longer.

The last step is tomake this button functional! In this case we want it to link to the Litmus video, just as it does in the original email. We'll copy the Litmus link, then navigate to the Action section of the Content Propertiespanel ,and simply paste the link into the link file field. Now our button works!

Workshop Recap

Let's recap what we covered in this workshop:

• We saw how to apply modular design in our email layout and how that speeds up our work
• We used a nice background color for a flat, full-width design for our email header: cool designs don't always require fancy graphics!
• We recreated an engaging call-to-action button by leveraging colors, padding, and rounded corners

All of this was inspired from the clever email design tactics from a product launch email campaign by Litmus.

Design your next modular email design and go Pro!

Design your next modular design-inspired email campaign in our easy-to-use, drag-n-drop BEE editor. No HTML knowledge is required, and your email will be mobile responsive. Sign-up for a BEE Pro free trial!

Watch how to use HTML colors as your background color of your email in the BEE email editor. Try it yourself on: http://beefree.io/Learn more on our workshop: How to apply Modular Design and HTML Colors in Email

Earlier this week, in our second Design Inspiration series blog post, we saw how GOOD magazine uses color, typography, and illustrations in email to create an effective daily newsletter. In today’s email design workshop, we’ll be recreating the GOOD email in the BEE email editor, step by step.Why? Because it contains some cool design ideas - especially in the header section - that we believe you can draw some inspiration from. Follow along and try these email design concepts yourself by using your favorite email editor, or by opening the BEE drag-&-drop email editor in a new browser tab.We've divided thisemail design workshop in three sections. We'll be showing you how to:

• Setup the email layout of the GOOD email
• Step 1: Choose your email template
• Step 2: Configure your email layout
• Step 3: Customize your email message
• Recreate the complex email header design from the GOOD email, using:
• Image editing with Aviary
• Padding settings
• Border settings
• Background color settings
• Visually separate sponsored content and ads in email
• With the use of background colors

To start off, here's the email from GOOD magazine that we're going to focus on. You can find the original email here.

Getting started with an email layout

As we mentioned, we’ll be using the BEE email builderto recreate the GOOD email in this workshop. It's free, online, and requires no registration, so it's an easy option if you want to follow along!

Step #1: Choose your email template

The first step here is to match the general layout and template structure of the GOOD email. We can see that the GOOD email uses a single-column layout for the majority of the top portion of the email. So let'sstart out bychoosing the basic One column template in the BEE editor, and then drag-n-drop the remaining structures and content blocks.

Step #2: Configure your email layout

It's important to dedicate the right amount of time in the initial layout. Think of the email layout as your canvas. Being organized and diligent in this step will help us speed through the next steps to come.Let's take our one-column basic template. We're going to:

1. Set some general settings
2. Add the structural elements we need

Set your general settings

The GOOD email is 675 px wide with a grey background color #f0f2f2 and a white content area background color. To clarify, since the GOOD email is responsive,the 675 px width is a max width setting used on larger screens, but the message needs toignore it on mobile devices that have smaller screens. The nice thing about the BEE editor is that you don't have to worry about mobile rendering issues: all emails created in the BEE editor are responsive and optimized for mobile. For us, this means that we can simply add the desired max width - which is 675 px in this case - and know that it will be properly adjusted on a mobile device.In the BEE editor, we can input these values in the right hand menu under Body > General Options:

Add the remaining structures

To complete the email layout we'll need to add the following structures in order:

• A two-column structure for the heading (as we see below)
• A one-column image structure for the illustration
• A two-column structure for the title (on the left) with social icons (on the right)
• A text structure for the subtitle and text
• Another one-column image structure for the advertisement
• Followed by three two-column structures for the sponsored content, the content below that, and for the social footer

The nice thing about the BEE editor is that you can simply drag-n-drop structures in place, from the Structure tab in the right-hand side menu:

The finished email layout should look something like this (below). Note that in this screenshot we've already added content blocks (e.g. image, text, and social blocks) in our structures, which is discussed next.

Step #3: Customize your email message: add images, edit text, set padding, and more!

Now that we have our email layout in place, we can add content to it by dragging and droppingimages, text, and other content blocks from the Content tab, and bypersonalizingeach of them to meet our needs.Let's focus on a couple of the most important content elements in this email, and look at:

• How to recreate the complex heading of the GOOD email with the use of granular padding and border settings
• How to visually separate content blocks with the use of background color settings

Building a complex email header design

Recreating the email header design from the GOOD email is not a trivial task. It uses some cool design tricks that can appear hard to implement at first. It's challenging, but definitely doable!It took us about 10 minutes to rebuild in the BEE email editor, and allowed us to further appreciate the flexibility and granular customization the BEE editor provides (so a big "thank you" goes to our development team!). Let's see how we did it: maybe you can use some of these tricks in your next newsletter!

Here's a challenge: Try recreating this same email header design in the email editor that you're currently using. Can you do it? Let's compare!

Before we start, notice that the email header is made up of 4 images:

• "THE TUESDAY" is actually a resized image (77 x 14 px)
• The GOOD logo (resized: 180 x 110 px)
• The pink earmark (resized: 60 x 60 px)
• The illustration below the black divider (675 x 404 px)

The only text is the date: Sep 15, 2015.In the BEE editor, the structure of the email header design translates to something like this:

Let's upload the images. In this case, we'll upload the three images (logo, earmark, illustration) and have "THE TUESDAY" image as text.

It's clear that we need to resize the images from the specs above. This is actually super easy to do in the BEE editor with the built-in Aviary image editing tool! Check out this quick video tutorial (2:42) on how to resize images for email with Aviary (with the crop tool).Let's use the Resize tool from Aviary under Edit image:

...and this is how our images now look, correctly resized:

The challenge here is getting the pink earmark correctly positioned on the top-right hand side of the email header. Let's see how to do this!Click on the pink earmark image. Under Content properties choose the right align option:

We can see that the position of the earmark is where we want it: on the top, right corner of the email header!

Similarly, we're going to left-align the GOOD logo, write the text above it, and add a bit of padding.

Notice that the padding settings in the BEE editor allow you customize all four sides individually (or all equally). For the GOOD logo we've decided for a padding of 0px (top) 0px (right) 10 px (bottom) 10 px (left). Having granular control on padding is really handy.

And, for completeness, the padding for the heading text is 5px top and bottom and 10px left. Our heading is looking good! Two more steps to go!

The next design element we're going to focus on is the black divider between the heading and the illustration. The original GOOD email has the following border properties: 14px, solid, and black #070c0d. To accomplish this, we are going to editthe top border of the illustration image. Here too, luckily, we can count on granular border control provided by the BEE editor, which allows us to individuallytargetthe top border of the image. How cool is this? :)

The last part of the email header design that we need to work on is the background color: we need to change it from transparent to white. To do so, we need to work with column settings. To access column settings, click to the right of the content area (i.e. where there are no content elements). Notice that the Row properties show up on the right hand-side menu. And, notice the column properties for both columns. The correct setting that we want is:

• Column 1 (i.e. the column where the GOOD logo is): a white column background
• Column 2 (i.e. the column where the pink earmark is): same thing, as shown here:

And we're done! We've built a perfect replica of the email header design of the GOOD email.

Where you able to replicate it in the BEE editor or in your email editor? Let us know in the comments below if you had any trouble.

Here's a preview of how the re-created GOOD email looks on a desktop email client:

Bonus tip: Visually separate sponsored content and ads in your emails

Additionalemail design inspiration from the GOOD email comes by paying attention tohow ads are handled: they are elegantly separated from the rest of the content.The key is to always be transparent with sponsored content and ads in your email campaigns. Don't let your subscribers second-guess what is sponsored content and ads versus your own, original content. Luckily, design-wise, it's rathersimple to visually separate sponsored content and ads in email. Let's take the GOOD email. They do two things right:

1. Lead with their own content, followed by an ad (the ad doesn’t steal the show, but it’s still placed prominently in the email to ensure a good ROI for the advertiser) and...
2. Maintain transparency by changing the background color of the ad to distinguish it from the rest of the email content.

The main design tactic here is to change the background color. This simple design tactic along with the text "Presented by..." reinforces the fact that it's sponsored content or an ad. Notice that the GOOD email is currently using more than one shade of grey to highlight its content. In detail, the greys in hexadecimal format are #f0f2f2 for the main background color and a lighter grey #f7f8f8 for the sponsored content block.

In case you are wondering, this is very easy to do in the BEE email editor as we saw when building the GOOD heading from above:

• Load the row properties for the row that contains that content
• Change the background color of the content block from white to a light grey #f7f8f8, as shown below

There you have it!In this workshop, we've really seen the power of the BEE email editor: from background color settings at multiple levels (think: structure vs. content block vs. row vs. column) to complete control over padding and borders, and image editing.We hope you enjoyed this article: it's part of our email workshops series. Let us know what you think in the comments below, and see you next week for a new workshop!

Let's take a quick look at how to customize content padding in the BEE email editor. As a designer, you have granular control on padding settings for all four padding values (top, right, bottom, left). You can choose to set them individually or all equally. Check it out!

Welcome to our first workshop! We'll be looking at how to build better emails and apply our email design tips from our weekly Design Inspiration series with a new workshop every Friday. Let's get started!

In our first Design Inspiration blog post, we saw how General Assembly (GA) uses design simplicity in their emails to showcase their online courses. Here's what GA said:

@massiarri @beefreeio Super flattering and cool analysis, thanks!

— General Assembly (@GA) September 28, 2015

In today's workshop we'll be building the GA email in the BEE editor and showing you how to use the BEE editor and its many features, step by step. Once we've built the GA email, we'll be covering in much more detail a few email design tips and tactics from the GA email and see how to apply them, hands-on. Be sure to try these email design tips in your own email campaigns and see if they work! You can also quickly see how to apply them in our BEE editor (it's free, online, and requires no registration).Feel free to browse through the two sections of our workshop:

• View how to build the GA email in the BEE editor, step by step
• View our email design tips and tactics, applied in more detail

One of themost visually noticeable design tactics used in the General Assembly email is the equal-width, 2-column layout of the message, showcasing each online course in its own squared section. There are many other less noticeable, but nevertheless clever design tactics, including the use of different font styles for separate sections of the message (main title vs. paragraphs), and having heading text that's four times bigger than the paragraph font, for creating emphasis and contrast.

Let's get to work!

Getting started

We'll use the BEE email editor to recreate the GA email in this workshop. Use your favorite email editor, oropen BEE athttps://beefree.io/ and follow along!

Step #1: Choose your template

The closest template resembling the GA email layout of a two-column layout is a basic E-commerce template. Let's select this one and launchthe BEE editor.

Entering the BEE editor, we can see that the template we picked has a good layout for what we want to accomplish: a header, a few image placeholders, and the 2 column layout.

If you start with another template or from a blank message, simply use the structure panel to drag and dropa one-column row for the header, a couple of two-column rows for the main content section, and another one-column row for the footer.

Step #2: Customize or add your 2-column structure

You'll find a number of useful content blocks and structural elements on the right-hand side of theBEE editor. For example, to build a 2-column structure, you have a choice of predefined structural elements that organize content in two columns.

Step #3: Start adding content!

Now that we have a basic layout in place, we can start adding content blocks, and recreating the General Assembly email.For the header, we need to drag from the Content panel into our top, one-column row a text block and two content dividers.For the title, we'll use another text block, and edit the font to set the type to Georgia and the size to a large value (here we picked 48px). We will also set the color to black.

For the images, we can use the same images saved from the GA message we received (just for the purpose of this workshop: the images are theirs!), dragging and dropping them into the image blocks we positioned in the message.

For the text blocks, we need to take a few steps to achieve the clever look & feel used by General Assembly:

1. Type in the text
2. Using the text editing toolbar, highlight the section title and set font type to Arial and weight to Bold. Font size remains set to the default value (14px).
3. Now highlight the rest of the paragraph and set the font type to Georgia and the font size to 16.
4. Finally, increase the line height as shown in the screenshot below, using the corresponding setting in the Content Properties panel.

Things are looking good! Continue as above to add more rows to the message.

3 Design simplicity tips for email to try out

Now that we have covered how to get started, let's focus on how to apply some usefuldesign simplicity tips and tactics in more detail.

Tip #1: Use a 2-column layout, but make sure it's responsive!

A recent email design trend from a few years is modular design, which favors a simple, 1-column, 100%-width layout. Having said that, using multi-column email layouts can still be effective, such as in this GA email. As we'll see, however, a 2-column layout provides a few rendering challenges in mobile inboxes.The GA email works well in desktop and tablet view, as we can see from the preview section of the BEE editor:

But for mobile, it's a whole other story. The original GA email has a noticeable flaw (and the only critique we have): the content blocks of the two columns are a bit too small too view. The GA email is somewhat mobile-optimized at best but definitely not responsive, which is a shame. This small example is an industry-wide phenomenon in which companies are still struggling with adopting email for mobile devices.

The good news is that many email editors today allow you to build a fully responsive mobile email, including the BEE editor. For you HTML/CSS geeks, these editorsautomatically add CSS media queries and other code to make the email responsive across the most popular email clients.This is how the GA email would look like if it were responsive. As you can see,ourreplica of the message switches automatically to a one-column layout and looks much better on mobile:

Reminder: Use an equal-width, 2-column email layout, but be sure to see how it looks on mobile. If it's responsive, the better!  Try it out and build it in our BEE editor.

Tip #2: Use different fonts to create emphasis, contrast, and spacing in your text

Notice the interplay between the two different fonts - Arial and Georgia - in the GA email.This is a simple, yet effective, typography tactic that creates contrast and spacing between the various text elements. This is achieved without more complex design tactics that may require additionalwork. If you decide to use the samefont size of 16px for all text, including the heading, body text, and linked text, the Arial font style shows as slightly bigger to the eye compared to the Georgia font style, hence creating that contrast and popping out! This may be the reason why the Arial font style is used in headings (and is in bold) throughout the GA email. Here's how you can recreate this typography tactic in the BEE editor:

The BEE editor has 9 standard style fonts that correctly render in all inboxes. Unlike with web design (which has a wide number of web-standard fonts for the most popular web browsers), with email design we're limited to fewer "email-safe" fonts. Some font styles just don't render in some email clients (e.g.Outlook). So, don't over do it, and choose an "email safe" font!

Reminder: Test different fonts in your emails. Be sure to customize the line height and padding as well.

You can also perfectly recreate the GA line height and padding settings in the BEE editor with a setting 2 for the line height and the flexibility to customize the top padding to 15 px, left and right to 10px, and a 20 px bottom padding.

Tip #3: Use a 3x to 5x bigger font size for your heading text

We all know the importance of font size in PowerPoint presentations (if the text is too small, no one in the audience will be able to read your slides), in print ads, and in web design. All of this applies to email design as well. If your text in an email is too small (or too small in a smartphone), then we have a problem.A 16px font size is a good reference point for your body text, as the GA email has. What does stand out is the 62px font size of the heading text "Build Your Skills", which is almost 4 times bigger than the body text font size.

Reminder: Test a heading font size 3x to 5x bigger than your body text in your emails. Try it out!

Adding a heading text should be pretty easy for you. Simply drag and drop a text structure to your email body in the BEE editor:

In the BEE editor we see that a 48px does the job.

What we like about this heading is that:

• It stands out... maybe too much, but for a good reason: it's the substance of what the email is about: think of it as your value proposition in one sentence, or better yet in only 3 words: you know the GA email is about how to "build your skills" with GA's online courses.
• The heading is very concise: only 3 words. Because it's so concise, you know (or should test!) that the heading will be visible and optimized in mobile inboxes, shown in the same row.

Reminder: Shorten your headings (and subject lines) for mobile. You'll see an improvement in your email metrics. Try it out!

Bonus Tip #4: Test your call-to-action (CTA) position

As email optimization experts know well, the position of your CTA button in your email matters.Put the CTA too early, then none of your subscribers will click (because the email and CTA position doesn't follow a logical thought process that your subscribers follow). Drop the CTA at the bottom and your subscribers wont even see it.Notice that the GA email has its main CTA at the very end... maybe too far at the end.

So, what's the best advice? The only reliable answer is through testing! As an optimization tip, I would test the "Get Started" CTA and integrate it at the beginning of the email (and perhaps eliminate a few secondary CTAs or additional links to click on).To keep things simple, I would actually test a CTA in the form of just simple text "Get started >" after the heading text. Something really easy to do and test. Who knows, this simple change could increase my click-through rates (or could also have a negative impact). The key is to test your hypothesis out! Here's where the CTA could be positioned:

As you can see, with an editor likeBEE, it's very easy to quickly create multiple versions of the same email and use them in your tests.

Did you find these email design tips useful? Let us know in the comments below! And stay tuned for a new workshop every Friday!