11 Gmail Obstacles During Email Creation

The fact that newsletters are perfectly displayed in Gmail is a challenge for programmers and designers alike. There are always new updates and features - sometimes without prior notice. We have summarized the 11 most common stumbling blocks that can occur during the creation of emails.

Written by Hannah Krüger

Creating HTML Emails For Gmail: What You Should Pay Attention To



1. Gmail includes serval email clients

Gmail has many versions. On the one hand, there is the mobile and desktop view. Furthermore, there are differences between Android, Apple, and webmail as well as between opening emails with a Gmail account or with POP/IMAP. Paid Google accounts like G Suite Business and G Suite Basic form new clients again. Every single client has to be perfectly represented and to make the email experience as optimal as possible. 


2. Background images are not displayed for non-Google accounts

The Gmail app for Android offers an exciting feature: email accounts that are not linked to Google can still be opened in Gmail. However, these emails do not support style blocks as well as background images.


3. Emails are cut off 

If your email is larger than 102 kB, it will be cut off in the inboxes of your subscribers after the first 102 kB. However, if a user wants to read the entire email content, they have to click on a following link to be redirected to a new window with the entire email content.


4. Gmail supports styles only in the head element

Gmail does support embedded styles. However, only if they are part of the head element of the HTML document. However, when emails are opened in the Gmail app from non-Google accounts, styles are not supported at all. This is the case for iOS as well as Android.


5. Entire style blocks are removed

If Gmail finds an error in your style blocks, the entire block will be removed. If you use an “@” declaration within an “@” declaration, the associated block will be removed. To work around this problem, create multiple style blocks.

Style blocks that contain over 8192 characters will also be deleted by Gmail, as well as any subsequent style blocks. If you encounter this issue, you can simply split the large style block into two parts.


6. Attribute selectors and pseudo-classes are not supported

Although modern email clients like Apple Mail support attribute selectors, Gmail does not support them. Pseudo-classes such as :checked and :active are also included. Designing dynamic and interactive email content without AMP for email is therefore difficult. Pseudo-classes like :hover are only supported in Gmail's webmail client. Therefore, our tip is to create interactive mails using Google's AMP for email feature.


7. Images are displayed with a download icon

If you use large non-linked images, most likely a download icon will be displayed at the bottom right of the image interface. Clicking this button will automatically download the image to your desktop. Such buttons can irritate email designers and make the newsletter look unserious. The solution: link images larger than 300×150. 


8. Negative CSS margin values are not supported

As with other webmail clients (e.g., Outlook and Yahoo! Mail), Gmail does not support negative margin values.


9. Phone numbers, email addresses URLs are linked automatically

This problem also seems annoying for many email designers. Rewrite your phone numbers, email addresses, and URLs in HTML as follows so that there are no links: 


For phone numbers:

Change 040 1811 017 to 040­-181­-017


For email addresses:

Change to info@juneapp­.com


For URLs: 

Change to www.juneapp­.com

Change to http:­//www.juneapp­.com


This allows you to write “­” in front of each unit, for example. Gmail does not recognize that it is a phone number, email address or URL.


10. Gmail uses HTML5 DOCTYPE

No matter which DOCTYPE you use, Gmail displays your mails using HTML5 DOCTYPE, which can cause display issues.


11. DOCTYPE triggers additional spaces under images 

The issue appears not only in Gmail, but also in and Yahoo! Beta. The following tips can be applied to all three Email Service Providers (ESP). 


Add style="display:block” to an image element.
Add align="absbottom” to an Image Element.
Add align=" texttop " to the Image element.
Add a line-height of 10px or lower.
Add a font-size of 6px or lower.


9 Tips For Maximum Conversion Rates