Are designs mobile-ready (responsive)?

Comments

19 comments

  • Simon
    Simon

    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.

    0
  • Willow Elliott
    Willow Elliott

    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.

    0
  • Ajay Negi
    Ajay Negi

    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?

    0
  • Melania
    Melania

    Hi Ajay. You can use the Do not stack on mobile option. See more in this article. Cheers.

    0
  • Maria Plekhanova
    Maria Plekhanova

    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.

    1
  • Melania
    Melania

    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. 

    0
  • Marge Plasmier
    Marge Plasmier

    Is there an update on the responsive gmail issue?

    0
  • Marianne Madsen
    Marianne Madsen

    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. 

    0
  • David Mendez
    David Mendez

    Hi, I still have the same problem, what can I do to fix it???

    1
  • Logan
    Logan

    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!

    0
  • Sarah Taylor
    Sarah Taylor

    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!

    0
  • Roisin  Grieco
    Roisin Grieco

    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.

    0
  • Roisin  Grieco
    Roisin Grieco

    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. 

    0
  • Tara Landry
    Tara Landry

    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.

    0
  • Marianne Madsen
    Marianne Madsen

    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? 

    0
  • Frederic Abecassis
    Frederic Abecassis

    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.

    0
  • Logan
    Logan

    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:

    • Heavily formatted text: If your design is text-heavy, start with plain text and don't apply any formatting until all text is in place. 
    • Using the hide-on desktop/mobile feature: Try creating a single design optimized for any device. Hiding content creates conditional statements and often requires duplication of content as well. This can result in a large HTML file.
    • Adding new rows for each content block: When possible, stack content blocks inside of the same row.  
    • Frequent use of dividers: Use padding in place of dividers to cut down on the HTML footprint for your design.

    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!

    0
  • Christopher Ellis
    Christopher Ellis

    Hello, I am having the same issue as all the others above have noted, the mobile view appears great in beefree, where two columns stack properly on top of eachother.  But then when I send in Gmail and view the email on mobile it appears the same as the desktop version but all squeezed together and not stacked.

    Any suggestions?  I'm following all of @logan's suggestions but this is still an issue.

     

    0
  • Marianne Madsen
    Marianne Madsen

    Hi Christopher, I see you're on a Professional plan, so I've submitted a support ticket on your behalf so we can get some more details about the rendering issues you're seeing here. Please keep an eye out for an email from me!

    I want to note that if you're using Gmail to send your emails, it's important to keep in mind that Gmail will actually strip some of the syntax used to generate the source code for your design. Most noticeably, Gmail removes all mobile-responsive rules in the code, which causes your email to always display as the desktop version.

    You can read more about Gmail's limitations in the following articles: 

    0

Please sign in to leave a comment.

Trial

Cut down on email & page production time, keep everything organized, and enjoy the fantastic design flexibility of Beefree.

Start a free trial

No credit card required