search

foundation / foundation-emails

Quickly create responsive HTML emails that work on any device and client. Even Outlook.
https://get.foundation/emails/docs/
MIT License
7.77k stars 1.09k forks source link

Layout break - content overflows container in Yahoo iOS (& Android) app #681

Open zebulonedwardbubbel opened 7 years ago

zebulonedwardbubbel commented 7 years ago

I've tested builds of the marketing and sidebar-hero f4e responsive email templates on Yahoo's iOS and Android apps, but the anomaly affects other templates too.

The flow content on the Yahoo iOS app spreads beyond the limits of .container, .wrapper-inner & wrapper elements in mobile view, as you can see below:

img_0046 img_0047 img_0048 img_0049

If the media query rules are embedded in the \<body> instead of \<head> (according to this Litmus community discussion: https://litmus.com/community/discussions/5836-yahoo-app-no-longer-responsive#comment-9435), the same behaviour is observable on Yahoo's Android app too.

markadrake commented 7 years ago

You are suggesting that the media query rules be injected in the body of the HTML instead of head based on the discussion in the Litmus community?

Is there any official word from Yahoo about this regression and if it was on purpose? I'm not aware of an official communication channel for the dev team there.

If it's purposeful, we should try updating it to put the styles into the body of the content and see if there are any issues in this change with other email web and native apps.

Interesting tidbit I learned today - parts of gmail now use embedded css. From Litmus.

zebulonedwardbubbel commented 7 years ago

Correct, I simply found that the style rules embedded in the head are totally ignored by the Yahoo mobile apps, but when I put the styles in the body, they are not neglected. Then I read the discussion cited above which confirmed my test results. I haven't any official information from Yahoo about this issue either. Furthermore, I think that to put the <style> in the body would be counter-intuitive and unsuitable as the right direction should be to embed styles the standard way (in the head). Anyway, I tried to point out that the email templates built with the Foundation for Emails 2 framework break on these clients, but I couldn't find the exact reasons and solve this problem.

markadrake commented 7 years ago

I've submitted a suggestion at UserVoice for Yahoo. This is the only way I know to even send a question to them and get any response. Feel free to help vote it up, or add to the discussion there. Maybe Yahoo will see it and respond.

I agree it's not the ideal situation - but what about writing HTML emails has been ideal? If a good amount of your subscribers / users / mailing list use Yahoo - and Yahoo strips the styling information from the <head> element, that's a good case for making the switch. Ultimately - I hope that Yahoo responds and reverts this change.

Update:

Yahoo has recognized the issue and it's been updated to "gathering feedback". I think it would be helpful for people to jump into the conversation. Thanks!

zebulonedwardbubbel commented 7 years ago

I think it worth to mention this workaround presented by Ben Wakeford in the Foundation Forum: http://foundation.zurb.com/forum/posts/50821#comment_37118

davehoran commented 7 years ago

@markadrake "but what about writing HTML emails has been ideal? " -- agreed. lol