Design

As we roll into December, inboxes are beginning tofillup ascompanies and organizations plead for readers to take action: get the coupon, buy now, tell a friend, register for the event, learn more, shop the sale. In fact, studiesshow that merchants significantly increase the volume of messages they send during the holiday season.

Whilethe end of the yearcertainly stirs up afrenzy of consumer activity, fundraisingand donation-driving are also an enormous partof this season of giving.Nonprofit organizations and charities will launch end-of-year donationcampaigns, hoping to bring incash for the new year (and help their donors maximize their 2015 tax deductions), while for-profit companies run their own do-gooder campaigns alongside them.As an email marketer, you're likely under pressure to make a splash with special holiday giving campaigns that appeal to readers and help increase donations through email, all amidst the busiest, most crowded marketplace of the year. Phew! We know it's hard to stand out in the crowd, so we've preparedour top design tips for great fundraising emails that will stand out this December.

Tell a story

Humans are prone to procrastination, so to increase donations through email, your email needs to give readers a clear, compelling reason to give now. Keep yourstory short, clear, and focused, quickly building to your call-to-action. Along the way, make a statement about why now is the time: the reason could be a specific event, a tax break, or a donation matching period with an approaching deadline. People want to do good, but they generally need the persuasion of a specific reason for doing it right now.Here's an email from the Brooklyn Public Library that checks these story guidelinesoff the list:

There's a sense of urgency. The header prominentlyreads "Last Chance," followed by a sub-headermentioning these are the final hours.BPL tells a story in just 5 sentences. The body copyis to-the-point and clear while also setting a grateful, approachable tone that's easy to understand and appealing.There's a clear reason given to donate now. It's readers' last chance to give before the tax deadline.The call-to-action is obvious. The CTA button is a strong contrasting color; the type is large and the message is succinct.

Make your first headline count

It might be all subscribers read.This is your opening statement, your introduction, and your chance to get readers’ attention. Don’t plop in stock photography or make a poor headline choice: brainstorm in advance and plan to make a bold statement. Sometimes just a few words are all you need tomotivate and inspire.Look how much Everlane, the clothing company, accomplishes in just a few lines of headline text:

By using a simple black background, huge text, and a direct message, readers can get the idea almost instantly. And, if they like what they've read, they can continue readingby clicking the "Learn more" call-to-action button.Thrive Market takes a similar approach, also using two super-short, punchy statements as a headline: "LIVE WELL. DO GOOD."

Like Everlane, Thivechooses a large font size—about twice the size of the body copy—to make a bold statement. Thrive also follows the header image best practice of customizing the photo to reflect their brandwith a cute graphic and text overlay. Even if subscribers don't get through the fine print, it's clear right away that this is a message about giving and doing good.What each of these brands also does is writein a tone that's personal, approachable, and on-brand. There's no generic messaging—like "Give to our campaign today and make a difference"—instead, each brand establishes an inspiring sense of excitement in just a few lines.

Create structure with a modular layout

Using amodular layout—one that divides your message into modules or content blocks— is an effective strategy for creating structure and improving readability in email. Withfundraising, modules can introduce hierarchy in your message, reaching readers at varying levels of interest and reinforcingyour goal in multiple ways. Let's lookagain at Everlane's email, this timein full:

Each module serves a purpose: Module 1 is a short, simple, clear header that tells the story in just a few words. Module 2 adds a second degree of context, both visually (with the photograph) and with a single sentence of text that succinctly describes the exact goal and target amount to raise, followed by another CTA button. Module 3 adds a further degree of granularity with a personal letter from the CEO, clearly describing the full project in detail, followed by a final CTA. The structure allows Everlane to capture readers withthree different approaches and three levels of granularity, all in one message.

Use typography (and good design) to make a statement

Photography and illustration are powerful tools in good visual storytelling. But look how effective beautiful typography and a bold colorare in this fundraising email from Housing Works:

Not your average donation-driving email, is it? Housing Works follows the great storytelling tips we've covered—bold headline, concise and focused messaging, and a sense of urgency—and then makes their message sing with great type and great color. By using pink elements (header, headline, CTA, footer) betweenblocks of black-on-white text, the color also creates structure in the email. And, as a bonus, the email header is also an animated GIF:

Strategically place CTAs

An effective donationemail is a focused one: it shouldcommunicate a clear, single message that leads to a clear, single call-to-action.Research has shown that placing a CTA button below the fold canincrease clicks by 304%.The important thing is to let readers know what they’re signing up for first—with great copy and visuals—then invite them to act.However, organizations are under pressure to communicate quickly and clearly at the top of their email, so even with a cursory glance, readers can get the gist.In this email from Memorial Sloan Kettering Cancer Center, they've accomplished both:

With this cleverlayout design, MSK simultaneously keeps its main message above the fold with its own CTA button, whilea second CTA closes the message for those with the time and interest to read the full email. It's a great tactic for reaching as many readers as possible.

Get personal

A common and effective way to increase donations through emailismaking the message personal. We've seen that in a few examples above, with heartfelt messages from organization leaders of Everlane and Memorial Sloan Kettering that are signed with an actual signature—a nice touch in creating a sense of connection to an organization.But getting personal can also mean telling a story that demonstrates why your organization is worth funding: because it's making a difference in real people's lives. Take this example from StoryCorps, the oral history project:

By featuring a real person's story—in just a few sentences, and with beautiful photography—StoryCorps hopes to demonstrate their value and compelreaders to act. And like Housing Works, color creates structure and calls attention to what's important:the call-to-action and the deadline, bringing a sense of urgency that stands out against the black-and-white message (plus, there's the added urgency of the limited-time donation matching period).

How good design can increase donations through email

If we had to summarize our thoughts on email design for end-of-year fundraising, we'd probably tell you this: use all the principles of good email design!Consider everything you normally would: the clarity of the message, the placement of CTA buttons, the structure and hierarchy, the use of color, the infusion of great visual elements, and, importantly, how the email will look on mobile. Don't let the end-of-year pressure intimidate you. Do what you do best and build a well-designedemail that your readers will notice. Try the BEE editor—it's free, online, and requires no registration—to build an email that stands out from the rest.

Thanksgiving is right around the corner. If Halloween didn't already mark the start of the busiest shopping season of the year, then Thanksgiving certainly will. During last year's holiday season, retailers reported 50% more traffic coming from mobile.And a large driver of that traffic isemail, which we increasingly check on our phones.So it's a total no-brainer thatcrafting emails with care is critical for brands who want to stand out from the crowd this holiday season. What better place to start than with Thanksgiving? Here are 7tips for a fantastic Thanksgiving email.

1. Start with the subject line

Inboxes will be overloadedwith emails in the coming weeks, and you can expect a huge chunk ofsubscribers—about 35%—todecide whether or not to open your email based on thesubject line alone.Stand out by putting some thought into your subject line. Try gettingreaders curious about your email with a line that asks a question, promises a deal or coupon, has a "how to," or includes a number.Looking for email subject line tips? Check out our 7 Tested Rules for Email Subject Lines – And When To Break Them.Here's an interesting take from PureWow, a women's lifestyle site, that caught our eye:

Not only is the subject line quirky, funny, short, and unique, butPureWow also capitalizes on a great second subject line by telling readers exactly what they'll find in the email: 4 easy tricks that will save Thanksgiving. Open the email, and we're greeted with exactly what they promised:

2. Plan a special delivery

Match subscribers' holiday spirit with an email that's festive, taking the opportunity to level-up your usual design style. TasteBook, a website for cooking enthusiasts, has a bright, photo-centric visual identity.Here's a snapshot of recent posts on their blog:

But look at how they mix up their usualphoto-forward approach withthis gorgeous illustrated Thanksgiving email:

For subscribers who are used to seeing photos from TasteBook, this email immediately stands out as different and special. Click through, and you'll see a full illustrated guide for "Your Ultimate Thanksgiving Dinner." Clearly, TasteBook planned ahead to deliver creative, high-value contentthis Thanksgiving, and it shows.

3. Have a single focus

Can you count how many times Amtrak says "book early" in this email? It's a lot, but that's okay. Having asimple, clear, focused message is agood strategy, and it doesn't mean you have to drop the holiday spirit. This email from Amtrak is to-the-point, but still Thanksgiving-themed and valuable to readers.Remember: attention spans are short, and you can expect readers tobe inundated with more emails than usual from now through the end of the year. The high qualityphoto with text overlay, simplemessage (4 sentences!), and single call-to-action buttoncome together in a short-and-sweet email that works.

4. Say "thanks"

Thanksgiving is about being thankful, after all, and what better way to show thanks than to give something back to your loyal readers? In a recent email to subscribers, Evite, a digital invitation and event planning service, offers 15 free digital "Thank you" card sends. The cool thing about this offer is that it encourages readers to get in the Thanksgiving spirit and say "thank you" to friends or loved ones (vs. using a coupon solely for personal use).

The offer is listed at the top of their email, right away, so viewers are sure not to miss it. The entire email itself is fall-themed, and Evite also has a lot of fun customizing their call-to-action buttons so they're on-brand and unique. I'd rather click on "Pass the Gravy" than on a button that says "Learn more," wouldn't you?

5. Design for mobile

It's a hectic time of year, and everyone—including your readers—will be running errands, shopping, traveling, and moving about. Mobile opens now account for up to 70% of all email opens, and especially during the upcoming holiday season, you can count ona high likelihood of your email being read ona phone or mobile device first. That's why it's critical to optimize your email for mobile-viewing with responsive design. Aresponsive email willtotally adapt to the screen size of a tablet or smartphone—layout, font size, images, and padding can all change—so that the message is easy to read and looks great.Here's a good example from Real Simple, a magazine about simplifying your life. This is the beginning of their Thanksgiving email viewed on desktop:

And here it is on mobile:

To optimize mobile reading, the email's multiple columns collapse to one, and font sizes increase, making it easier to read and click. Follow Real Simple's lead and make sure your Thanksgiving email looks good and is easy to readon all devices.

6. Delight and entertain

Withso much competing for their attention, it's not always enough to simply email readersa coupon code or deal. Savvy subscribers expect to be impressed and entertained by good design, too. Consider simple, elegant ways in which you can level up your visual style. Take this email from Rent the Runway, an online service that provides designer dress and accessory rentals, for example.

The key visual in the center of the email is a GIF showing suggested outfits and accessories for Thanksgiving and possible Thanksgiving weekend events, like a high school reunion or spiked cider with friends.

It'sclever, cute, and creative. And the GIF is an effective way to show multiple productswithout taking up too much real estate in the email itself.

7. Maintain your brand voice

There's a lot of pressure for brands to participate in the holiday hoopla,making sure to check off Thanksgiving froma long list of editorial opportunities. It can be overwhelming to brainstorm how to stand out.The answer is to stick to your brand! Be yourself. Think of your core values,mission, and audience, and create content that's in sync with your totally awesome, already established brand identity.Here's a peek at Thanksgiving content brands are emailing that offer something uniquewhileremaining true to their brand identity:UrbanDaddy, a lifestyle media company with an edge,has fun with an unconventional recipe:

Buzzfeed does its usual round-up thing, this time with recipes for those too cool for pie:

Etsy points readers in the direction of printable gifts and crafts to say thanks:

Pet Plan, insurance for your furry friends, helps keep readers' pets safe with these holiday tips:

Tasting Table,a website and newsletter for culinary enthusiasts, got our attention with their uniquelygoofy copywriting:

Let's recap:

1. Spend time brainstorming a killer subject line.
2. Plan ahead to deliver high-quality content that's festive and special.
3. Keep your message short and focused with a single call-to-action.
4. Thank subscribers with a giveaway, coupon, or special deal (even better if it's "thank you" themed).
5. Mobile-optimize your message with responsive design.
6. Think outside the box to incorporate simple, clever design elements that delight readers (try a GIF).
7. Be yourself. Keep your content on-brand. And have fun!

Create your very own Thanksgiving email in the BEE editor -- it's free, online, requires no registration, and all emails you create are always 100% responsive.

As an email designer or email marketer always on the lookout for the biggest win for your email campaigns, you might often wonder: What's the most important thing to do? In a world where mobile opens now account for up to 70% of all email opens, the answer to that question is easy.Making sure your emails are readable on a mobile device is THE most important thing you can do to make your email campaigns as effective as possible.Knowing that mobile optimization is essential is the easy part. But actually implementing mobile emails can be more challenging, especially if you don't know the basics of mobile email design.Though responsive design was technically invented in 2010, and mobile-optimization techniques were in use long before that, we know there are many designers who still struggle with exactly what it means, and which type of optimization to choose. If you're in that boat, read on.We'lltake a look at different approaches to mobile email design and dig deeper into responsive design, probably the most well-known (if not most-used) mobile design systems. What exactly is responsive design, and why is this the preferred mobile design method for so many email designers? Let’s demystify exactly what responsive design is and also clarify what some of the mobilebuzzwords that you hear so often really mean.Here’s what you need to know about responsive email design.

Responsive email design is a set of design and coding techniques that are used to optimize viewing experience on different sized devices.

In other words, a responsive email is one that totally adapts to the screen size of a tablet or smartphone—layout, font size, images, and padding can all change—so that the message is easy to read and looks great.Litmus does a nicejob of showing all the ways in which a responsive email can change between screens in this graphic:

The position and size of everything from navigation to images to fonts can change from device to device when an email is created with responsive design.Here’s a real-life example of a responsive email from Refinery29, viewed on desktop...

...and on mobile:

As you can see, in the mobile version, the email changes significantly:

• The layout goes from two columns to one
• The header design is simplified: the navigation menu is hidden
• The images are sized differently: the Maybelline ad, for instance, is compressed vertically so it takes up less space in mobile
• Some content is hidden: The intro text under “The Worst Skin Mistakes You’re Making” header is gone, as is the green “Skin Sins” tag on the header image, as well as the social sharing buttons

Most of these changes serve to simplify the design so it renders elegantly and cleanly on a smaller screen. Without these responsive changes, the aboveemail—and countless others like it—would be unreadable, or extremely difficult to read. The body text would be too small, multiple columns would look squeezed together, and the complex layout would not render properly.These are just some of the pain points email designers have when designing for mobile screens that responsive design aims to resolve. The top challenges for emails rendering properly on mobile devices include:-Images: Text-based images or images with text overlays on top of backgrounds can be impossible to read on mobile devices if they're not resized properly through responsive design.-Typography: Some fonts won't work on mobile—they can be too hard to read on a small device, or the device won't recognize them ordisplay them properly. That's why the BEE editor uses only email-friendly fonts that we know will render well on both desktop and mobile.-Columns: Many traditional emails are multiple-columns (usually two, but sometimes three). Without responsive design, a two-column email won't work on mobile: the content in each individual column will be shrunken and impossible to read.Do you struggle with any of these when designing emails for mobile? Read on to find outhow responsive design can help.

How responsive email design works

Responsive design is coded using CSS3 (or cascading style sheets). In the CSS for a responsive email or website, there are conditional statements known as media queries that detect the exact screen size of a device. The CSS calls for adjustments to the email design based on the results of those queries. So, the media query could detect if the screen size is only 400px, for example, and then activate the CSS that determines the style of the email design for that size screen (increase font sizes to 20px, add 10px of padding, hide content, etc.).In short, with responsive email design, CSS media queries can totally alter the design of the email for easy viewing on mobile devices. Your readers will have the optimal user experience on all devices, no matter where they are reading your email. And you'll get the benefit of them being able to interact with your email properly, and transact as you want them to.Of course, responsive design isn't perfect. Unless you use an email editor that automatically converts your email to responsive, responsive design means extra time and a learning curve for whoever codes your email templates. Additionally, not every email client can handle media queries, but most,including iPhones and most Androids, do. Campaign Monitor has a useful list of compatibility across clients.The pros of responsive email design definitely outweigh these cons, but we know that designing a responsive email isn't easy, and you may not have access to developers who can walk you through the nitty gritty of CSS. That’s why we made sure all emails designed in our free BEE editor are 100% responsive (you don’t need to worry about a single line of code).

Responsive email design is different from other mobile design approaches.

Responsive design gets talked about a lot because it’s the most robust approach to mobile-optimizing an email. However, depending on factors like audience and resources, other design tactics might be used. Before you make a decision about whether to go responsive, it's important to understand the other mobile design approaches, what they offer as compared to responsive, and the pros and cons of each approach.

Skinny design

Emails with a “skinny” design are built for the narrower width of mobile devices (typically around 500px). So even if viewed on a wide window of a desktop, the width of the email will remain skinny.What happens on mobile: It looks the same as the desktop version. The desktop version looks skinnier than typical desktop emails.The main benefit of skinny design is it's easy, and you only need to design for one single device/look. However, there are some drawbacks to skinny design. There's noguarantee it will look good on allscreen sizes, there are limited design options, little text fluidity, and you can't make table or image width adjustments.Buzzfeed uses skinny design for their array of email products. Take a look at this example from Buzzfeed Parents. This screenshot was taken on a desktop view, but you can see that the width of the email is the same as it would be on a mobile device.

Scalable design

Scalable emails—sometimes called “mobile friendly” emails—have been designed specifically with mobile in mind. Large fonts and images that are easily viewed on small devices are used so the email looks okay on both desktop and mobile devices.What happens on mobile: An email scales down (from, say, 600px for desktop to 400px for mobile) but is otherwise the same.The benefits of scalable design are that you can create a simple, single design, and your emails are easy to code. However, like skinny design, emails are not guaranteed to look good on various screen sizes.Scalability not supported by some Android email apps, and there are limited design options.

Fluid design

Fluid emails are similar to scalable ones, but tables and images within the email resize based on percentage-based sizing.What happens on mobile: All text reflows to always take up 100% width of the window, and table and image widths shrink to fit the width of the window. The general layout, hierarchy, and design elements remain the same.Fluid design is a simple design approach that does requiresome basic coding (not as complex as responsive). However with fluid design, you have limited design options since it's a less versatile approach, and you might be able to buildas creative or flexible emails as you'd like to.Mailchimp offers a nice look at how a sample email resizes with fluid design here.

Adaptive design

Adaptive design is similar to responsive design, but instead of the email design changing based on the exact pixel width of the screen, the code includes breakpoints that determine which static layout is viewed. So, you might design three versions of your email: one to be viewed at 500px for a mobile device, one at 800px for a tablet, and one for 960px for a desktop browser.What happens on mobile: The width of the screen determines which version of the email appears; in theory, readers see an email that’s well-designed to fit the screen.Adaptive is a similarly robust option to responsive design, and requires some one who knows how to code it. As with responsive design, not all email clients can handle media queries, but most can.

How about “mobile-optimized” emails?

Mobile-optimized emails are emails that are designed specifically to look great on mobile through various techniques; there is no standard set of specifications. Design elements of a mobile-optimized email can include a combination of approaches, many of which are best practices for your mobile email design:- Single column layout- Concise, large-sized, easy-to-read content- Minimalistic design (no complex headers, no clutter)- Tap-friendly navigation and bulletproof buttons (with appropriate padding)- Smaller image file sizes (allowing for quicker load times)- High-contrast design for mobile screens set to low brightness- Not solely comprised of images (and all images used have great ALT text)- No need to typeWhen deciding your approach, make sure you know your audience and test how your email looks across devices and email clients.Responsive email design is a powerful technique, which is exactly why we made sure all emails created in BEE are responsive, optimizing how your message looks for your subscribers. Give BEE a try today and let us know what you think!

Originally published on November 13, 2015. Last updated August 27, 2021.Brands tend to sit at two ends of the email design spectrum, sending either image-heavy or text-heavy messages. Which design style gets greater results? It’s helpful for email marketers to take a closer look at these preferences and trends for their subscribers.When it comes to email formatting trends, a healthy content-to-image ratio is a recommended email design best practice. With that being said, text-heavy email is appealing because it keeps the email simple and straight-forward. Many brands take the text-heavy approach including this BuzzFeed News example:

Instead of asking readers to click to read like an image-heavy email, content is placed directly in the email itself. BuzzFeed, Vice, The Skimm, Mic, and others are doing this. This method curates and distills stories, leaving no onus on the reader to choose what to click from a collection of headlines. It’s a hassle-free email filled with solid information.

Email formatting: Should I go text-heavy or image-heavy? 

Like anything else, there are pros and cons to both image-heavy and text-heavy email formatting approaches. Consider how your subscribers prefer to be communicated with and what email formatting aligns best with your brand identity.When taking a closer look at text-heavy email formatting, some pros include:

• Increased deliverability. Using minimal images helps emails avoid getting flagged by spam filters.  
• Feels more genuine. Text-heavy emails include more personalized copy to create a more authentic connection with subscribers. 
• Passes accessibility standards. Screen readers won’t have an issue with more live text, and messages will easily translate to whatever language is needed. 
• Easy to create. You don’t need extensive graphic design skills to create a text-heavy email. Smaller marketing teams and freelancers drive successful marketing campaigns by crafting more meaningful content. 

Also, keep an eye on your email message size. Note that if the size exceeds a certain limit – regardless if it’s text-heavy or image-heavy – it’s possible that your email message clips for some subscribers.

For example, Gmail clipping occurs when your email message is too large, and this becomes a problem if a majority of your mailing list subscribers are on Gmail. When using any email service provider, your best solution to avoid clipping is to reduce the total amount of content in your emails and optimize for mobile devices.If you are choosing between a text-heavy or image-heavy email design it’s best to stick with a text-heavy design for a more authentic, perfectly rendering email campaign.

Text-heavy email formatting best practices 

Strategic email formatting weighs heavily on your subscribers’ preferences. Which means that some email marketers will have more success following an image-heavy email format. But if you’ve found that text-heavy emails work best for your campaigns, then it’s best to focus on enhancing those emails. Let’s pinpoint some text-heavy email best practices through brands who did it well.

Create a successful text hierarchy

Place content into your email in a way that makes it easy for subscribers to scan, skim and interpret the main idea of your email message. Your text hierarchy is how you section off blocks of image and copy throughout your email.Like a traditional print newspaper, for example. Print newspapers start off strong with a big story on their front page with a bold headline and eye-catching image. This is followed by multiple subsections that contain smaller news stories.Implement a similar text hierarchy for your emails. Like this BuzzFeed email example, they implement a hierarchy by explicitly stating, “Here are the top stories.”

Establish a hierarchy by prioritizing content to reflect what’s most valuable to your subscribers. Once your hierarchy is set, begin to explore heavier format-related details.

Set a max-width

When lines of text endlessly stretch across a screen, it’s easy for subscribers to lose track of where they left off in a paragraph.This is especially true with emails being viewed on many different devices. It’s a good idea to set the max width of your email to around 500 pixels. This ensures that your email will render at a readable size on wider devices such as on desktop and tablets.To optimize for mobile, keep that same width, but double check that mobile view looks correct.Take this BuzzFeed email as an example: it’s a short of 500 pixels wide. On a large desktop screen, there’s plenty of white space on both sides. This white space won’t bother your desktop readers, and it will make your email easy-to-read on mobile devices.

Stick to one or two email fonts

Keep it simple and stick to one or two fonts in your email. Arial, Georgia and Helvetica are popular email-safe fonts. They are reliable classic, elegant and easy to read.BuzzFeed uses Arial along with Helvetica for section headers. Once you’ve established your font, you should implement more structure and styling techniques to improve readability.

Distinguish section headers and headlines 

Headers are incredibly important to break up the flow of text and establish structure in email. Buzzfeed uses consistently styled section headers (Helvetica, caps, red) and headlines (Arial, about 2x body size, bold). As a reader, this makes it super easy to skim with clear transitioning into new sections and big, bold headlines.Mic, a news publication, takes a similar approach with their daily newsletter. The section header, “Today’s Talking Points,” is in a different font (Avenir) and is gray and all-caps, while the major takeaways in the content below are bolded with no line breaks or size differences.

Note the use of all caps in the header. Most designers agree that lowercase letters are easier to read (they’re more distinguishable, with ascenders, descenders and modulated widths that capital letters lack). So, all-caps style should be used sparingly in emails.As for headers, their style should serve the purpose of setting text apart from the rest of the content. The font size of your headers should be at least twice as large as body copy, with generous line breaks between sections (at least the height of a full line of text).

Don’t over-format your email

Notice that BuzzFeed and Mic don’t focus on stylizing their body text much. After the header, their text is all the same size, font, and color, minus their links.The media company, The Skimm, takes a similar approach. The body copy is all the same size, color, and font, while headers are in all-caps and bold (same font and color as body text). Here’s a story from one of their newsletters:

It’s tempting to bold, italicize, underline and play with color, but it’s better to resist. A minimalistic approach to body copy is the best for readability, while also emphasizing your email’s main idea and CTA.

Capitalize on color

Color is most effective in your links and headers. Capitalize on branding your email by using one on-brand color. The Skimm and Mic both make links appear in their brand color, while BuzzFeed leaves links in their usual blue shade but uses red for their section headers.Here’s another example of great color use in a text-heavy email from artist and designer James Victore, who sends out a weekly inspirational email. The CTAs stand out with the vibrant shade of pink, which is a bright juxtaposition to the black-and-white email:

Remember line height and spacing

A good rule of thumb is to set your line height to be at least 1.3x the height of your letters. So if your body copy is 12pt, your line height should be 16pt. This keeps a comfortable distance between lines, optimizing readability. Copy should never appear too tight or too loose.Likewise, a break between sections is usually the height of a full line of text. Check out how The Skimm optimizes line breaks to structure their emails. Notice the main header section and the sub-headers look similar; instead of changing the typeface format, they’ve varied the line breaks to distinguish hierarchy—i.e., the space after “Russian Plane” is greater than the space left after “The Story.”

Left-align your text

Designers recommend that you should left-align your email copy. We read from left-to-right, and newsletters are best formatted that way. Don’t be tempted to center-align your headers or copy; keep it easy to read with left alignment. All the examples we’ve covered in this post have left-adjusted content.

Moderate white space with padding

The space between your content and the container filled with that content is referred to as padding. When you’re sending out a text-heavy email, moderate white space primarily with line breaks and line height. Then when you add images and other design elements between text structures, adjust the padding to make sure the space above and below it is proportionate to line breaks in your text.In other words, the spacing should be relatively equal between elements. Do this by adjusting the padding above and below a structure. Below, we see how BuzzFeed moderates the space between the end of a paragraph and an image with padding, and then between the image caption and the start of a new section.

Give it a try in BEE Pro

When in doubt, keep it simple. The quality of your content is what subscribers signed up for, so avoid getting in-between the message and its readers with a distracting formatting. Try out these design tips in BEE Pro.

Have you noticed how brandstend tosit at twoends of the email design spectrum, sending either very image-heavy or very text-heavy newsletters? We've been known toadvocate for a healthy content-to-image ratio in emails, but our inboxes are full of newsletters that either communicate nearly entirely through images, or almost totally in words.Most image-reliant emailsfeatureproducts, where it makes sense to focus on showcasing what you're trying to sell (like Etsy, for example).But publishers do it too, often by including a roundup of links with a key image andheadline and not much else. Here's an example from It's Nice That, a company publishingstories about creative worktoinspire and connect people and artists:

From a design perspective, the approach is appealing because it keeps the email simple, straight-forward, visual, and clear of clutter. Readers can easily scan throughanddecide what's of interest, then tap to read more.

The text-heavy email approach

But we also see many brandstaking an alternate approach: instead of asking readers to click to read, content is placed directly in the email itself, in a "behind the headlines" kind of way.Buzzfeed, Vice, The Skimm, Mic, and others are doing it. Here's one recently sent by BuzzFeed News (it's a long email, so we trimmed it after the first story):

Here, readersget a lot more (basically a beginning-to-end mini story)without having to navigateaway fromtheirinbox. BuzzFeed—and other publishers taking a similar approach—curates anddistills stories,leaving no onus on the reader to choose what to clickfrom a collection of headlines. It's sort of like a hassle-free delivery of information (notice there often aren't ads in these long content-driven emails).

Text-heavy or image-heavy emails? It's up to you, but keep an eye on the email message size

Like anything else, there are pros and cons to both theimage-heavy andtext-heavy approaches. Brands should try both—or find a happy medium—taking into consideration how their messages are best communicated, what best aligns withtheir brand identity, and what their readers most prefer (test and track those clicks!).It's worth mentioning that if your email message size exceeds a certain limit - regardless if it's text-heavy or image-heavy - it's possible that your email message may be clipped by some email clients.

Prevent Gmail from clipping your email

In particular, Gmail clips HTML emails that are larger than 102 KB while the Gmail App for iOS clips emails that are larger than 20KB. This becomes a problem if the majority of your mailing list subscribers are on Gmail.An large email message size can happen when you create an email that is way too long with lots of content or when your email message contains a lot of HTML code - such as inline-CSS code that adds a number of lines of code.As of right now there isn't a universal or elegant solution to preventing a large email from being clipped by Gmail. The best solution from the email marketing community is to try to minimize the email message size by:

• Optimizing and minimizing the HTML code. If your email is optimized for the Gmail client on mobile - which is achieved through inline-CSS code - you need to decide which is more important: a mobile-optimized email on Gmail that however is clipped or an email that is shown in full but that isn't responsive.
• Reduce the amount of content in your email messages. If you send out a weekly newsletter digest with 15 in-depth sections and your message is getting clipped by Gmail, try lowering this number to 10 sections (or at the point where your newsletter is below 102 KB in size).

Best practices for text-heavy emails

Today, we'll look atcontent-formatting tips from brands who do it well, revealing how to makeany text-laden email look great and get read.

Start with hierarchy

Putting all that content directly into the email itself usually means your message will be prettylong. Channel the thinking of a good oldprint newspaper and start off strong with your best content or biggest story right at the top. That's what BuzzFeed does, letting their readers know by stating: "Here are the top stories." The story aboutthe leaders of Taiwan and China meeting is the only one that has two sections and two photos. Since it's the biggest news story of that day, it gets the most real estate. Think of your subscribers and prioritize your content to reflect what's most valuable to them.

Once your hierarchy is established, it's all about structure. Use consistent colors, styles, and spacing throughout the rest of your email to clarify where one story ends and the next begins. Read on for tips on formatting section headers.

Set a max width

When lines of text stretch on and on across ascreen, it's easy for your eyes to lose track of where you are in a paragraph.Especially if your email is viewed on multiple devices and if your email message is mobile-optimized, it's a good idea to set a max width of your email message at around 500 pixels. This ensures that on wider devices such as on desktop and tablets your email will render at a readable size. And on mobile devices, the width and text will render as specified in your mobile-responsive code.Let's take this BuzzFeed email as an example: it's just shy of500 pixels wide. On a big desktop screen, there'splenty of white space on either side. This white space won't bother your desktop readers, and it will make your email easy-to-read on mobile devices.

One or two fonts will do the trick

Keep it simple and stick to one ortwo fonts in your email. Arial, Georgia, and Helvetica are popular email-safe fonts that are reliably classic, elegant, and easy to read. BuzzFeed uses ArialwithHelvetica for section headers.Once you've established your font, createstructure and improve readability with styling, making use ofbold, caps, size, color, and spacing (Read on for how to format!).

Distinguish section headers and headlines

Headers are incredibly important to break up the flow of text and establish structure in your email. Buzzfeeduses the same treatment for all section headers (Helvetica, caps, red) and headlines (Arial, about 2x body size, bold).As a reader, this makes it super clear to know when you're reading a new section, and the big, bold headlines are easy to skim.Mic, a news publisherfor a younger audience, takes a similar approach in their daily newsletter. The section header—"Today's Talking Points"—is in a different font (Avenir) and is gray and all-caps, while the majortakeaways in the content below arebolded (but no line break or size difference).

Note that the use of all caps for the header in the example above is on-trend, butit can still be a bit contentious. Most designers agree thatlowercase letters are easier to read (it's true they're more distinguishable, with ascenders and descenders and modulated widths that capital letters lack) and that all-caps makes readers feel like they're being yelled at.But we most often see the all-caps style used very sparingly, in headers, where the style is serving a purpose of setting the textapart from the rest of the content. In moderation, it serves a purpose.Whether you use all-caps or not, the font size of headers should be at least twice as large as body copy,with a generous line break between sections (at least the height of a full line of text).

Don't over-format

Notice neither BuzzFeednor Micstylizes their body text much. After the header, the text isall the same size, font, and color, except for links.The newsletter-only publisher The Skimm takessimilar simple approach. The body copy is all the same size, color, and font, while headers are in all-caps and bold (same font and color as body text). Here's a story from a recent newsletter:

It can be tempting to bold, italicize, underline, play with color, etc., but resist. A minimalistic approach to body copy is the best for readability, and the simple approach alsomakescalls-to-actions stand out all the more.

Capitalize on color

But don't go crazy. Your body copyshould be black on a white background. So where is color most effective? In links and headers. Capitalize onbranding your email by using an on-brand color (yes, just one color is enough!) The Skimm and Mic both make links appear in their brand color, while BuzzFeed leaves links the usual blue but uses red in section headers.Here's another example of great color use in text-heavy email from artist and designer James Victore, who sends out a weekly inspirational email.Using pink for calls-to-action really makes them stand out—the pink is a brightjuxtaposition tothe black-and-white email:

Remember line height and spacing

A good rule of thumb is to set your line height to be at least 1.3x the height of your letters. So if your body copy is12pt, your line height should be16. This maintains acomfortable distance between lines, optimizing readability. Copy should never feel too tight or too loose.Likewise, a break between sections is usually the height of a full line of text. Check out how TheSkimm optimizes line breaks to structure their emails. Notice the main header section and the sub-headers look similar; instead of changing the typefaceformat, they've varied the line breaks to distinguish hierarchy—i.e., the space after"Russian Plane" is greater than the space left after "The Story."

Left-align your text

This almost goes without saying, but it's important. We read from left-to-right, and newsletters are best formattedthat way. Don't be tempted to center-align your headers or copy; keep it easy to read with left alignment. All the examples we've covered in this post have left-adjusted content.

Moderate white space with padding

Padding is the space between content and the container it sits within. When you're sending out a newsletter that's essentiallyone content structure (a long message of text), you'll moderate white space primarily with line breaks and line height. But when you add images and other design elements between text structures, you'll want to adjust thepadding to make sure the space above and below it is proportionate to line breaks in your text. In other words, the spacing should be relativelyequal between elements. Do this by adjusting the padding above and below a structure. In email, you generally won't need to adjust the padding on the left and right, as images and design elementstypically look best when they're the full width of the email, like the text.Below,we can see how BuzzFeed moderates the space between the end of a paragraph and an image, and then between the image caption and the start of a new section. The image is the full width of the email.

When in doubt, keep it simple. Your quality content is what subscribers signed up for, so avoid getting in between the message and its readers with distracting formatting.We'll be back later this week with a workshop on how to optimize text-heavy emails. In the mean time, try out these design tips in the BEE editor.

Are youin the spooky spiritof Halloweenthis week?Not only is Halloweenanespecially fun and festive holiday, but businesses increasingly markit as the start of the busiest shopping season of the year. Halloween-themed emails have been trickling into our inbox all month as brandsseize the opportunity todeliver sweet treats and ghostly content to subscribers.But don't be spookedif you haven't gotten into the trick-or-treat spirit with your emails yet. We've rounded up 9 can't-miss email tips with examples from brands doing it best—and it's not too late tousethese goodiesin your Halloween email newsletter this week!

1. Give out treats

Martha Stewarts treats subscribers to printable pumpkin stencils—easy-to-share content that goes beyond the usual "how-to" post.Providing a free, usable treat that's that's well-timed, on-brand, and in the holiday spirit engages readers and encourages email-opens. Giving away content also helps brands positively position themselves as well as learn about and grow their audience. Get creative with what would your subscribers wouldreally value—like a free-to-download ebook, a coupon, or a printable infographic—and give it away!

2. Get dressed up

We allappreciate it when a brand doesn't take itself too seriously and investstime indesign touches that entertain. The holidays are a great opportunity for brands to "get dressed up" toshow readers how their attention is valued—and with the flood of advertising that comes with each holiday season, it's critical for brands not to scrimp on great design in email messaging. Here's a Halloween email example from Barnes & Noble:

Barnes & Noble uses Halloween as a great excuse to add a dash of funwith animated GIFs that "dress up" their email from top to bottom. The animated GIFs are playful and eye-catching and encourage readers to keep scrolling: little bats fly around between content blocks throughout the email.

Plus, it's easy to bedrawn-in from the get-go with the crawly spider in the email header design:

3. Trim the text

Here's a challenge: see howmuchgreat content you can provide to your email subscribers without making them read it. Etsy is king at this approach in their daily Finds emails—here's a recent Fall Fun one that entices readers to click and shop. Photo-based campaignsare great forcommunicating quickly, piquing readers' interest, and getting them clicking on over to your site. Just be sure to avoid the pitfalls of image-only emails (read our guidelines here),and have fun!

4. Try something new

Elle has a well-established email newsletter structure: it's a single-column with the same format each time—headlines on the left, photos on the right, and social share icons beneath each content block. The consistent approach builds trust with subscribers,letting thenknow what to expect. It looks like this:

But in a recent email, Ellemade a designchange to their Halloween-themedcontent to kick off the email:

The desaturated, circular approach is a striking,fresh break from their typical format. Refreshing your email template for the holidays is a smart way to kick off the season, make readers feel the festive spirit, and, of course, get clicks. Try something simple like aphoto treatment to keep readers on their toes while staying on-brand.

5. Don't scare readers away—be yourself

Consider ways toparticipate in Halloween (or any holiday) while remaining authentic and true to your brand. Food52 does this well by putting a Halloween spin on their content with a candy-themed email.It feels festive and special while remaining in-line with their usual kitchen-themed, recipe-based content. There's no use of run-of-the-millHalloween themes like an orange-and-black color scheme, spooky images, or witches and ghouls. Food52 knows their audience and knows themselves, allowing them to getintothe Halloween spirit withcontent that's still recognizable and appealing to their readers.

6. BOOoost in-email content

This Halloween email from Bliss is too pretty not to share. It's obvious theyinvested time to plan an email that provides high-value content and can stand on its own. Yes, it's highly linked so that readers can click almost anywhere to view productinformation, but readersalso get a lot in the email itself: inspiring illustrations coupled with bulleted how-to instructions for great Halloween looks. Bliss knows that, chances are, high-value content is what made subscribers sign up in the first place, so it's wise to keep them coming back with in-email content that's well thought-out and useful.

7. Readers aren't ghosts—engage them

Last year, Time Out New York invited readers to vote on Halloween costumes, giving out movie vouchers as rewards.What a great call-to-action! It's a nicereprievefrom the usualsales-y or promotional CTA, giving readers somethingfun to do. Plus, the content is user-generated, sonot only is it engaging, but it gives Time Out an opportunity to facilitate an authentic connection with readers through their own lives. Choose a strategic hashtag, enticing rewards, and a catchy holiday-themed idea tostart planning your ownuser-generated-content campaign!

8. Make sharing spook-tacularly easy

McCormick's pumpkin-party themed emailis chock-full of highly shareable microcontent:high-qualityphotos that link to tasty Halloween recipes. The pretty pictures and festiverecipes are alluring, but what makes them super easy to share are the "Pin it" buttons on each one. It definitely seems that McCormick has done its research and knows how itsaudience prefers to share content; instead of listing every social media icon out there (Twitter, Facebook, Instagram, etc.), the single "Pin it" CTA is focused and intentional. It's worth it to do your research to find out readers' most preferred social network, then tailor your content for that platformand make it easy for readers to share with in-email social buttons.

9. Write wickedly clever copy

Check out how CB2 gets creative withHalloween-themed copytoplayfully promote their products. If you're short on time or resources, don't fret over creating custom Halloween graphics or images; infuse theHalloween spirit into your email with text!

Let's recap: 9 tips to try for a totally bewitching Halloween email:

1. Build customer loyalty by offering high-value content for free.
2. Use playful design elements (like animated GIFs) to draw in readers.
3. Try a photographic approach that's spare on text.
4. Experiment. The holidays are a great time to refresh your usual email template.
5. Be yourself. Incorporate a festive theme while remaining true to your brand.
6. Provide compelling in-email content that makes opening your email worthwhile.
7. Engage readers through a user-generated-content campaign.
8. Make your content easy to share with buttons (and tailor it to the platform preferred by your audience).
9. Don't forget great copy! It's the easiest way to get in the holiday spirit.

Ready to create your own Halloween email? Try designing itfor free in the BEE editor.

Originally published on October 20, 2015. Last updated August 27, 2021.An image-only email might seem like a good idea, until you preview the email and come across this error.

As an email marketer or designer, the dreaded, “Images are not displayed,” error might make you wince. But this is what subscribers could come across when greeted with an image-only email.While incorporating images in email can better draw your subscribers’ attention and create more interest, these emails are not always going to show up in the ways you expect them to.Want to avoid the pitfalls of image-only emails? Here are some tips on how to better optimize your campaigns.

6 reasons why you should avoid sending image-only emails

Create image-only emails risks encountering a number of inbox, mobile rendering and other optimization challenges including:

1) Email image display settings being turned off

In the past, many email subscribers wouldn’t see or take the time to download the images in their email. This was due to email service providers blocking images by default and subscribers also having the option to personalize their email image settings:

Email service providers did this to protect their subscribers from spammers who would usually send image-only emails. This was common practice. As a result, back in 2013, about 43% of Gmail subscribers viewed their emails with images turned off.Nowadays, many email service providers, like Gmail and Apple, load images by default but still provide the option to block images. The “Ask before displaying external images,” setting also interferes with rendering. When users have this display setting turned on your image-only emails will look like this blank, empty email until they choose to turn on “always display images,” from your sending address:

For privacy and security reasons, many subscribers may also block images due to tracking pixels, which are embedded inside email images and used to gather marketing data.As an email marketer, it’s crucial to think about the possibility of images being turned off when designing your email to keep them from being blocked, broken or inaccessible.Remind your email list to turn their display image settings on (or at least add you to the list of trusted sources) so they can receive the full customer experience.

2) Difficulty downloading images 

Sometimes emails take a long time to download, and all that subscribers see is a message near the bottom of their screen that reads, “Download remaining XX bytes.”Typically, this occurs when your readers have reached a maximum download size limit. Depending on a subscriber’s connection speed and data plan, it’s not wise for them to download images that are too big, especially if they are on their phone and the image is not optimized for mobile.When downloading friction occurs, your subscribers will likely delete your email rather than waiting for it to load. If your email isn’t optimized and images take too long to download, add more text to balance the email out. Be sure to test your emails to find the right balance of text and images.

3) Emails marked as spam 

Image-only emails often get flagged as spam. Spammers have mastered concealing their text inside of these emails. And since about 45% of all emails sent hit the spam box, it's best to learn best practices on how to stay out of there.If you fill your email from top to bottom with images, chances are that spam filters will catch your email before your subscribers ever get a chance to see it. Optimize your emails with a healthy mix of text and images to ensure that your emails reach your subscribers.

4) Not optimized for mobile 

With 42.3% of people deleting emails when they're not optimized for mobile, it’s best to avoid using only images in your email campaigns. Image elements are fixed, making it difficult for image-only emails to render properly. Creating this type of email risks blurry images, a loss of readable text, and a lack of functional links and CTAs.A mobile-friendly email consists of both text and images. This ensures that subscribers understand the gist of your email, images or not, and no matter the device they are viewing from. Optimizing for mobile devicesisn’t a choice anymore, but a necessity. Designing in mobile design mode ensures that your email looks the way you intend it to on both desktop and mobile.

5) Lack of accessibility

Not including live text in your emails leads to accessibility problems. Screen readers often can’t decipher the content of an image, and rely on alt text to explain what the image is about. Avoid putting CTAs and other text inside your email images. Screen readers won’t pick up on these elements, which means this is not the best way to reach all of your subscribers.This also goes for individuals who need to translate their email messages to a different language. The translator can’t pick up on text inside of images. Again, another reason to include a balance of live text and images so your emails are accessible to all subscribers.

6) Lack of searchability

Sometimes users want to go back through their inbox to find an email containing a coupon, special offer or other specific information. Image-only emails rule out the possibility of finding this email because there are no text or keywords to pick up on when searching their inbox. Even trying to copy and paste certain parts of your email text is impossible since your text is solely inside your images.

How to improve an image-heavy email

Just because image-only emails should be avoided, does not mean you can’t include images in your emails. Optimizing images correctly are key to a high-converting campaign. Let’s look at a few email design best practices for image-heavy emails:

• Find a text to image ratio that works for you. Have enough text in your emails so your subscribers can understand your message with images turned on or off. 
• Design for mobile. With mobile email now accounting for at least 50% of opens, marketers can no longer gamble with a design that isn’t optimized for mobile devices. Take control over how your email appears on smaller devices and make your emails fully mobile-responsive. 
• Create bulletproof buttons. Use HTML rather than an image to ensure your CTA buttons are clear, clickable and render correctly on all devices.  
• Use ALT text. Include alternative text for all images in your emails. These need to be clear so subscribers can understand your message.

Design beautiful emails in BEE Pro

Image-only emails are visually appealing, but they aren’t the safest design choice if you’re looking to create perfectly responsive emails. It’s best to find a balance between live text and images. BEE provides you with the tools you need to optimize your design process to create perfectly balanced emails. Start creating in the design suite now with a free trial.

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!

Litmus is an online tool that allows you to test and track email performance. Marketers, designers, and agencies use Litmus to preview emails, test for spam, and run analytics, ensuring that they send good-looking messagesand hoping to better understand how— and on what devices— subscribers engage with their email campaigns.They have also been at the cutting edge of email design for quite some time, offering some of the industry's best email marketing campaigns. A perfect fit for our Design Inspiration series!

In focus: The recent Litmus product launch email campaign

Over the past weeks, Litmus engineered a very engaging, integrated, and well-planned product launch around its latest release. Litmus started with a teaser email (part 1 of 3) and a social campaign around the Twitter hashtag #MakeEmailBetter to build engagement and start a conversation with its audience. Then, the companysent a follow-up email (part 2 of 3) announcing that "A new Litmus is coming...". And finally, they sent a detailed product announcement email about all the new features (i.e. part 3 of 3 of this multi-part email campaign).It's a great example of one of the best product launch emails we've seen, one that many B2B SaaS marketers can learn from. So forthis week’s Design Inspiration, we're going to dig into this Litmus campaign and focus on theirproduct announcement email(i.e. part 3 of 3; the last email they sent). Here it is!

Let's get inspired! And draw upon a few email design tips from the Litmus messageon how to send an email to sell a product (i.e., aproduct announcement email).

Tip #1 – Call to action email: provide multiple and be coherent

Notice that the Litmus email has two prominent call-to-action buttons (which are both "bullet-proof" buttons for email: they render well on most email clients)."Play video" (at the very top):

... and "Learn more about the new Litmus →"

In addition to these two CTA buttons, each product screenshot can be considered as an additional CTA, along with the "view as a webpage" link.What's interesting about these multiple CTAs is that they all point to the same, single landing page: the What's New section on the Litmus website. Practically speaking, it's a smart idea to have all your email CTAs point to one landing webpage: having to manage only one landing page for your product launch campaign can be a simple and very manageable approach, especially if you have limited resources or time.

What if I'm not readyor can't watch the video right now? No problem. That's why Litmus provides the additional CTAs within a visually engaging, product-focused section of the message. It's designed both for subscribersthat tend to quickly scan emails (screenshots) and for those who are looking for an easy read, without having to click (textual content).

Remember: Cover all your bases! Provide multiple, coherent CTAs that tailor to all of your subscribers' interests, device, and situation.

Tip #2 – Colorful, responsive HTML email templates: use a vibrant background color

What's an email header design you can use capture your subscribers' attention? Animated GIFs, vector graphics, photography? Yes, all of the above can work. But how about a simple background colorthat sets the right tone? It might be all you need!That's exactly what Litmus did. They chose a niceshade of blue for the background color (#363795 in hexadecimal format) and added a few elements to it. How cool is this? It's amazing how nice the header design is with just a cool color, a minimalist logo, and nice typography!

Stay tuned! We'll be showing you how to create a 100% width, flat design header in this Friday's email workshop.

Litmus has been one of the first companies to use background colors this way in email, following the flat design trend of recent years. There are a number of advantages in using an HTML color to provide rich backgrounds to different sections of your email messages. To name a few:

• HTML colors render across all inboxes, unlike images, which are not shown by default by some email clients.
• It's not an image file. You don't need to manage/store/link to it and it loads instantly.
• The HTML color takes up less than 1 line of code. The background color is simply an HTML style attribute.
• There's no need to ask your designer. Just look up which HTML colors to use (there are endless to choose from)!

Tip #3 – Know how to use video in email

What Litmus does best (and has surely tested!) is to lead with videoin this email as the first Call-To-Action presented to the reader. Video is arguably the most engaging, personable, and visual piece of content you can use to get a message across toyour customers. It's one of the few mediums that allows you to leverage storytelling, visually, and connect with your audience. Case in point, notice that the web version of the email uses a much more personable image instead of the blue background color from tip #2, enticing you to play the video.

Litmus implemented an interesting choice for the video content in their product announcement message.The strategy is not to embed the video in the email newsletter; it's to entice readers to click through to watch. In other words, Litmus decided not to use the HTML5 video tag toembed the video directly in the email, as they had donein a previous email. (If you're interested, here's a how-to guide on how to implement HTML5 video in email). What they did was instead to place the video in the landing webpage and simply link the landing page to the "play video" CTA button, as we covered in tip #1.Linking to a landing page thatcontains the video is a practical and simple way of including video in email. Yet embedding the video directly in the email had worked well for them in the past.So why didn't Litmus embed the video in this email? One reason couldbe that HTML5-embedded video starts playingdirectly in the email message on Apple email clients and mobile devices. That's great and that's exactly why the HTML5 video tag is used to do so. However... what if iPhone users in the Litmus' recipients base did not want the video to try to play in their inbox? With a product announcement as significant as this one, maybe Litmus didn't want its core audience to risk missing out on the video experience due to a problem with poor wireless connections or concerns with data plan usage.We're guessing that might be the reason why they decided not to embed the video in the email, and instead chose the more conservative route of linking to alanding page.

For all you designers and marketers, know that you have a number of ways to implement video in your email campaigns. And keep in mind that each solution has its pros and cons.

Tip #4 – Use screenshots to show your new product features

Show, don't tell! Screenshotsare a great way to display what's new. More than telling a story with words, you're doing so visually. And the message becomes particularly effective when you highlight how your new features solve a certain pain point.Litmus does a great job at this - at multiple levels - using the email layout, product-focused copy, and screenshots. For example, look at how thisscreenshot complements and adds to the copy:

And the animated GIF adds a bit of movement — a smart way to capture attention and a great way to communicate how email previews now work in Litmus: they're now instant. Say goodbye to the dreaded spinning wheel!

Tip #5 – Use screenshots to show your new product features

Litmus chose a modular, single-column layout for their product marketing email announcement, and it looks great on both mobile and desktop clients. Here's how it looks on an iPhone:

It goes without saying that the Litmus email is also responsive, automatically adjusting to the device. Litmus is at the forefront of responsive design!The email design tip we'd like to highlight here is to consideradopting a modular, single-column email layout, which should also be responsive (changes depending on the size of the screen) or at the least mobile-optimized (learn about the different options for mobile-ready emails).Let's cover these two aspects in more detail:

• Modular email design: You can greatly improve your email workflow (and workload) by adopting modular design. By this we mean organizing your email content as building blocks (i.e. modules) that you can stack up and drag-n-drop. Most modern email editors nowadays follow this principle. Take our BEE email editor for example!
• Single-column layout: The advantages of this email layout is that it's simple to work with, and helps you keep the message well focused. But be sure to use a single-column layout that is fully-responsive (or at least mobile-optimized) . It's an effective, simple email format you should try!

Key takeaways for a great product announcement email

To recap, here's what we can learn from the Litmus product announcement email:

• Put your most important call-to-action at the top. A clear call-to-action using a colorful button and clear, concise language makes it easy for your readers to understand what you want them to do.

• Use a vibrant background color to make your header design stand out. Use the principles of flat design and choose a vivid background color to make your message clear, without needing to incorporate complex design elements.

• Let readers see your new product features with screenshots. When using screenshots, make sure they’re clear and simple. Have a designer trim and format them so they render well in email. Incorporate animations to add visual interest.

• Choose a modular, single-column layout. A simple layout allows you to present your product features in a more linear way. And make sure the layout you choose responsive or at least mobile-optimized.

• Entice readers to watch your product video by making it the central component of your email. Starting your email off with a video signals to subscribers that you really want them to watch it (because you know it will get them to convert!). Use a bold color, a few lines of text, and an actionable “Play video” CTA button to encourage readers to watch.

• Tell the story of your new product features in multiple ways. You can’t bank on all subscribers being ready and willing to watch a video when an email lands in their inbox. If you use video, make sure to tell your story in another way, too, using images with supportive text.

If you want to create an engaging product announcement email like Litmus but need inspiration or are short on time, check out the BEE editor's templates. You can search by category, from newsletter templatesto product launch templates, including a ready-to-go app launch email template.What do you think of the Litmus email? Tell us in the comments. And stay tuned for our email design workshop this Friday, where we'll be showing you how to apply the email design tips covered here as we rebuild the Litmus email from scratch!

GOOD, “a magazine for the global citizen,” is a quarterly magazine known for its killer design aesthetics and fresh take on a variety of news topics, including the environment, education, urban planning, design, food, politics, culture, lifestyle, technology, and health.How well does GOOD use email design elements - such asillustrations and typography - to engage its subscribers and get them to click? For this week's Email Design Inspirationpiece, we took a look at a recent issue ofThe GOOD Dailyto see what we could learn from this design-forward publisher.

The GOOD Daily: A publisher's daily email newsletter

Here's the GOOD newsletter that we picked...

... and here are our thoughts on it.

1. Use color + typography to grab your readers’ attention

GOOD’s email color palette is primarily black, white, and gray, so any time a color is introduced, it grabs the reader’s eye. Pink and blue are used to highlight names and links; plus, at the top, the day of the week is always the same color (Tuesdays are always pink; Mondays are blue, etc.) along with a matching dog-ear effect in the upper right. These are small details, but have a big impact: they give the email a sleek, modern feel and help focus readers’ attention. What sets the GOOD email apart is the clever use of color in combination with close attention totypography. Notice the use of different font styles (and sizes) paired with a color palette. You can see this in action in the headlines of GOOD’s first story: the headline is large, bold and Helvetica; the byline uses pink, italics, and Georgia; and the article summaryis a much smallerGeorgia, gray.

2. No photo resources? Use an illustration!

One of the reasons we chose to highlight this email is because the illustration at the top is so compelling. It’s simple, unique, and attention-grabbing. Making sure your messages are visual and not text-heavy is incredibly important, but photography doesn’t always have to be the go-to option. GOOD does a great job of leading with a strong visual element, placing it above the header and any substantive text.

3. Visually separate ads from content

It's always a good idea to separate your ads from your main content. You want to be as transparent as possible to your subscribers, andat the same time give advertisers good enough visibility to deliver a positiveROI on their investment. Fortunately, this can be done easily with a few visual cues.Let's take the GOOD email. The ad appears only after the lead story and image, so it's not immediately in the reader's face. However, it's also not relegated to the bottom of the message. It's centrally located, but visually separated from the rest of the content with a subtle background color change and the blue “Presented by...” box. Transparency is essential. Advertisers' revenue is key. GOOD found a nicebalance.

Best practices for a daily newsletter for publishers

Email is an increasingly important traffic-driver for publishers, so much so that this year the New York Times increased its newsletter titles substantially and now sends 33 different newsletters. Knowing how important email newsletters are for publishers, it’s no surprise that GOOD is using a well-crafted daily email newsletter to drive traffic.So, how can you - as a publisher - follow what GOOD is doing to drive traffic through daily email newsletters? Here are a few takeaways foryour own email campaigns:

1. Introduce one or two bright accent colors. Try using just one or two bright accent colors per email. Incorporate simple design elements (like that pink dog-ear) to bring your email to the next level. A muted background color (like gray, in this case) can help make the body of your email pop.
2. Use different fonts by stacking your content areas. Try placing a post’s headline, byline, and summary in separate text boxes to customize them individually. You can see this in action in the headlines of GOOD’s first story: the headline is bold and Helvetica; the byline is pink, italics, and Georgia font; and the article description is also Georgia and gray.
3. Commission illustrated work. Whether from an in-house designer, a freelancer, or a friend, consider incorporating effective, on-brand illustration into your email for important stories or messages. Alternatively, simple photo treatments, like adding a layer of color to an image, is an easy way to enhance your email design.
4. Lead with your own content. Email ads can be great for both you and your readers when done well. One great rule of thumb to remember is to try to lead with your own content whenever possible. Remember, your readers subscribed to hear from you, not from advertisers.
5. Label your advertisements, mind their ROI. Make your ad distinguishable from the surrounding email content with a special label and/or with a change of color in the header or background. Use a consistent approach so your readers always know when they’re looking at an ad. Make sure that they're placed prominently enough to deliver a positive return on the investment.

Want to create an email newsletter like this one from GOOD? We’ll be showing you how to do this on Friday in our email design workshop. So, stay tuned!What do you think of GOOD’s email? What would you do differently? Tell us in the comments.

Last week atthe Practical eCommerce Ignite 2015 conference in Dallas, I held a session onEmail Design for eCommerce Success. With many years spent in both the ecommerce and the email world, that was the perfect title for me! Here are the thoughts I shared with the audience (BTW: to download the full presentation, click here).

Nobody uses email... somebody said

My teenage daughter a few months ago said to me... "Dad, I don't even know how you have a job. Nobody uses email!!" Fair enough: she does not use email to communicate with anyone other than teachers and grandparents. Her communication tools include Snapchat, Vine, Instagram, Kik, Facetime, SMS, ... not email. And yet, she wasn't telling the full story. Her Gmail inbox is full of newsletters that she signed up for from her favorite brands.

Everybody uses email: it's our digital passport

She may not be using email to communicate with her friends, but email is still one of her preferred ways to receive promotional messages. And the same is true for millions of others.That's why study after study reports that email delivers the highest ROI, why at ecommerce conferences there are plenty ofsessions around email, and why it makes sense to spend time on optimizing email messages, starting withtheir design.On average, companies report that roughly 20% of sales come from email (see below). Whether this figure resonates with you or not (channel attribution is a tough equation to solve!), it's hard to argue that email substantially contributes to a good chunkofecommerce revenue.

And it's not just a matter of sales. The email address has become our de-facto digital passport (and we often have two or more passports: a personal email, a work email, etc.) and a powerful marketing tool. When used correctly, it allows companies to build lasting relationships with their most loyal (and highest profit-generating) customers. Which is why a social media guru like Guy Kawasaki, at the Email Experience Conference earlier this year said that he will take an email address over a Twitter or Facebook follower any day.

What mobile-first really means

Things have been changing very, very rapidly over the last 4-5 years. Before we start designing an email, we really need to ask ourselves a basic, but key question: whom are we designing for?

For many of us: we are designing for a truly mobile audience. Many marketers have crossed the tipping point of over 50% of the recipients of their messages opening emails on a mobile device. And - by the way - the slowdown in the curve shown in the chart below is not at all due to a slowdown in mobile opens. The experts at Litmus clarify that the reason is strictly a technical one: Gmail no longer reports whether emails are being opened on Gmail Web or Gmail App. Taking that into account, mobile opens are likely around 54-55% right now (53% back in January of 2015, according to Litmus). For some companies, that percentage is even higher.

This means that we need to think of a customer opening our emails on a mobile device as the new normal.  We need to think of our customers first having a mobile experience of our email messages, and then, maybe, a desktop one. That's what "mobile first" means: defaulting to mobile: thinking of a mobile user before any other user. And flipping the User Experience table in favor of a mobile experience has far-reaching impact on email design, Web design, online store checkout design, etc.

Now, this is not true in all scenarios. For companies involved in mostly business-to-business transactions, mobile might still represent a smaller piece of the pie. In our case at MailUp, for example, only around 24% of opens happen on a mobile device,... but if we look at B2C brand and customer of ours the percentage goes back up to almost 50%.

Something else is changing rapidly because of the switch to mobile: the email clients that our customers are using. Outlook - king of the email client world until a few years ago - is now a distant #6 with less than 10% of the market (certainly higher in a B2B scenario, so keep that in mind).

Why does this matter to email designers? Because if you combine the top email clients, you discover that over 70% of your recipients are likely reading emails that download images by default, whereas exactly the opposite was true in a not-so-distant past. Good news!

5 email design tips for ecommerce success

Now that we've painted a picture of the email world that we live in, let's look at...

There's not doubt that we are just scratching the surface in the following paragraphs. But it's a start!

#1 - Adopt a mobile-first approach

After all thisemail on mobile talk, we couldn't start in any other way: think mobile first: bigger buttons, bigger text, simple message structure, responsive layout (e.g. a two-column email becomes a one-column email when opened on a mobile device), etc. Surprisingly... check your inbox and you will see how many messages you receive, even from well-known brands, that are still not mobile-ready at all.

#2 - Design uncluttered, focused messages

Mobile-first also means recognizing the super-short attention span that mobile readers typically have. They browse through that inbox at the speed of light. Because of it, focused, uncluttered, minimalist messages often tendto work best. If you have multiple call-to-actions, make sure that those different sections of the emailare visually separated using plenty of white space, different background colors, full-width images, etc.

#3 - Try new things like animated GIFs and real-time content

The growth in email clients that download images by default encourages email designers to bea bit braver. For example, good support for GIF animations means that we can insert a bit of fun in some of our messages (don't do it all the time, and make sure the first frame is a good one: it's shown when the animation is not supported).In the slide below, the gift in this Ann Taylor LOFT email shakes a bit: a cute little animation that definitely catches the eye. See the animation.

And introducing live content like countdown timers, dynamic maps, etc. is now within reach. For example, check out the work by RealTime.Email.

Try new things. Track the results. Keep testing. It's time to be creative.

#4 - Good, old text delivers!

A somewhatcontroversial report by HubSpot found that - according to their data - the click-through rate in an email decreases as the number of images increases. What? Weren't images supposed to help? Well, yes and no, as we'll discuss below. But one thing is for sure: text - when used correctly - works.When I researched the highest performing emails (based on click-through) of all MailUp customers in 2015, one of the best ones was the message shown in the slide below, by an online merchant called ClothingUnder10.com. As you can see, it uses plenty of text...but creatively so.

Using text doesn't mean not using images. In fact, in many cases it is indeed text within an image. Using an image allows you to do things with text that would otherwise be impossible to achieve in an email.

The lesson from the HubSpot study, in my view, is that focus pays off (so we go back to design tip #2). A message with a large amount of images is likely much less focused than one with fewer images. A text-focused email, instead, tends to contain a clear message and call-to-action. And a more focused message appears to perform better (in terms of click-through).

#5 - Email design for ecommerce success cannot stop at the email

The final email design tip is actually not about email. A mobile-first approach to email won't do much good if the rest of the user experience is not mobile-ready. The work cannot stop at the email design level: landing pages, shopping carts, checkout pages, ... you name it. Everything must acknowledge the new, mobile-first reality.

It seems like a basic concept, but anyone that's worked in this space knows how hard it is to connect all the dots. Not surprisingly, Litmus reports that 52% of B2C brands still don't have the entire UX mobile-friendly. Email design for ecommerce conversions cannot stop at the email. It's hard, but it must be a priority.

Recap

Time for a brief recap...

... and then it's time to go have fun designing emails.

To download the full presentation, click here.

See you next year at another email session at Practical eCommerce Ignite.

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!