Are designs mobile-ready (responsive)?
This article applies to both versions of the builder in all plans.
Responsive Email Design and Beefree
We created the builder with two goals in mind:
- allow anyone to design beautiful emails and landing pages
- make those designs look great on mobile devices too
This second goal is one of the reasons why we rebuilt the builder from scratch in 2015: emails created with v1 of Beefree 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 builder, go to this section.
Responsive design is a method used to adapt the way the design is displayed to the device in use. Mobile devices are smaller than desktop or laptop computers, and therefore you need emails (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.
This is a standard design hand-coded with no mobile optimizations.
Here is how it looks in a desktop email client:
And here is the same design opened on a mobile device:
We have exactly the same design in desktop and mobile. Great, isn’t it?
Not really. If you tested the design 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.
Beefree v1 - Adding responsiveness
With the first version of our email builder (Beefree v1) we implemented the most common responsive design best practices, which allowed us to optimize the designs for popular email clients such as iOS Mail, Android Mail, and Windows Outlook.
Here is the same design, built with Beefree v1 and displayed on an iPhone:
Now our design 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.
Beefree v2 - Beautiful and responsive on Gmail too!
With the new version of the Beefree email builder, we completely reworked the HTML code created by the builder so that emails would be fully responsive on Gmail too.
Here is the same email, rebuilt with Beefree 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 design provides a good user experience for both readers.
For those of you that are more technical: Beefree 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 of the email to adapt to the device in which it is displayed, regardless of the technique used to do so.
Design Peace of Mind
Wrapping up... this is what we created Beefree for: design peace of mind.
A builder that gives you the peace of mind of knowing that your marketing or sales colleagues will be able to create beautiful designs, without having to ask for help or hire an expensive consultant. This way you can be confident that those designs will render beautifully on (virtually) all email clients and browsers used by your customers.
If you have any questions, feel free to contact us.