Are designs mobile-ready (responsive)?
BEE Pro becomes Beefree
We're still the same design suite you know and love, just with a new name. Our team is working hard to update our documentation, but you might still see some information or screenshots that are out of date.
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.
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.
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.
Technically Speaking
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.
Comments
19 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.
Hi, I have some problems with responsiveness... The mobile version looked great in the preview, but when I sent a test email to my email, it had the desktop view, which isn't right. I'm viewing it from the Gmail app on my iPhone. Could you please help me understand what's wrong? I really appreciate any help you can provide.
Hi Maria, thanks for your comment. We are aware of this behavior and our Dev Team is working to fix it as soon as possible.
Is there an update on the responsive gmail issue?
Hi Marge; thanks for posting here. The particular issue that was discussed here recently has been resolved by our dev team. If you're seeing issues with Gmail and design responsiveness, we're happy to investigate this further.
It looks like you're using a BEE Pro Team plan, so I've gone ahead and created a ticket on your behalf to get some more information about the issue you're experiencing. I hope that's OK. Please keep an eye out for a ticket from the BEE Support team.
Hi, I still have the same problem, what can I do to fix it???
Hi David! Thanks for being a part of the BEE Pro community; we're happy to have you.
As my colleague Marianne previously mentioned in their comment, this issue was previously resolved by our development team, however, if you're continuing to experience this issue, I'll be happy to assist further!
It looks like you're trialing our BEE Pro Team subscription, so to obtain more information that could be potentially sensitive, I'm going to create a support ticket on your behalf to continue this conversation. Keep an eye on your email inbox from our BEE Support team.
Talk soon!
Hello! I am having the same issues others have mentioned with gmail - the responsiveness does not seem to be working. It looks good in the mobile preview, and even when I send myself a test email. However when the email is actually sent through gmail, the version is the same on desktop and mobile. Thanks for your help!
Hello Sarah, and thank you very much for your comment.
I did some testing on our side, and I was able to recreate the issue, which I reported to our developers.
They are now studying a fix for it, but unfortunately, I can not provide an ETA on when it could be released.
Hello Sarah,
I have heard back from our developers, and, unfortunately, this is Gmail behaviour: It strips away media queries upon sending the designs.
As we cannot apply a fix that could work on our side, we advise not to create large messages and to use no more than two columns when sending with Gmail.
I’m sorry I do not have better news.
I'm having the same experience and I'm assuming there hasn't been any resolution in 23 days? Mine is a little different though. I have an Apple and it does not format for mobile at all, which is bad. My husband has an Android and it just looks super funky like everyone else has stated. If this is a gmail issue, how are other emails I receive doing it? I get a hundred emails a day and they all look great. I love this software program but I don't get it.
Hi Tara, I'm really sorry to hear about your rendering issue here.
To better understand what's happening in your situation, could you let me know if you're seeing these mobile issues when you're sending your email through Gmail - or if it also happens when you're sending the same design as a test from Beefree?
I have same problems with responsiveness when trying to send through Gmail or through Outlook though it is looking good in mobile preview within the BeeFree app or when sending a test mail through BeeFree.
Hi Frederic, thanks for reaching out regarding this issue; I'm happy to chime in here with some additional information (as well as some that may have previously been communicated by my colleagues Roisin and Mariane).
Unfortunately, both Gmail and Outlook have many limitations as an email client. Most notably, it ignores mobile responsiveness. To make the most out of the Gmail and Outlook integrations, we suggest keeping your design simple and in a single column.
Note that Gmail also will "clip" your design if the HTML file is over 102KB. This can happen regardless of how the email is sent, so be mindful of the size of your exported design. While our HTML parser will reduce the size of the file, some elements may increase the HTML footprint. Below, I've provided some common causes of this issue and how to avoid them:
I hope this information is helpful when designing with both Gmail and Outlook users in mind. However, if you have any follow-up questions that haven't been answered here, feel free to respond, and we'll gladly assist further!
Please sign in to leave a comment.