← Customize 710+ templates for your next newsletter

Design Inspiration

How to create responsive emails: Optimizing your multi-column email design

How to create responsive emails: Optimizing your multi-column email design

Originally published on December 28, 2015. Last updated July 30, 2021.

 

The reign of single column layout is over. It used to be common advice that single-column emails render better on mobile devices. Luckily, responsive design tools like BEE Pro are here to save the day. 

 

It’s true that single-column works best for mobile and that 50% of users check email on mobile devices. But responsive emails show up in the best format no matter which device is used. That means you can design a multi-column email and still be confident that it will render well on both mobile and desktop. 

 

Why is this important? From a graphic design perspective, the single-column email view is pretty boring. Multi-column design takes advantage of F and Z patterns to create a visual hierarchy, rather than creating an endless one-column scroll. 

 

From an email marketing perspective, users are 65% more likely to click through if they open your email on a different device

 

What this means is that emails are opened in different environments by the same user. So you can’t just optimize for mobile or just optimize for desktop. You have to optimize for both. That’s where multi-column design comes in. 

 

Let’s learn more about when to use multi-column design and how to optimize your next marketing campaign.

 

When to use multi-column email layout  

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

 

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

 

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

 

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

multiple columns of chairs in email layout

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

image heavy multi column email template for self-care

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

multiple column email with four CTA buttons

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

multiple column with several links to other content

 

Benefits of multi-column email design 

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

 

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

 

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

 

Wrap up

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

 

 

Our Reader Score:

Total: 1 - Average: 5

Avatar
BEE Team