Are email messages mobile-ready (responsive)?

Responsive Email Design and BEE

We created the BEE email editor with two goals in mind:

• allow anyone to design beautiful emails
• make those messages look great on mobile devices too

This second goal is one of the reasons why we rebuilt the editor from scratch in 2015: emails created with v1 of the BEE editor looked good on many mobile devices, but not all of them. Specifically, there were some issues on Gmail (which is a particularly tough email program to deal with for many reasons).

What Responsive Design Means

If you are a technically savvy email designer and want to get right to the details of the design techniques used by the BEE editor, go to this section.

Responsive design is a method used to adapt the way the message is displayed to the device in use. Mobile devices are smaller than desktop or laptop computers, and therefore you need email messages (or web pages) to adapt to the different width. When this happens, the text becomes easier to read, buttons and links are easier to click on, and images become as wide as the device allows them to be.

Things are more complicated in email compared to the web because, instead of a few browsers that are increasingly complying with shared standards, we are dealing with a vast array of email clients (Outlook, Gmail, AOL, etc.) that don't appear to like following a common standard at all.

More and More Responsive

Let's look at how responsive design works in email.

Not responsive

This is a standard message hand-coded with no mobile optimizations.

Here is how it looks in a desktop email client:

And here is the same message opened on a mobile device:

We have exactly the same message in desktop and mobile. Great, isn’t it?

Not really. If you tested the message on a mobile device you would notice how hard it is to read (text too small), how difficult is to click a button or a link (too small for the finger to click on it)... and you'd find yourself needing to zoom in all the time. Not an ideal situation.

BEE v1 - Adding responsiveness

With the first version of our email editor (BEE v1) we implemented the most common responsive design best practices, which allowed us to optimize the messages for popular email clients as iOS Mail, Android Mail, and Windows Outlook.

Here is the same message, built with BEE v1 and displayed on an iPhone:

Now our message is not only beautiful but easy to read on many mobile devices.

But not when we use Gmail on our phone:

Gmail does some things somewhat differently, driving email designers nuts along the way. The most common techniques - using what are called "media queries" - don't work.

Since Gmail is extremely popular, however, we needed to find a solution.

BEE v2 - Beautiful and responsive on Gmail too!

With the new version of the BEE email editor, we completely reworked the HTML code created by the editor so that email messages would be fully responsive on Gmail too.

Here is the same message, rebuilt with BEE v2 and sent to Gmail:

The result is a readable email, with buttons and links that are easy to click on and no horizontal scrollbars.

As you can see, there are some differences between this version and the one shown in other mobile clients: images don’t use 100% of the screen width, and sometimes on larger devices, some of the design elements are rendered a bit differently.

This is caused because we need to use 2 different approaches, one for Gmail and another one for all the others.

Still, the message provides a good user experience for both readers.

Technically Speaking

For those of you that are more technical: BEE v2 uses the fluid hybrid design technique, enhanced by media queries.

• Hybrid fluid design allows responsiveness across email clients, including the Gmail app.
• Media queries allow us to add additional design optimization on those email clients that support them.

For more information on these topics, see for example:

• Email On Acid: A Fluid Hybrid Design Primer
• Litmus: understanding hybrid and responsive email design

Note that in the email design world, the term "responsive design" is often strictly associated with the use of media queries.

On this website, however, we talk about "responsiveness" in a more general way, referring to the ability to the email message to adapt to the device in which it is displayed, regardless of the technique used to do so.

Email Design Peace of Mind

Wrapping up... this is what we created BEE for: email design piece of mind.

An email editor that gives you the peace of mind of knowing that your marketing or sales colleagues will be able to create beautiful messages, without having to ask for help or hire an expensive consultant. This way you can be confident that those messages will render beautifully on (virtually) all email clients used by your customers.

Tell us what else you need, and we'll make BEE even better.