Menu icon Foundation
Confused about breakpoint for emails and email client support list

I'm a bit confused about why Foundation for Email (v2.2.0) is setup to style for the large breakpoint first, with the mobile breakpoint relying on media queries. Shouldn't it be the other way around? Shouldn't we be designing mobile first and setting override styles for desktop/larger screens only if supported (progressive enhancement)?

Or am I missing something here?

Also, in the Foundation for Email docs, the compatibility chart seems very misleading.
It only shows one note about media queries not supported in Gmail App for Android, but media queries aren't supported in many other clients.

emailmedia queriesbreakpointsMobile FirstFoundation for Emailffe

I'm a bit confused about why Foundation for Email (v2.2.0) is setup to style for the large breakpoint first, with the mobile breakpoint relying on media queries. Shouldn't it be the other way around? Shouldn't we be designing mobile first and setting override styles for desktop/larger screens only if supported (progressive enhancement)?

Or am I missing something here?

Also, in the Foundation for Email docs, the compatibility chart seems very misleading.
It only shows one note about media queries not supported in Gmail App for Android, but media queries aren't supported in many other clients.

Corey Schaaf almost 3 years ago

Adam, 

That seems to be a point of confusion for a lot of people (myself included initially). However media queries are the only way to make something truly responsive and not creating multiple pieces of content for the same email.  (ie a desktop design vs a mobile design where the mobile design is hidden on desktop and vice versa for the other)

The reason it sets the largest break point first is that the framework (other's like it) is a desktop first approach. This however doesn't mean you abandon the mobile first mentality. What this means is setting up the email how you want it to look on desktop and then for the clients that support media queries re-flow your content.

Yahoo and Gmail (some major players in the email community) still don't support media queries.  Your approach would mean that a mobile version of the email would show up for more than 20% of the desktop users out there based on numbers from litmus.  That's not necessarily a bad thing since about 56% of emails are now opened on phones, but it's more than likely a decision that Zurb probably went with thinking that eventually the giant elephants in the room (mainly gmail) would support media queries in the future. 

Regarding your note about compatibility. The chart isn't there to say that all these clients support the responsive framework, it's to show that the code base will render correctly regardless of media query support. For the ones that do support media queries, you can take advantage of the framework and send out mobile versions of the email while not breaking in the ones that don't. 

 

Adam almost 3 years ago

Thanks so much for your detailed answer Corey. I appreciate it.

I guess I'll have to trust in Zurbs decision on this one as I'm sure they know better than I do :). But it still feels wrong not to build for the lowest common device and progressively enhance for those that support it - especially since email opens on mobile are rising.

If their decision is based on the hope that Google will soon add media query support then I'd say that's wishful thinking.
None of Gmail's clients support media queries - even the latest Inbox App - so they obviously have a good reason for doing this and I doubt that's going to change any time soon.
We need to accept that and work in the here and now.

 

Regarding the Compatibility Chart, FFE is a framework for building responsive emails:

"Use Foundation for Emails to design responsive HTML emails that work in any email client."

so the compatibility info is assumed to represent support for responsiveness and therefore it's misleading.
On top of that they make a special note in this chart about media queries not being supported in the Gmail App on android, so this further implies it's a chart for responsive support.

Perhaps Zurb can add a column indicating Media Query support as well to help clarify this.

Rafi Benkual almost 3 years ago

On the compatibility chart it reads 

 

*Gmail app for Android: Works - does not recognize media queries so it will render large breakpoint.

It was really odd whenI first learned Gmail didn't support media queries. Then I learned it strips out the head tag so you need to inline CSS. Gmail is one of the most challenging clients in terms of workarounds needed.

There is something called a spongy grid which claims to work on Gmail mobile. It's complicated to use and doesn't offer the control the Foundation grid does. 

These are just some of the challenges we all face developing emails!

Corey Schaaf almost 3 years ago

I understand where you're coming from.  But I think it's difficult to design for the lowest common denominator (Gmail) when they hold the number 2 and 4 spot for market share with desktop clients and android gmail. 

When you're least common denominator doesn't support media queries, and is also still very popular, there isn't a lot you can do.  

Adam almost 3 years ago

Doesn't that make it more important to design for Gmail/mobile/non-media query first and progressively enhance for others?

 

Note: I'm not trying to force my opinion here to be the correct one - just trying to understand Zurb's decision here so I can be better informed.

Would be great to see a blog post from Zurb with the stats and reasons behind their decision to reverse the process from that of FFS... or perhaps there is already info on this that I'm not aware of?

Corey Schaaf almost 3 years ago

Foundation for Sites deals with Webpages. And webpages use browsers which support media queries (modern browsers that is). That's not the case with emails. Emails are still designed with prehistoric table structure because of Outlook and various other clients that refuse to get with the times. 

If you look at the code that rafi posted for the spongy approach - you'll see that while possible - there's even caveats to using that approach.  You're asking for Zurb to come up with a technology or way to do something that isn't supported by an  email client they have no control over. That's like saying we really like the flying car you've built - but is there a way for your flying car to influence other cars to fly? We know you didn't build those other cars - but figure it out. 

Of the eight emails clients I've listed, 3 of them account for 50% of all email client marketshare.  Just Three! 

1. Apple Mail 33% of marketshare that understands media queries

2. Gmail 16% of marketshare (doesn't understand media queries)

3. Apple Ipad 11% of marketshare (understand media queries - but is large enough to show the desktop version)

4. Google Android 9% of marketshare (

5. Outlook 7% of marketshare (lucky emails even render in this junk application)

6. Apple Mail 7% of markethshare (understand media queries)

7. Outlook.com (doesn't understand media queries)

8 Yahoo! Mail (doesn't understand media queries)

 

 

Adam almost 3 years ago

I'm not asking Zurb to come up with new tech, I'm just wanting to understand why the media queries aren't reversed.

ie: small breakpoint is the default (not relying on media queries) and large is the override (using media queries).

I'm also saying that if there are stats and other data that Zurb used to make this decision it would be great to see them and understand this better from their point of view.