Are designs mobile-ready (responsive)?
This article applies to both versions of the builder in all BEE Pro plans.
Responsive Email Design and BEE
We created the BEE 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 BEE 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 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.
Not responsive
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.
BEE v1 - Adding responsiveness
With the first version of our email builder (BEE 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 BEE 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.
BEE v2 - Beautiful and responsive on Gmail too!
With the new version of the BEE 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 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 design 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 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 BEE for: design piece 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.
Comments
6 comments
مجموعة منصة شليلة الرياض المملكة العربية السعودية
قمر شليله bot
منصة شليله book
قناة شليله
android web etc.
Webمنصةشليلة_Developer_Career_Guide_2019
ar
حقوق النشر والملكية الفكرية منصة شليلة
الرياض المملكة العربية السعودية ص.ب.12813 vip@ihdadi.com
الموقع الإلكتروني
https://pro.beefree.io/525548/506361/projects
Hi, thanks for your comment. Can you please submit your request in English? You can open us a ticket from this link https://beefree.io/get-in-touch/
Massimo, when I run my code created with the BeePro editor through an HTML editor is doesn't appear to be W3C compliant.
Can you give any insight into this. It is causing issues for me when I move my code to a third party sending service. Specifically the Gmail iOS app does not render my emails using the correct media query.
Thanks.
Hi Simon, thanks for reaching out! We've found that, in order to target a large number of email clients successfully, we need to use some coding methods that are not W3C compliant. However, we have made efforts to ensure that the HTML output of the email editor is accessible (more on this can be found in the following community post: https://support.beefree.io/hc/en-us/community/posts/360008107059-ADA-Compliance.) With all that being said, please know that the parser used by the Pages editor is tested for W3C compliance since these designs are expected to be exclusively used on the web.
If you need any help with a specific design that you've created in BEE, please open a support ticket using the help widget inside your account.
When using default row with composite contents like button + text + image. It is showing horizontally align in desktop view but not in mobile view. In mobile view it is responsive. I need same view like desktop. I'll be very grateful if you can help me here?
Hi Ajay. You can use the Do not stack on mobile option. See more in this article. Cheers.
Please sign in to leave a comment.