The Email Doctor: Gmail viewport issue

Got a problem with your email? The front-end developers at Yourzine are here to help! In each issue of our Email Doctor blog, we’ll explore a common issue which developers are finding when developing emails, diagnose the cause of the problem and prescribe a fix for it!

THE PROBLEM:

”I can’t get my email to span the full width of the viewport on Gmail! I know that Gmail introduced support for media queries in September last year, but I’m not seeing a mobile-optimised version of my email when I test in Gmail. Instead, I’m seeing the desktop version and this is expanding beyond the width of the viewport, so I have to scroll left and right to see the entire contents of my email which is not exactly user friendly! How do I fix this?!”

OUR DIAGNOSIS:

The first thing to do is check that you’ve downloaded the latest version of the Gmail app and the latest operating system on your phone. You could find that you’re still seeing a desktop version of your email in the Gmail app if you’re using old software, as this may not include Gmail’s latest updates.

However, this doesn’t explain why the email is spanning beyond the width of the viewport, and in this case the latest version of the app is installed, so what’s causing the issue? It’s true that Gmail did introduce support for embedded styles and media queries back in September 2016, much to the joy of email developers. However, it is still not the most forgiving email client. In fact, if there are any mistakes in your CSS code in the <head> section of your email, Gmail will ignore it completely. This could be the reason that we are not seeing a mobile-optimised version, because the media queries are actually being completely ignored.

OUR PRESCRIPTION:

In order to fix this issue, we’ll need to explore the CSS code in the <head> section of this email and see if we can spot any mistakes…

Ah-ha! Here’s our problem: the media query in this code is missing a closing curly brace. Let’s fix that and tidy up the mark-up a bit:

The above example contains no mistakes and is a bit easier for us to review because it has been nicely indented. Now let’s run a test through the Gmail app and see how the email looks:

Voila! A perfectly mobile-optimised version of the email is now showing in the Gmail app. Nice!

OUR TIPS FOR DE-BUGGING YOUR CODE:

· Your web browser should have a have built-in set of developer tools, which can be used to inspect a specific areas of code. This can be really useful for de-bugging, as you can usually see applied CSS styles, HTML markup and a visual, colour coded reference of the element’s margin and padding properties.

· It is easier to spot mistakes in your code when it is properly indented. Using a code beautifier such as https://codebeautify.org/ can help you to quickly and easily indent your code, so you can easily spot any missing tags or syntax-related mistakes in your mark up.

· For your CSS styles, you can also use a linting tool such as http://csslint.net/ , which can analyse your CSS code and help you to quickly find errors or mistakes with your syntax.