SS5
Responsive = Gmail App. No Excuses.
Ok a little rant here. When I hear people talk about responsive emails I start to cry a little inside. They think of 4-col layouts collapsing in to one, reverse stacking, sidebars. Basically it's a widely held view that a responsive email can be whatever you want. As most of us know The Gmail app challenges that idea, yet it's conviently missed out of many of the presentations i've witnessed on the subject.
Gmail now has the ability to add third-party accounts. It's also far more prevelant now that it's the default mail app for many android phones. In 2015 responsive means Gmail-first. It means designs that are built with the limitations in mind.
I'm a bit torn by this view. On one hand you are right, the Gmail app will gain marketshare after Android switches over their default client to Gmail and we should give it more prominence.
On the other, I feel email designers are again being strong-armed to go along with whatever the email clients feel like doing.
One of the reasons why Outlook still has cr*ppy support for standards is because designers are willing to go along - to eschew standards and code WordHTML. As a results nobody realizes how awful Outlook is.
If we start making all emails "gmail responsive", then naturally users won't notice how "unresponsive" Gmail is and Gmail would have no reason to make changes to adopt responsive email.
Amen! This whole scenario reminds me of the hacks we created to get CSS3 properties working in old versions of Internet Explorer. These hacks turned out to be a really bad idea and now Internet Explorer supports everything we once tried to hack.
Google's not dumb. I bet they'll see the light.
But Gmail isn't IE7, it's current, it's big and it's growing. We shouldn't blame the users. It's not their fault.
It's not a question of why, it's a question of why not?
When CSS3 was just starting to be used, IE8 was the newest version of IE, so IE7 was still very much relevant.
I'm happy these Gmail hacks exist. Hopefully it shows Google that we need to hack email to get basic responsive code working, shining a light on the fact that Gmail needs fixin'.
But these interim techniques are still hacks. Not sure why would you want to spend time shaming others for not using them.
It's not about shaming, I'm trying to shift the paradigm but the community needs to acknowledge the problem. There are email designers/ESPs out there willing to take your money and conveniently downplay or ignore the role of the Gmail app.
We owe it to anyone we communicate with to accurate describe the role of Gmail. That means accurately estimating the market share (probably somewhere above android mail but below iOS mail) and defining what the limitations are.
Perhaps I mistook your last sentence then.
You're right that was hyperbolic and i've edited it.
Thanks for admiting you need to tone down a bit. Everyone not agreeing with you gets downvoted in here, although you edit your posts later on, you show no numbers to back up your claims, and you mention you actually cater for your own "Gmail first" by choosing a one column template (not responsive). Not fair in my opinion.
Code it the way that makes your client/company the most money.
Some may not agree with this approach but I negate the scaling effects of gmail app with this snippet of code at the bottom of my emails (before the closing body tag)
<img src="spacer.gif" height="1" class="hide-md" style="display:block;min-width:500px;">This spacer image will stop gmail from auto-scaling your email to oblivion.
this is exactly what I do. I'm not a huge fan of this solution, but it works and the email still comes through as I want it to, just smaller.
I agree and I always make supporting the Gmail apps a priority when I'm coding. You can actually do a fair bit that works in the Gmail app now anyway.. I just put together a new tutorial that contains all the latest tips and tricks I use when I'm coding. You can totally have 4-col layouts, reverse stacking and sidebars that is all responsive in the Gmail app. Obviously there are a few visual sacrifices, but overall it can work quite well especially if you design in the browser with this scenario in mind.
Thanks Nicole, I'm glad this provocative thread hadn't exploded in my face.
Column stacking in Gmail still scares me. Does single column have any real drawbacks apart from being inconvenient for design?
Nope, not really! :)
Thanks for this, Nicole! The template and tutorial are awesome.
Cheers Ann Marie! My pleasure.. hope it's helpful :)
Finally
You sir, are spot on.
This should be a rallying cry. One for standards. Email standards. Now.
Every 5 years or so an initiative begins and dies, like the Email Standards Project.
Please join me in the W3C HTML for Email Community Group where we can create specifications and involve the ESPs and App Devs and Email Devs in turning those specs into standards.
Yes! This is exactly what I've wanted for years now. A spec that we can create and interface with devs on. Thanks for letting me know!
I absolutely agree with your sentiment and I'm onboard with making emails that work in the Gmail app and progressively get better. At the risk of being a pedant, we are not capable of using "responsive web design" in email clients.
"Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design" - Original article
Call it responsible, small screen first, whatever, but it's not RWD. To be so, would mean that we could build layouts that are flexible and use media queries to alter them as available size changes. We can't do that in email clients as a whole and we can't do it in Gmail at all.
To best serve the people reading emails, we need to build to include the Gmail app and other small screen clients without media query support. To improve our workflow and overall sanity, we need to push for email clients to adopt standards.
Thank you, I have always coded for Gmail first, then use progressive enhancement for iOS and other supporting clients. Things may not always be AS pretty in Gmail, but they can definitely include stacked content, nice large CTA buttons, and flexible images among other things.
Unless you are focussed specifically on brand equity as your KPI, your opens or even your unique opens are not the complete picture. The fact is that people will consume your email (or any content) on the device at hand in the most convenient way for them at the moment. The points about metrics, and debating whether or not Gmail represents 6 or 40% of a given market are missing the point(s).
Progressive enhancement is currently the best methodology we have to provide solutions for human consumption.
The mere fact that Gmail is used means we need solutions for the humans using it.
Design your message to serve them. Design the container of your message to work everywhere. And, stop naming your solutions “[buzzword of the week] first.”
Gmail-first like that :) well said!
Real spanner in the works to responsive emails since Lollipop killed native email client. Its still in the apps to taunt us with its Gmail redirect.
Just to balance things out a bit, I'll say I disagree with most of the views here :)
Especially with the concept of "In 2015 responsive means Gmail-first"..l
Also with the idea that Gmail it's more widely used than iOS... and surprised to hear someone saying they code for Gmail first and than adding progressive enhancements for iOS devices...
Any numbers to support that idea? I am looking at my last campaign that I sent a few days ago to 87000 emails.
Most popular email clients:
So you are coding for 6.2% instead of the 59.9% ? hmmm...
Please remember this is coming from an Android guy like myself, and from the UK market. In the US market I expect iOS to be even more prevalent!
Lots of Andoird users will use Yahoo/Hotmail native app, there is also Inbox from Dropbox... of course the same can be said about iOS, where users might use Gmail... but things are not as clear cut as this thread would lead to believe, imo, and some more numbers are needed. EDIT: found more data here: http://emailclientmarketshare.com/
I think it just happens the post above comes from an Android user a bit too frustrated, but the numbers do not lie.
Presumably then your emails don't support Outlook.
I think the numbers you've stated are based on total opens, not unique, so they're inflated.
Gmail is growing in popularity, plus it now supports third party email accounts and the Google Inbox app just left Beta.
It really comes down to a central question. Is there a good reason to not support Gmail App? Most of the best emails out there don't use stacking, look at Kickstarter, Medium etc...
Easiest response would be if you could share the numbers you get from the stats of the email campaigns you send.
I presume you send quite a few since you are involved in the design. I expect some differences between the UK and the US as well.
I haven't seen a lot of articles on how to make things responsive (stack) in gmail, and as you say most big names don't either.
I have to say though you gave me food for thought though... hmmm... now you make me start researching this as well... used to consider it a closed chapter, no responsive emails in gmail :)
I can't share any numbers I'm afraid but sufficed to say I choose to support Gmail not because of the numbers, but because Gmail is a contemporary email platform and to me, the small cost of not having proper stacking designs is worth the benefit of a better user experience for these people.
Stacking isn't impossible, but I'd much rather we design bottom-up without stacking in mind.
I am not sure if choosing to go for a non-stacking design (non-responsive?) it is the same as "supporting Gmail" and coding "Gmail-first" as your original post suggested... Now it makes much more sense to me, and as you can see below I mention going for one column layout emails as well.
I think if you specified your approach in the original post, you would have gotten totally different answers.
The backlash against the idea of coding without media queries has definitely taken me by surprise.
I usually see data that reflects http://emailclientmarketshare.com/ on which Gmail is the #2 result. Obviously there’s no differentiation between web or app in that stat, but considering Lollipop now forces users onto the Gmail app and since you can now access other email accounts from within the Gmail app on Android, I can only see the market share getting larger.
Even 6.2% of 87,000 is 5,394 people. It might seem meaningless to you as a percentage, but imagine those 5,394 people as humans opening your email. It’s so many people on which you’re wasting an opportunity to give them a good experience.
I just don’t see why, if you can cater for the Gmail app, if you know how, why you would not. It just seems crazy to me.
All the email presentations I ever did when I was trying to get people to make sure they went responsive on emails back in 2012.. all those examples were about how bad it was that emails were shrunk in iOS mail and therefore unreadable. How is it okay to do the same thing in the Gmail app today?
Using a hybrid coding method works everywhere and solves a whole bunch of problems. It’s not just the Gmail app that’s the problem.. it’s Mailbox (when it’s going through a bad phase). It’s any new mail app that comes out that may or may not support media queries, it’s other webmail apps on iOS and Android, it’s the native client in KitKat that doesn’t stack TDs, it’s the Samsung Galaxy native clients that doesn’t stack TDs.
The only downside to coding using a hybrid method is that if you can’t always have high-resolution images, but you can design around that, and/or you can just opt to include them anyway and have an email that’s a tiny bit too wide for the Gmail app, but better than just having a shrunken desktop version on there.
Email has always been about catering for the lowest common denominator and then applying progressive enhancement from there. So it’s business as usual as far as I can see :)
It's a matter of focus. Most of the opposition is focused on the negatives of rewarding Gmail with our hard work (when they are making it hard) or on various percentages and numbers. The missing part is the recipients, aka people. If your focus is on making the best possible email for people, building with and without media queries is the way.
Yep, exactly. I personally choose to dismiss this idea that we have any power over Gmail's decisions in regard to rendering; I think it's safest to assume they are not listening and that there is no risk of 'rewarding' Gmail for 'bad behaviour' if we decide to skirt around their apps' problems. I doubt that they have even noticed what is going on. And like you said, we should just be focusing on rewarding subscribers.
At the end of the day it's good to have all these different methods! There was a time when there seemed to be no way around the problem of apps not supporting media queries. Now at least we have all these tools in our toolbox and we can deploy them all as necessary. A considered decision about an approach (preferably accompanied by A/B testing) based on each specific situation is always going to be the correct approach. It's only being lazy and/or resisting something on principle that I feel would be wrong.
Haha I was sure my answer was going to open the debate box... what I said is I would not say Gmail is the most important client and all the very powerful statements in the first post without backing them with some numbers and certainly wouldn't build my email template for gmail first.
As mostly everybody already noticed, most (responsive) templates do not specifically cater for gmail limitations first.
So although you do talk about bulding for Gmail first as the "lowest common denominator" (hard to believe a Google product will be called that..) I have yet to see a tutotial or a template taking that into consideration. Please link to a few that you know of, as I would love of course to take that in, as it is news to me.
As for the "having a shrunken desktop version", it all depends on your email design... that might be perfectly fine in a one column only email.
You can actually find quite a few opinions that email should not really be responsive in the first place (again probably some frustrations here).
The key thing to bear in mind is that everyone's list is different.
I've got a good 40% of my users opening emails in gmail, giving them a bad experience is absolutely not on the cards. Email developers need to understand who they're emailing and work around that.
In the web dev world it's common to support a browser until less than 1% of the site's visitors use it, I don't see why email should be any different. We need to build emails that look good to our subscribers, if that means having to bend over and dealing with gmail, so be it.
I would say in the web dev world it is not common anymore to support IE7 and lower and even IE8. It happens when devs work for government websites and the like, otherwise, it is not common at all. Government websites don't have to have cutting edge design and Javascript goodies, they just need to offer a good BASIC experience.
Gmail is the second most popular email client. Not according to a list of 87,000 people, but based on over a billion according to larger scale market share testing. 40% of our client's customers have Gmail accounts.
There is definitely frustration in the area. One thing that disturb's me is when I see a company say, "we provide fully-responsive email designs." When I first starting taking courses, I realized when people were saying learn to design responsive emails, what they really meant, was, "learn to design responsive emails for iOS." Most would completely ignore gmail, some would mention the issues and lack of media query support, but only stated the issue and provided half-baked "solutions." This was from supposed higher ups at important email marketing companies, completely disregarding gmail.
Even on Litmus, I see people forcing gmail to desktop size and calling it a day. That's just laziness. It literally takes one CSS property to make things stack. I had to test and search and I spent tons of hours finding the perfect solution. The idea is get gmail to function, to look pretty decent, stack content, and then improve upon aesthetics in supported clients using Progressive Enhancement.
Would be great if you could share the one CSS property that makes things stack in Gmail. I agree most solutions I've seen just force desktop design on Gmail, and that is what I do as well.
display: inline-block;
Gmail recognizes this, and will stack the table-cells (<td>) when the parent container can no longer fit them in one line.
There is a class added to the table cells called 'progressiveenhancement' if you remove it, you lose the stretching on mobile view, that will be what it looks like in Gmail. So basic stacking functionality in gmail, with improvements where possible (iOS and other supporting email apps)
Outlook ignores Display: inline-block; allowing us to stack cells in mobile, and still keep the side-by-side columns for outlook without any additional hacks (Outlook conditionals).
Make sure to inline the css before testing, I suggest Mail Chimp's Inliner.
Thanks Stephen! I wish something like that was around last year as well.. I only figured it out in July :) Good work figuring it all out as well, it's cool that we came to the same conclusion.
It's a combination of display: inline-block with the text-align property. I shared a link to my own tutorial elsewhere on this thread, there may be others. Here's my link again.
I wish this article came out back in 2014 haha. I had to find all of this out myself through a lot of testing. Good to know someone else is spreading these methods other than myself. Great job Nicole, nice article : )