Google’s embarrassing email problem

Google’s embarrassing email problem

For some time now Google have been doing their best to shake up the email experience. They’ve introduced tabs, schema, priority inbox, promotions view and most recently Inbox to name but a few features. In fact over the last couple of years it feels like Google have been doing more than anyone else to progress email.

Surprisingly one area where Google have fallen short is support for CSS media queries. These make it possible for emails to automatically alter their layout to best suit the device they are being read on (i.e makes them responsive), in this case – mobile devices. Some of the formatting techniques added by media queries include:

  • Single column layout (no pinching or zooming required)
  • Larger images and text
  • More concise menus
  • Mobile specific content

Ok, I admit it’s tricky to visualise, so we’ve knocked up an honest-to-goodness GIF to show you a world both with and without media queries.

iOS-vs-Inbox-2

As you can see, the lack of media query support provides a pretty lacklustre email viewing experience for Google Inbox users (It’s worth noting that the Gmail app has the same issues).

I’m sure you’re aware of what a noisey bunch internet peeps are, so it comes as a surprise that there’s been no moaning about Google’s email apps and their inferior email experience.

Do Gmail/Inbox users know what they are missing?

A quick glance at the reviews for the Gmail/Inbox app reveals swathes of happy 5 star ratings, so what gives? Outside of the email industry it’s safe to say that most people will have no idea about responsive email, so if they’ve never seen one, would they know any better?

I occasionally use the Gmail app for its strong integration with Gmail (advanced mail searching, adding tags etc…), but its poor rendering means Apple Mail is still my main mobile email client.

How do we get around this?

With media queries out of the question, responsive email becomes problematic. Hybrid coding can get around some the restrictions imposed by a lack of media queries, but it’s time consuming and requires in-depth knowledge to pull off. Google shouldn’t be holding its breath on hoping all email marketers adopt this strategy as so far, it’s not really happening.

Do Google plan to add media query support?

Back in December 2014 Google made promising noises about adding support for media queries in a Reddit AMA so fingers crossed we could be hearing some good news later in the year.

“We are interested in supporting media queries but we need to make sure we do it right. Our changes last year to show images by default in Gmail last year were similar: there was a ton of complicated security work that had to happen behind the scenes before we could make this seemingly simple feature safe for the whole world” … “ – Jason Cornwall – Inbox by Gmail Lead Designer

“Inbox and Gmail use the same HTML sanitizer and media queries etc. aren’t supported. This is one of our top feature requests from developers though and we’re looking into adding it.” – Taylor – Inbox by Gmail Software Engineer

By Sam Beddoes

Sam Beddoes is a Designer at Action Rocket, an email creative studio based in London. Find him on Twitter at @B3ddoes

  • http://travisneilson.com travisneilson

    Yes, it would be nice. But this is one of the best examples of designers needing to adopt a mobile-first approach. 90% of the frustration is by adopting this mindset. Now, gmail will still ignore media queries on desktop and all of your gmail recipients will then get a mobile email on desktop, or not. But then, maybe thats a good idea. Mobile-first emails are way easier to digest on a desktop too.

    • rickysynnot

      Really good point @travisneilson. At the end of the day, if you’re re-creating a full-page advertising catalogue spread into an email, you’re ‘using the medium wrong’.

      We all know that email works well as a marketing tool when we use it to present readers with short, sharp, accessible messages, with low to medium levels of content.

      My use of the mobile first approach in email has been really successful, it just cleans up the dialogue with your customers and makes it much easier to continue that dialogue online.

      • http://travisneilson.com travisneilson

        Exactly! Mobile-first is as much (if not more) a content approach than a visual design approach!

        • Sam Sexton

          Yes! I think the Email industry has been quite irresponsible in encouraging large companies to abandon the Gmail app. The uptake of Gmail is about to explode when they support adding third party accounts. and the majority of businesses will be out of pocket.

    • http://www.actionrocket.co Elliot Ross

      good points – but you still need basic support of CSS and ideally media queries for a mobile first approach. Gmail’s lack of support here is holding back an entire industry.

  • http://www.adampatterson.ca/ Adam Patterson

    I have built email templates for a few years now and depending on your audience Desktop Outlook is the winner. It is also a lot worse than Gmail at supporting well anything.

    If you are building email templates you probably also know to test. It would be amazing if the internet or even email clients were all standards based but the fact is they are not.

    Sure Google could do a better job, so could Microsoft.

    A successful template needs Tables, Divs, Inline and stylesheets and if you know your stuff you should be able to match all clients relatively close.

    I guess my point is if you send an email out that looks that bad on one device, Well thats a rookie move.

    • Beddoes

      Agreed.

      The issue is jointly split with Google/Email designers to an extent.

      On one hand, Google have email apps that don’t display email as well as their rivals. On the other, we have email marketers who aren’t designing for every device.

      Hybrid coding *almost* resolves the problem, but it adds a lot of complexity to a build and isn’t a feature rich as using media queries.

      With any luck, Google will help close the gap in the future.

      • http://www.adampatterson.ca/ Adam Patterson

        I agree,

        I feel like google is working on making the mail consumable and that might translate into function over form. But in my day to day job I cant get away with only making websites work for Chrome.

        Mobile first for email is almost guaranteed not to work on desktop.

    • http://regis.decamps.info/ Régis

      Desktop outlook doesn’t support div, does it? I recall I had to have tables into tables to have an email render properly in Outlook.

  • rickysynnot

    Is it google’s embarrassing problem? Or the embarrassing problem of email designers who are failing to wake up and realise that the way we conceive, write and deliver email needs to change, to respond to an audience who have changed they way they read email forever!

    • http://www.actionrocket.co Elliot Ross

      The point is though that a mobile-first approach would be a lot easier if we had adequate support for media queries across the popular mobile devices. Totally on board with the idea that we should design and architect content for mobile as the primary device – and shorter, easier to comprehend messaging is key for that. But incoherent coding standards is a problem, especially when doing things like Hybrid, i.e. taking a mobile first approach to code, means doing more work to ensure support on older desktop clients.

      • rickysynnot

        Maybe its bit like how our use of cars has changed over time… Ages ago, everyone had big cars. Big pickups, super-long cadillacs and 4×4’s. Like as in coming out of the 60’s & 70’s.

        Then big-city-livin’ came along, high density apartment living, and car makers responded. Manufacturers responded with smaller cars, smaller engines for quicker, more streamlined driving in smaller and smaller streets.

        So in today’s cities, a small car (like a phone for reading email) is the primary, most popular device of choice. It just works better.

        if you take a teeny-tiny hybrid car ( read: iPhone or Galaxy) out on the open road and tow a huge trailer ( read: desktop-first email newsletter) – hey, you’re gunna struggle.

        if you take a hummer (read: desktop computer) down a NYC laneway (read: mobile first email), it will be difficult, not ideal, but you’ll probably make it. it’ll just feel chunky.

        That makes more sense than I thought It was going to!

        • Michel Hendriks

          That’s a horrible metaphor.

          Media queries allow for an email to adapt to its reading environment, resulting in an optimal user experience in every reading environment. An email designed only for mobile viewing will not result in an optimal user experience on desktop, and vice versa. Yes it will work, but so does reading an email that was designed only for desktop on a mobile device. With good eyes, some good ol’ fashioned pinching and zooming, it will work just fine. But only the optimal user experience will result in the highest number of desired user actions (or the highest number of positive attitudes towards the sender, if you will).

          • rickysynnot

            Thanks for your kind words.

            I don’t think media queries are empowered here – more the email clients. The media query serves as a ‘request to adapt and re-configure (using CSS rules), its up to the browser / email client to accept that request and read the media query.

          • Sam Sexton

            When we talk ‘optimal experience’ it comes down to what you value more, a bespoke desktop design (in the case of media queries) or a design that works in gmail. I would say the latter is more important. These days the line between mobile and desktop design has been blurred. You see hamburger menus on desktop sites, large buttons, single column layouts etc. So in my mind, a mobile design scaled up to desktop is better than a desktop design scaled down.

    • Sam Sexton

      Thats exactly right, so why does it feel like we’re in the minority?

  • Joel Farris

    Mailbox has (what seems to be pretty much) the exact same problem. That’s why I keep Apple Mail ready – so I can find and actually read HTML-formatted emails that Mailbox screws up. It’s quite frustrating.

    • Beddoes

      Yeah, I gave Mailbox a whirl over Christmas after hearing a few good things. While it does support media queries, it also has a lot of its own rendering problems which left it unusable for me too :'(

  • JesseWallace

    It’s mainly the issue of CSS support. Inbox uses Android Mail and Gmail’s rendering engine, which handicaps a lot of the responsive queries and renders them poorly or wrong. This is not necessarily a developer/designer issue (though there are small lengths we can go to salve the bleeding), but more of a standards wide adoption of proper CSS rendering that has been pushed aside since Outlook 2007.

  • Beth Allen

    Over the past few weeks, Gmail for iOS does seem to be reading the media queries. When that happens, Google puts an alert at the top of the message saying “This message has been modified to fit your screen. Tap here to show original.” Weird thing is that it will do that for a few days then seem to revert back to ignoring the media queries. Still, it gives me hope.

    • http://www.actionrocket.co Elliot Ross

      we’ve seen this too – but it seems on only affect the size of the text, not implement any css, have you seen similar?

  • Elizabeth

    Just downloaded Microsoft’s new Outlook iOS app today, and it doesn’t support media queries either. It’s better than the OWA app, though, showing the whole email in on screen at least. (OWA left, Outlook right) Although I think many people still use the default iOS mail app, companies that use Exchange/365 are starting to make their employees use the Microsoft apps.

  • Lance N

    Just found this article. Great points.

  • http://www.remindme2save.com/ Ran Davidovitz

    Sometimes google feels like bad version of Microsoft ….

  • Joseph Crane

    Hi,

    Would anyone be able to recommend me the best method to use in conjunction with Silverpop? I’ve recently been using a technique without media queries but it appears that Silverpop is stripping some of the important logic governing alignment and it’s having a negative impact on my designs!

    Thank you so much in advance!

    Joe

  • https://www.sparkemaildesign.com Spark Email Design

    Every Email Provider have some limitations and some advantages. Google is the one to make things better for the users