Are designs mobile-ready (responsive)?

Comments

21 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
  • Garth .
    Garth .

    Hi there, I am also having the same problem as mentioned above. When using the Beefree 'send test / email preview' button to either of my gmail or outlook accounts, the message itself looks exactly as it does on the editor both on desktop, but also shows the correct mobile version on both email accounts when viewed on my phone as well.

    But then when I use the account connectors to export the email to either gmail or outlook and then send the email from one of those accounts, the formatting differs greatly from the way I had designed it in the Beefree editor, and the mobile version is nowhere to be seen.

    As I have read above, it appears to be the esp / email clients that alter the code and break the mobile responsiveness, as well as make unwanted changes to the desktop version in some cases. If this is the case, and gmail and outlook are responsible for this, are you able to recommend an alternative email client that may prevent this from happening? For example - provided that it is not secret information - what email client does Beefree use for sending the email test / previews? I only wonder because like I said above, these appear to be the only versions that look exactly the same as the version in the editor, and the email tests also work for both desktop and mobile, even when viewed in both gmail and outlook accounts. 

    I spent quite some time designing an email in the editor, only to find out that it doesn't really work as intended yet due to this issue. I'd hope to get this problem resolved before committing to a paid plan as I do really enjoy using the platform, and it works great in the editor. I look forward to hearing back and offer thanks in advance for any help.

    0
  • Marianne Madsen
    Marianne Madsen

    Hi Garth, 

    Thanks for sharing your question with the community!

    If you're concerned about mobile responsiveness, my recommendation - other than simplifying your email layout - would be to use a professional email-sending platform to send your messages instead of an email client, as these types of services will not strip this sort of code from the HTML. If you're interested in this, I recommend you start by reviewing our list of currently available connectors to see if any might suit your needs. (Please keep in mind that the list includes both ESPs and email clients, however).

    Please note that many of these ESPs operate on a subscription basis, but some of them also offer free accounts, e.g., Mailchimp, if that is a concern you have.  

    I'm actually not sure if I can share which email-sending tool we use for our test emails, but I can confirm that we're using a professional ESP and not an email client like Gmail or Outlook.

    I hope this information is helpful! Please let us know if you have any further questions. 

    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