Sends Gmail emails text or HTML

11 Gmail Obstacles During Email Composition

Creating HTML emails for Gmail: what to look out for

In addition to the following, you should test your email before sending it to reduce errors. The tracking of important e-mail metrics gives you an additional overview of the use of the e-mail clients of your recipients. For example, this is how you can see how many are using Gmail.

 

1. Gmail includes several email clients

Gmail has many different versions. On the one hand, there is the mobile and desktop view. There are also differences between Android, Apple and Webmail as well as between opening emails with a Gmail account or with POP / IMAP. Paid Google accounts such as G Suite Business and G Suite Basic are again new clients. Every single client has to be displayed perfectly in order 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: E-mail accounts that are not linked to Google can still be accessed in Gmail. However, these emails do not support style blocks or background images.

3. E-mails are cut off

If your e-mail is larger than 102kB, it will be cut off after the first 102kB in the mailboxes of your subscribers. However, if a user wants to read the entire e-mail content, he must click on the following link to be forwarded to a new window with the entire e-mail content.

  

4. Gmail only supports styles in the head element

Gmail does support embedded styles. However, only if these are part of the head element of the HTML document. However, when opening emails in the Gmail app from non-Google accounts, styles are not supported at all. This is the case with 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 is removed. To work around this problem, create multiple style blocks.

Style blocks that contain more than 8192 characters will also be deleted from Gmail, as will all subsequent style blocks. If you run into this problem, you can simply split the oversized style block into two parts.

 

6. Attribute selectors and pseudo-classes are not supported

Although modern email clients such as Apple Mail support attribute selectors, Gmail does not support them. This also includes pseudo-classes such as: checked and: active. Creating dynamic and interactive email content without AMP for email is therefore difficult. Pseudo-classes like: hover are only supported in the Gmail webmail client. Our tip is therefore to create interactive mails with the Google feature AMP for email.

 

7. Images are displayed with a download icon

If you are using large, unlinked images, you will most likely see a download icon in the lower right corner of the image surface. If you click on this button, the image is automatically downloaded to the desktop. Such buttons can irritate email designers and make the newsletter look dubious. The solution: Link images that are larger than 300x150 with a link.

 

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. Telephone numbers, email addresses, URLs are linked automatically

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

 

For telephone numbers:

Change 040 1811 017 to 040 & # 173; -181 & # 173; -017

 

For email addresses:

Change [email protected] to info @ juneapp & # 173; .com

 

For URLs:

Change www.juneapp.com to www.juneapp & # 173; .com

Change http://www.juneapp.com to http: & # 173; // www.juneapp & # 173; .com

 

For example, you can use "& # 173;" write before each lesson. Gmail doesn't recognize it's a phone number, email address, or URL.

 

10. Gmail uses HTML5 DOCTYPE

Regardless of which DOCTYPE you use, your emails are displayed in Gmail with HTML5 DOCTYPE, which can lead to display problems.

 

11. DOCTYPE triggers additional spaces under images

The problem arises not only with Gmail, but also with Outlook.com and Yahoo! Beta. The following tips can be used with all three Email Service Providers (ESP).

 

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