Workshops

Tutorial: How to optimize multiple-column email design

Tutorial: How to optimize multiple-column email design

Email editors that capitalize on modular template design – like our BEE email editor – give email marketers ultimate flexibility in arranging content in email. Drag-and-drop modules can be rearranged and re-positioned until you’re 100% happy with the results. It’s an intuitive and quick way to design great emails, so we weren’t surprised when we spotted modular template design among Campaign Monitor’s 10 epic email marketing 2016 predictions.

But while it’s easy to design a great email with modular design, it’s not always easy to have a clear plan for how your email should look. One of the big considerations is deciding between a single-column or multiple-column email design. When you choose the right layout for your email, it means your content will be easier and quicker to read—a necessity for capturing the attention of your busy subscribers. So, which email layout works better, single column or multi-column? Get the scoop in today’s workshop.

Why we recommend a single-column email design

Spoiler alert: we generally recommend a single-column email design.

Why? Because in email design, simplicity is everything. Up to 70% of email opens occur on mobile devices. Emails are being read by people with shorter and shorter attention spans—people who are multi-tasking, in the middle of something else, and viewing the message on a mobile device with only a few seconds to spare.

We completely agree with MailChimp’s tip: “Write emails for a distracted audience, make it clear which content is most important, and make it easy to perform calls to action.”

Compared to multiple-column emails, single-column emails are typically…

  1. Easier to read. Single-column emails have a clear hierarchy: they start with the most important content at the top, and there’s only one way to consume the rest of the content as you scroll down. There are no sidebar distractions. You view one module, then the next.
  2. Better optimized for mobile viewing. Multiple columns do not render well on smaller screens, which is why multi-column emails should always be responsive, reordering content into a single column. On a mobile device, our instinct is to scroll. Multiple columns can make content harder to read, forcing a viewer to zoom in.
  3. More focused on a call-to-action. A single-column email is optimal for storytelling, taking readers through each component of the message until there is a clear, obvious call-to-action. This intuitive, sequential nature leads readers directly to your CTA.

Reasons you might use a multiple-column email design

While a single-column design is usually preferred, there may be instances in which you’ll want to use a multi-column email design.

  • To display products. Arranging products on a grid allows you to showcase a lot of items quickly, maximizing the amount viewed above the fold, like in these examples from MAC and General Assembly.

Mac use

 

  • For image-driven email with little-to-no text content. If your email is nearly entirely image-based, and the images don’t require descriptive text, multiple columns might be the optimal layout. Here are two examples from Etsy and CB2.

etsy email

cb22222

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

century 21

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

purewow no ads

Today’s workshop: How to add multiple columns to your email

In last week’s Design Inspiration post about season’s greetings emails, a few of our example emails had a hybrid single- and multiple-column email design. Vimeo did it in their email, putting their featured content at the top, followed by a three-column display of followup content:

vimeo

And, since the email is responsive, the section with three columns rearranges to a single column on smaller devices, so the email looks great on mobile, too:

IMG_3158 IMG_3159 IMG_3160

Why a multiple-column email design could be a good strategy

The hybrid email layout allows Vimeo to have a focused, clear message at the top that leads to a bold call-to-action. It’s effective. But the additional content also gives them a chance to capture more click-throughs from readers who keep scrolling and see something that catches their eye. Plus, that “On Demand” section at the bottom is a recurring component of most Vimeo emails, so it’s in keeping with their template. Most importantly, the design is responsive, so while the three-column layout looks great on desktop, it also collapses into one column on smaller screens, maximizing readability on mobile.

Multiple-column email design in BEE

Step 1: Set up the email structure

Opening the BEE editor, one way to get started with a multiple-column email design is to choose the e-commerce template.

Screen Shot 2015-12-30 at 11.51.48 AM

It’s pre-formatted pretty similarly to the Vimeo email, with a placeholder for a header, central image, then two columns of content:

Screen Shot 2015-12-30 at 12.00.52 PM

But it’s actually really easy to format any email template to alternate between a single and multiple column design. The Structure menu contains six layout options for your email. By dragging in these structures, you can customize your email to alternate between various column layouts:

Screen Shot 2015-12-30 at 12.11.07 PM

If I were to start the Vimeo email from scratch, I’d pull in a single column structure, followed by the three-column one, like this:

Screen Shot 2015-12-30 at 12.13.00 PM

Step 2: Populate the structure with corresponding content placeholders

Once my basic structure is in place, I can populate each section with the content placeholders I need. To understand the content that will go in each section—the single column and then the three-column part—we marked up the original Vimeo email with each content type:

vimeo markup

Now we can pull in each of these content types into our email structure. Here’s how it looks:

Screen Shot 2015-12-30 at 12.28.03 PM

Step 3: Add the email content and format

With everything in place, now it’s just a matter of pasting in my text, adding my images, and then formatting the font sizes and colors and the padding between structures. I like to start at the top and work my way down:

Screen Shot 2015-12-30 at 12.36.26 PM

Almost there…

Screen Shot 2015-12-30 at 12.50.33 PM

And once it’s all formatted…

Screen Shot 2015-12-30 at 12.57.07 PM

…I’ll check out the email in preview mode so I can make sure my columns rearrange appropriately on mobile:

Screen Shot 2015-12-30 at 12.55.25 PM

Screen Shot 2015-12-30 at 12.55.58 PM

Voilà! Works just as it should. It’s a totally responsive multiple-column email, and we put it together with no coding required. A layout like this could be a great option for content-heavy, image-driven emails. If you give it a try, let us know how it works out. The BEE email editor is free, online, and requires no registration.

Our Reader Score:

Total: 0 - Average: 0

Kelly Shetron