Home Blog Google Apps mail, 13 different renderings

Share this post

Google Apps mail, 13 verschillende weergaven

Google Apps mail, 13 different renderings

Written by Team e-Village / 10 May 2017 / Innovation

Your template was created using the latest techniques and works according to an extensive testing process. Your mailing looks good in Litmus, but after sending it out, your recipients send you messages that they cannot read your mailing (properly). The email falls apart, text overlaps, and in some places text is shown double. But what is the problem? We will run down the most important email clients and tell you where the rendering issues originate.

  • Receiving server

  • Google Apps mail

  • App and web-based email clients

  • Screen size

  • CSS support

Most important email clients

Errors with email display in certain email clients can be caused by various issues. Where you often test in three browsers when testing a website, creating an email often requires taking into account over 40 email clients. Quite the challenge! So how do email clients handle your mailing code?

In a study Litmus published the top 10 most important email clients (worldwide):

Top 10 meest gebruikte e-mailclients

Figure 1: Top 10 most popular email clients

A quick calculation reveals that Apple has the largest market share (49%). 7% of the market is filled by all other email clients outside of the top 10. These email clients are not in the list above.

13 Google Apps mail versions

Google Apps mail has a 26% market share, which is divided across 13 versions. The image below shows the division per category. Where Google Apps mail for Android only shows the basic CSS in case of an external server setting (@companyname.com), setting a Gmail server (@gmail.com) provides full support for media queries.

Verschillende categorieën binnen Google Apps mail

Figure 2: Different categories in Google Apps mail

Category 1: Basic CSS

Also known as GANGA (Gmail Android with a Non Gmail Account), Gmail app only supports the basic (Inline) CSS in this category. Our #inboxproof newsletter for April 2017 will look as follows:

Basic CSS

Figure 3: Newsletter in category 1

Category 2: Calc() & Background images

In this category, not just the basic (Inline) CSS is supported, but the Calc function and the background image as well. Our #inboxproof newsletter for April 2017 will look as follows:

Calc() & Background images

Figure 4: Newsletter in category 2

Category 3: Media queries &tags

This covers the majority of Google Apps mail users, and features support for media queries. Our #inboxproof newsletter for April 2017 will look as follows:

Media queries & tags

Figure 5: Newsletter in category 3

Receiving server

The server that receives the email is the receiving server. In case of yourname@companyname.com, the server is ‘companyname.com’. After this, the server sends the mail to the Google Apps mail, where it is opened. Instead of forwarding the email as is, the receiving server first pre-processes the HTML. This means that code which may pose a security risk will be stripped. Each server can strip and/or add random code, so the more processing is applied, the worse the email to the recipient becomes.

Unfortunately, this is impossible for an (email) marketer to prevent, because you cannot influence the receiving email server’s settings. It’s comparable to forwarding a newsletter. The newsletter’s lay-out will be distorted.

Scroll omhoog