How to Apply Design Simplicity in Email

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:

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:

One of the most 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.

General Assembly email design simplicity

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, or open BEE at https://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 launch the BEE editor.

ScreenShot1331

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.
ScreenShot1332
If you start with another template or from a blank message, simply use the structure panel to drag and drop a 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.

Email simplicity workshop structure

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 the BEE editor. For example, to build a 2-column structure, you have a choice of predefined structural elements that organize content in two columns.

ScreenShot1334

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.

Email simplicity workshop: the title

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.

Email simplicity workshop: adding images

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.

Email simplicity workshop: the text blocks

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 useful design 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:

ScreenShot1315

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.

iphone_ga_email_view

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 editors automatically 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, our replica of the message switches automatically to a one-column layout and looks much better on mobile:

www.GIFCreator.me_bcdpog

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 additional work. If you decide to use the same font 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:

ScreenShot1299

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!

ScreenShot1301

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.

ScreenShot1300

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:

ScreenShot1302

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

ScreenShot1313

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.

ScreenShot1310So, 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:

ScreenShot1314

As you can see, with an editor like BEE, 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!

  • Pingback: Email Design Workshop: lasciati ispirare e impara con post, rubriche e video tutorial()

  • Pingback: Email Design Workshop Blog: déjate inspirar y aprende | Blog MailUp()

  • Nur Hakeem

    What is the size of the header? I can’t seem to click on fit image width :/

    • mailupinc

      Hi Nur, if you want to change the overall width of the content area shown on a desktop client (the width automatically becomes 100% on a mobile client), then you need to change the “Content area width” in the “BODY” panel. That panel contains settings that apply to the entire message. Hope this helps!

      • Nur Hakeem

        That button however, is jammed. I can’t move it :/

        • Hi Nur, thanks for trying this out in the BEE email editor!

          It takes a bit of practice to see how to adjust the width. But once you find out how to do it, it becomes really easy to do. There are two ways to adjust the width:

          Full message width: you can set the body width to, say, 500 px wide of your message. This is found under the BODY tab in the top right menu in the General options section. Once you set this general setting all your headings will have the same width (i.e you can’t adjust the heading width as you showed above).

          Image width: you can edit and resize your images. You can choose the “adjust to width” option (screenshot below) to resize your image to the message width (in this example 500 px).

          So, to answer your question, you’ll have to first establish the full message width and/or then edit or resize your image.

          • Nur Hakeem

            Thanks so much Sergio 😀 Really helped!

          • Nur Hakeem

            Yikes. Help? Attached is the screenshot. I get it that adjusting the body width adjusts the whole thing. But I can’t seem to be able to click the adjust to width part. It says “This content cannot be edited.” :/

Design Beautiful Emails in the BEE Editor

Give it a try! Design stunning, fully responsive emails in our easy-to-use, drag-n-drop BEE editor. No HTML or CSS coding knowledge required. What more? It's free and online!

Take me to the BEE email editor