Article

Roland Pokornyik
Roland Pokornyik 3 May 2016

Tips To Make Your Responsive Email Templates Look “Good” On Gmail Or Inbox App

10-20% of viewers will read your email templates on Gmail or Inbox App. But most responsive email templates will look a bit awkward on these email clients. Here are some tips that might help you to fix this!

Sadly, even in 2016 your responsive email templates won’t work perfectly on all email client. The story starts with email clients that do not support CSS media queries. Without media queries you can’t build a traditional responsive email.

Media query support
Image Source: Litmus.com

Why do some email clients ban media queries?

Email client developer’s priority is not to support responsive email design but to make sure that their email users will be safe from cybercriminals.

A side effect of this fear is that still responsive emails won’t work properly on Gmail or Inbox mobile apps, and many other email clients. We are focusing on Google’s services now, since their service has 100s of millions users all around the globe.

Email designers have been praying to Google for ages for responsive email support, but still… no success with the prayers.

Gmail and Google Inbox will “crumple” your responsive email templates

Unfortunately Gmail and even the new Google Inbox app’s HTML rendering engines are not “advanced” enough to fancy proper responsive email coding techniques, so most mobile-friendly email templates will look a bit strange on these email clients.

Elements of your email templates will loose their width properties, which causes several things to misbehave: Images and background colors may be distorted, the different blocks of your email templates might be scaled to various different sizes so the overall design is likely to look a bit awkward, especially if you are using “hide on mobile” techniques, since these email clients will completely ignore it, and even hidden elements will show up.

How can you fix this?

If you add a fixed size image – for example an 600 x 400px – into each of your template blocks and/or columns (in case you have multiple columns in the design). Since you are using the same image size all around your email template, each picture will be scaled in the same way – so will look good on mobile too.  Don’t worry, you don’t have to make the minor social icons that big, they can stay the same as before.

It’s also worth to keep images and text together in the same wrapper element (it’c called Box in case you are using EDMdesigner), since in this case images will help stretching the whole container to the full-width of the viewer’s mobile device.

If you obey the above limitations it’s quite likely that your email template will look good on Gmail and Inbox too. At least that’s the case if you are using our responsive email editor.

But always test the templates before sending! It’s an experimental approach we mentioned, and might not work in every case. 

Testing will require some time and energy, but it’s worth your time, since according to recent email client market share data, around 10-20% of your emails are opened in a Gmail or Inbox mobile app. So take your time, and experiment with the above fixes.

Original Article

Please login or register to add a comment.

Contribute Now!

Loving our articles? Do you have an insightful post that you want to shout about? Well, you've come to the right place! We are always looking for fresh Doughnuts to be a part of our community.

Popular Articles

See all
Digital Marketing Vs. Traditional Marketing: Which One Is Better?

Digital Marketing Vs. Traditional Marketing: Which One Is Better?

What's the difference between digital marketing and traditional marketing, and why does it matter? The answers may surprise you.

Julie Cave
Julie Cave 14 July 2016
Read more
Customer Journey Mapping: A Real-Life Approach to Your Digital Marketing Strategy

Customer Journey Mapping: A Real-Life Approach to Your Digital Marketing Strategy

As financial services and insurance (FSI) companies strive to deliver the seamless multi-channel customer experience, the traditional marketing model has been radically reimagined. Innovative institutions are showing how cross-functional teams focusing on the customer journey can work to develop a single view of the customer – an approach that can bring tangible rewards. Yet research shows that large institutions still have some way to go in maximising the return on their investment in this area.

Aoife McIlraith
Aoife McIlraith 18 September 2017
Read more
Infographic - The Best Times and Days to Post to Social Media

Infographic - The Best Times and Days to Post to Social Media

With the social media landscape changing literally every single day, it's become a full-time job for social media managers to merely stay up-to-date on emerging and shifting trends and best practices. It's tedious, time-consuming, detail-oriented, and, quite frankly, a bit of a headache. But thanks to this new infographic, some guessing can be taken out of social media management.

Will Price
Will Price 21 September 2017
Read more
4 Important Digital Marketing Channels You Should Know About

4 Important Digital Marketing Channels You Should Know About

It goes without saying that a company can't do without digital marketing in today's world.

Digital Doughnut Contributor
Digital Doughnut Contributor 5 November 2014
Read more
10 Marketing Lessons From Apple [Infographic]

10 Marketing Lessons From Apple [Infographic]

The 10-year-old kid, selling ice cold fresh lemonade on the street corner in your local neighbourhood had it right. He or she may not have realized it but the simple marketing strategy that they accidentally and innocently came up with works perfectly on the people strolling by on their daily walk.

Ellie Summers
Ellie Summers 19 September 2017
Read more