Mobile version displayed in some clients

[rgbjay]

In my Litmus testing I found that in:

Polymail Outlook Web App

The columns that were meant to be 50% width were stacking as 100% columns.

[arnaudbreton]

Hi @rgbjay, thanks for reaching out!

About the first 4 clients, we'll run some test to understand better what's going on here.

About Google Apps, please refer to #24. It seems that there is some versions of it out here which render things in a wrong way. So far we haven't managed to reproduce it on our own Google Apps (or Gmail) accounts but still looking for new cases, if you could add details about yours into the list.

Keep you posted on our progress.

[epayet]

I have the same render issues using Litmus as well. These desktop clients are showing a mobile version :/

Edit: I would also add outlook.com and office365, they have the same behaviour, showing mobile version on desktop. This might be related to screen sizes?

[VinceVachon]

+1

[strukturedkaos]

Has anyone figured out a workaround for this issue in the meantime?

[arnaudbreton]

Hey guys, sorry for the delay in the answers here.

After digging into that issue, it turns out the Outlook Webmail 2016 behaviour won't allow us to support both and desktop and mobile render. For that reason, we decided it would be better for MJML users to go for the mobile rendering, leading to a great render on mobile devices and still decent one on desktop.

About Google Apps, we still haven't figured out what is the exact reason of the issue for some versions of the client. Please watch #24 to get the last updates about this issue.

Apologies for the inconvenience!

Closing this issue for now.

[iRyusa]

Updated the issue to close some

[g0ddish]

I can reliably reproduce the Google Apps for Business desktop rendering emails displaying as mobile and non apps for business where it renders as expected. I may take a deeper dive when I have more free time. Does anyone else have more information regarding this bug? http://imgur.com/pELSirr

[g0ddish]

Ok, I found a CSS rule that is being passed to regular gmail but not business apps. It looks like a style tag is being passed in one but not the other which is odd because I was under the impression that gmail strips all style tags from all emails.

Offending div Css belonging to div

MJML try it live

So this second style tag wasn't stripped from regular gmail but was from business; maybe this is an issue with gmail?

<style type="text/css">
  @media only screen and (min-width:480px) {
    .mj-column-per-50, * [aria-labelledby="mj-column-per-50"] { width:50%!important; }
  }
</style>

[iRyusa]

Closed by mistake, reopened sorry

@g0ddish Yes, media queries are being totally removed from google apps gmail for unknown reason :/

[dalefish]

Same issue here with the early versions of outlook (lte 2003) showing single column.

[lRlevolution]

I've found a dirty solution to change the % of the column from 100% to lets say 300px or whatever the column width is

for example:

<div aria-labelledby="mj-column-per-50" class="mj-column-per-50" style="vertical-align:bottom;display:inline-block;font-size:13px;text-align:left;width:300px;"> where 300px was originally 100%;

So far it works for everything but Lotus Notes 8.5 and Outlook 2003.

[iRyusa]

@lRlevolution but it will break the mobile first approach sadly

[iRyusa]

Update: We're waiting for #227 to be merged to suppport Lotus Notes 8.5, Outlook 2000, Outlook 2002, Outlook 2003

[iRyusa]

Update removing older outlook since 2.1.1 got fix for them Outlook 2000 Outlook 2002 Outlook 2003

[Tlapi]

This issue also affects major inbox provider in Czech republic Seznam.cz with @email.cz, @seznam.cz, @post.cz)

[Tlapi]

My solution:

Replace attrs on mj-column with pixels if there is more than 1 column.

Add this media query:

@media only screen and (min-width:480px) {
    .mj-column-per-100, * [aria-labelledby="mj-column-per-100"] { width:100%!important; }
.mj-column-per-50, * [aria-labelledby="mj-column-per-50"] { width:50%!important; }
.mj-column-per-33, * [aria-labelledby="mj-column-per-33"] { width:33%!important; }
  }
@media only screen and (max-width:480px) {
    .mj-column-per-100, * [aria-labelledby="mj-column-per-100"] { width:100%!important; }
.mj-column-per-50, * [aria-labelledby="mj-column-per-50"] { width:100%!important; }
.mj-column-per-33, * [aria-labelledby="mj-column-per-33"] { width:100%!important; }
  }

Tested on EOA, works great on every device.

Just a minor issue is that 3 cols get stacked as 2 + 1.

[iRyusa]

I don't really understand your point @Tlapi :

@media only screen and (min-width:480px) {
    .mj-column-per-100, * [aria-labelledby="mj-column-per-100"] { width:100%!important; }
.mj-column-per-50, * [aria-labelledby="mj-column-per-50"] { width:50%!important; }
.mj-column-per-33, * [aria-labelledby="mj-column-per-33"] { width:33%!important; }
  }

is what MJML is generating, right ?

You're adding this:

@media only screen and (max-width:480px) {
    .mj-column-per-100, * [aria-labelledby="mj-column-per-100"] { width:100%!important; }
.mj-column-per-50, * [aria-labelledby="mj-column-per-50"] { width:100%!important; }
.mj-column-per-33, * [aria-labelledby="mj-column-per-33"] { width:100%!important; }
  }

But every column already have a width of 100% by default so I don't understand why you want to add them ?

[Tlapi]

@iRyusa Yes, that's why in some cases you see mobile version on desktop. That's why i have replaced mj-column width attribute with pixels, if there is more than one column. If there is only one column, it remains 100%. And I'm adding:

@media only screen and (max-width:480px) {
    .mj-column-per-100, * [aria-labelledby="mj-column-per-100"] { width:100%!important; }
.mj-column-per-50, * [aria-labelledby="mj-column-per-50"] { width:100%!important; }
.mj-column-per-33, * [aria-labelledby="mj-column-per-33"] { width:100%!important; }
  }

For our products-heave newsletters we cant allow to get all the content stacked in one column on the desktop.

[iRyusa]

So you're removing width: 100% on mj column but adding them with a media query. Problem is most of mobile clients doesn't support media queries and will be completely unreadable ?

[Tlapi]

No, it will stack anyway ;-)

Only thing is that 3 columns get displayed as 2 + 1

I'll post a EOA test result.

[Tlapi]

https://www.emailonacid.com/app/acidtest/display/summary/QGxXVnhYvmovkzLbl6fNKVbHZ4LtZk3dNZWiBfOyl68ch/shared

[Tlapi]

On a clients with poor css support it gets stacked bud its not pixel perfect. There are some glitches.

But i prefer this solution over the one where you see mobile version on desktop.

[iRyusa]

As expected the render on gmail Android is broken https://www.emailonacid.com/app/acidtest/display/result/QGxXVnhYvmovkzLbl6fNKVbHZ4LtZk3dNZWiBfOyl68ch/72/shared/ 3 column and 4 columns should appears as stacked not like that

[Tlapi]

Yes, that's what i was talking about. On Android Gmail:

3 columns goes as 2 + 1 4 columns goes as 2 + 2

I'm okay with that. I don't mean it as this should be released, but maybe this could be an option. Something like fixedwidth="true"

In here, we have like 50% of our recipients on a webclient which is rendered as a mobile on desktop (like gmail for bussiness) right now. So this solution suits us better.

[gad2103]

this is not working on gmail in the browser either. columns are completely broken. it looks like the media query rules are ignored completely. even if i move them into the mobile query

all of the solutions of editing the generated html are hacks that make it hard to maintain the markup since you have to edit it every time you run mjml...

is there any progress on this?

[iRyusa]

@gad2103 Are you 100% sure you're using gmail and not google apps gmail ? Columns are fine in my personal gmail inbox

[gad2103]

stupid question... how do i know?

On Thu, Jul 14, 2016 at 5:03 PM, Maxime Brazeilles <notifications@github.com

wrote:

@gad2103 https://github.com/gad2103 Are you 100% sure you're using gmail and not google apps gmail ? Columns are fine in my personal gmail inbox

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/mjmlio/mjml/issues/40#issuecomment-232791705, or mute the thread https://github.com/notifications/unsubscribe/AA_zERPN8EbB4sQbM5TMiToDGaGTSIPJks5qVqQWgaJpZM4HXZXx .

[image: photo] Gabriel Duncan Developer, co{de}signed p:347-829-7122 | e:gad2103@gmail.com

DISCLAIMER: This is a notification that this email is automatically return receipt enabled. Upon opening this email, notification is sent to the sender confirming that it has been viewed.

[iRyusa]

Is it your personnal gmail account, or a "company" account

[gad2103]

oh man. its a company account. why?!!! this is so annoying. i'm using an ugly hack to get around this. sorry. i'm just repeating known issues...

[iRyusa]

Edited: added Outlook Web App via #335

Note that Outlook Web App behaviour is shared on mobile and on desktop, we can't support both due to lack of media query support. We prefer to show the mobile version in desktop instead of desktop version in mobile to be more consistent with the other clients

[iainvdw]

@iRyusa: This may have been reviewed already, but this technique does not require media queries for responsiveness: http://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries--cms-23919.

As far as I see it, the problem with these mailclients is the lack of support for media queries which comes with MJML to add responsiveness. Would it be possible to research this approach for responsiveness?

[iRyusa]

I think it could be used, but it looks to have a big impact. We might consider it, but we need to fully understand it and see if all current features could be used with this technique

[patrickml]

Any updates on a fix?

[iRyusa]

@patrickml no trick has been found yet to have "media queries" like for google app gmail.

[g0ddish]

Hey everyone, exciting times for gmail! I haven't done any testing yet but this was announced

[iRyusa]

Hope they'll update both inbox and google apps gmail too

[Tlapi]

"The update actually includes a number of similar but distinct email clients: Google’s three webmail clients Gmail, Inbox, and Google Apps, Gmail on iOS and Android, and Inbox on iOS and Android."

[ngarnier]

Good news, as responsive design is being rolled out by Gmail, the mobile version is already not displayed anymore on Inbox. Hopefully the others will follow quickly!

Updating the list

[iRyusa]

Updating Google Apps name to G Suite ... still no support for media queries / aria hack here

[robsonsobral]

Until some days ago, my coworker never saw this bug on GoogleApps. Now, she sees.

[ngarnier]

Following feedbacks and Litmus tests, it seems the G Suite update was generally rolled out which means the desktop version is correctly displayed, I updated the list of email clients.

@robsonsobral, can you confirm it's fixed for your colleague too?

[robsonsobral]

@ngarnier , I'm sorry about the delay. We've been really busy.

Not only it isn't fixed, as now she sees the mobile version even on GMAIL.

[ngarnier]

Hi @robsonsobral, that's really surprising as it's the opposite of what we've seen. Could you please open a dedicated issue with all the information needed (you can follow this guide as an inspiration).

[robsonsobral]

Can you send me (and her) the test you're using?

I gonna check the code she is using too, before to open a new issue.

[ngarnier]

Hey @robsonsobral, here is the example with 2 columns: MJML:

<mjml>
  <mj-body>
    <mj-container>
      <mj-section>
        <mj-column>

          <mj-image width="100" src="https://mjml.io/assets/img/logo-small.png"></mj-image>

          <mj-divider border-color="#F45E43"></mj-divider>

          <mj-text font-size="20px" color="#F45E43" font-family="helvetica">Left column</mj-text>

        </mj-column>
        <mj-column>

          <mj-image width="100" src="https://mjml.io/assets/img/logo-small.png"></mj-image>

          <mj-divider border-color="#F45E43"></mj-divider>

          <mj-text font-size="20px" color="#F45E43" font-family="helvetica">Right column</mj-text>

        </mj-column>
      </mj-section>
    </mj-container>
  </mj-body>
</mjml>

You can see that the columns are displayed properly: Gmail:

Google Apps / G Suite:

[robsonsobral]

Please, @ngarnier , forgive my delay. We were really busy here.

Your test works fine. Our code, doesn't. So, it's probably our fault. I gonna debug it.

Thank you for your patience.

[dmchoull]

If you're experiencing this issue and you also happen to be using Rails with the premailer-rails gem, you need to disable it for mjml generated emails by passing the skip_premailer: true option to mail, as described in their docs here.

[boligolov]

I have the same issue. Columns, that were meant to be 50% width were stacking as 100% columns. This issue shows only in webmails - Yandex, Mail.ru, GMail and etc.

The solution is simple: insert in rendered inline div style 'max-width: ;' property. This will solve the problem and will not break in a mobile version.

I modified /mjml-column/lib/index.js to do this. So, It is necessary to make a pull-request, but I can do it much later, because using old version 3.1.1 :(

Solution spend in Email on Acid.

[iRyusa]

By doing so you'll break the mobile first approach, I don't think this is a viable solution. How do you send your email ? @boligolov

From what we test it looks like G Suite is now behaving correctly ? I'm not sure about Yandex & Mail.ru because it's not in our scope of testing.

[boligolov]

Letters sended from Thunderbird (insert HTML) and from mass-mailling service UniSender. I tested letters in native Android-applications (gmail, mail.ru, yandex), in Android Chrome browser and they shows correctly... some issues has only Yandex mail client - version from Thunderbird and UniSender displayed differently. The rest of the letters are displayed correctly, but, of course, it must be seriously tested :)

I'll test new version and say, how is behaving.

Thank you for such a quick response! :)