Newer HTML Email Hacks Archive for Gmail

We love all the nichès involved in designing and coding your HTML emails. In the journey of coding over 60000+ emails, we, at Email Uplers, have made an observation.

Not every email client is identical or consistent when it comes to displaying the same email across multiple devices.

An HTML-rich email is like the new kid on the playground; not everyone shall play with it immediately. Some would readily welcome it (Apple Mail, Thunderbird), but others would require coaxing (Gmail, Outlook, Yahoo!) to arrive at amicable terms with it.

In our first of the series, Email Uplers presents hacks & workarounds for your Gmail HTML email. Read our Step by Step Guide to Create Your Own HTML Email

What Mischief Happens In Gmail?

Is your HTML email not displaying properly in Gmail? As per Litmus’ Email Client Market Share survey for March 2018, Gmail desktop & Android hold 22% and 3% respectively in overall email client distribution. So it is very important that your emails render perfectly across both mediums taking into account the fact that the majority of your subscribers would invariably be Gmail users.

Many Gmail Android users complain about receiving emails with squished images. A few others report observing unnecessary spaces between different sections in their emails.
While many issues of the past have been patched up in subsequent updates, some of the persistent common woes faced are:

• Images disabled by default
• Lack of inlining CSS support
• No media query support
• Float, margin, paragraph, and padding not supported
• Gmail app on the iPhone turns phone numbers and dates automatically to blue

HTML Email Hacks For Gmail

Before you send a Gmail HTML email, keep the following hacks in mind to avoid getting in a pickle.

1. Images Become Disproportionate in Gmail Android

As a best practice while coding images in email, an image is accommodated in a display block of half dimension to be displayed clearly in a retina display.

There is another glitch with Gmail Android App. We found that whenever the height of an image was specified in an email, the image failed to downscale properly in templates in Gmail. The following images are the proof of concept of the glitch occurring.

Reason behind this glitch

Unfortunately, Gmail is removing any height specified in the media queries and automatically inheriting the height from the desktop layout. This way when the image is viewed in Gmail Android, it has the width as per the screen size, but its height is that specified for the desktop layout.

Solution: What do You do

While there is no specific workaround for this currently, here are some quick fixes that can help avert this problem and optimize your Gmail HTML email.

1. Don’t specify the height for images in the mobile layout
2. For any spacer you want to use, make use of cell-padding property

2. Responsive emails not rendered on third-party apps

Since Gmail strips away media queries from email, responsive emails need to be coded without media queries. Such layouts are known as Spongy. Look at the following code snippet for further clarity. 

@media only screen and (max-width: 480px)

{

   .hide {display:none !important;}

}

<table cellpadding=”0″ cellspacing=”0″ border=”0″ class=”hide”>

<tr>

    <td height=”1″ class=”hide” style=”min-width:700px; font-size:0px;

line-height:0px;”>

        <img height=”1″ src=”spacer.gif” style=”min-width: 700px; 

text-decoration: none; border: none;” />

    </td>

</tr>

</table>

If you code it without media queries and then use media queries to further enhance the layout for a native app, the resulting outcome is called Hybrid Emails.

3. Gmail App bumps up the font size to as much as 50%

In Gmail mobile, sometimes Gmail automatically increases your font size to as much as 50% depending on screen width. This may increase readability but it ruins the overall layout of your templates in Gmail (and nobody likes that). To avoid this fate, you can practice the following 4 techniques while coding email templates for Gmail: 

a) Use display:none (add this to your CSS)

<div style=”display: none; line-height: 0; color: #ffffff;”>

Hello World!

</div>

b) Use white-space: nowrap

<div style=”white-space: nowrap; line-height: 0; color: #ffffff;”>

Hello World!

</div>

c) Use a spacer image

<tr class=”em_dn”>

    <td>

      <table cellpadding=”0″ cellspacing=”0″ border=”0″ align=”center” width=”600″>

        <tr>

          <td cellpadding=”0″ cellspacing=”0″ border=”0″ height=”1″; style=”line-height: 1px; min-width: 600px;”>

            <img src=”spacer.gif” width=”600″ height=”1″ style=”display: block; max-height: 1px; min-height: 1px; min-width: 600px; width: 600px;”/>

            </td>

          </tr>

      </table>

    </td>

  </tr>

d) Use a div and &nbsp together

<div class=”em_dn” style=”font:20px courier; color:#ffffff; 

background-color:#ffffff;”>

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;

</div>

4. Gmail hides images by default

Email Uplers won’t categorize this as a major deal-breaker. This is because nearly 43% of Gmail users read their emails without having images on them.  The best course of action here is to include proper alt text in your Gmail HTML template for such scenarios with proper text-align. But ensure that when images don’t load, they don’t leave large, empty placeholders in their place by using display:none.

td[class=em_hide], table[class=em_hide], span[class=em_hide], br[class=em_hide]

{

      display:none !important;

}

5. Gmail styles links as blue and they are underlined by default 

Templates in Gmail don’t support black, #00, or #000000 and replaces them with default link color  (i.e. #1155CC). So in order to prevent links from being blue and underlined in your Gmail HTML email templates, you need to add the following style tag.

<a href=“https://emailweb.com” style=”text-decoration:none; 

color:#00001b”>emailweb

</a>

‘text-decoration:none’ removes the underline and ‘#00001b’ can replace any color code.

6. External CSS styles are stripped away

Templates in Gmail strip away any CSS that is not inlined. ESPs such as Campaign Monitor and Mailchimp help you inline your CSS or allow you to inline your CSS while coding itself. Check out why inlining CSS in your emails is an important coding practice.

7. Custom Web-font Support

Ironically, Google hosts a custom font library but Gmail HTML email templates don’t support the inclusion of custom web fonts. It is better to provide appropriate fallback fonts while experimenting with custom web fonts in your Gmail HTML templates. Want to know what conditions to look into while choosing fallback fonts? We’ve already covered it over here.

8. There is a white space below an image 

This can be totally avoided in your email templates for GMAIL  by adding a ‘display:block’ inside your image source code. The following code snippet illustrates the same.

<td style=”padding: 0px; margin: 0px; font-size:16px; font-weight:bold;”>

<img src=”xyz.jpg” width=”600″ height=”217″ border=”0″ style=”display:block;

padding: 0px; margin: 0px;” />

</td>

9. Gmail doesn’t support <style> or <link> in the <head> 

This is hands down among the most frustrating limitations in this list. Gmail basic HTML templates ignore any style or link tags specified in the head section.  Hence, you need to overwrite the default link color by adding a color style to each and every <a> within the email body.

<a href=”https://emailweb.com ” target=”_blank”  style=”color:#ffffff; 

line-height:32px; text-decoration:none; display:block; 

background-color:#e25b46;”>

View Infographic

</a>

Placement of <style> tag is a very important point to be considered when following a step-by-step guide to building email templates.

10. Float, margin, paragraph, and padding are not supported

It is best to stick to basic nested table based layout with each TD tag carrying the margin and padding while developing email templates for Gmail.

<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″ align=”center”>

                                          <tr>

                                            <td align=”right” width=”3″ valign=”bottom” 

style=”line-height:0px; font-size:0px;”>

<img src=”images/cuv3.jpg” width=”3″ height=”3″ alt=” ” border=”0″ style=”display:block;” 

/>

                           </td>

</tr>

                                        </table>

11. Gmail merges emails with the same subject line 

This is associated less with end-users and more with the testing of emails. Never test emails with the same ‘from’ address and subject line on the Gmail app, since Gmail merges the same email thread, and that would try to render the text from the first email in the thread and break the layout.

12. Gmail is very fussy while parsing embedded styles 

If you’re wondering just how finicky Gmail can be, get this- should it encounter even a single error, it’ll get rid of your entire style block. An easy workaround to this issue is to use multiple style blocks. That way, you have the liberty of placing style blocks that are Gmail safe in the top block. Moreover, Gmail also throws away your block, if it exceeds 8192 characters.

13. Gmail lets recipients download large and unlinked images 

If your image is large and is not wrapped with a URL, Gmail will overlay an icon over it, allowing its recipients to download it. This is something that greatly infuriates designers because by doing so Gmail directly interferes with the email template layout. If you want to avoid this, ensure that when your images are larger than 300*150, they’re linked. 

14. Gmail converts URLs and phone numbers to links by default 

The moment Gmail encounters a URL or a phone number, it immediately inserts an anchor link around it. This is common to both its desktop and mobile versions. To prevent this, add an arbitrary HTML entity to your phone number that Gmail will fail to detect, something like “#89&”. 

Wrapping Up

In addition to the above issues which have workarounds, there are many others that still are unable to be bypassed in Gmail basic HTML templates such as:

PARTIAL/NO SUPPORT :

• Background-position
• Descendant-selectors
• Margin
• Padding

(Aesthetic):

• Background-position a:hover
• Border
• Font inheritance
• List-style-image
• No support for background images in non-Google accounts

Coding email templates for Gmail is no ordinary feat and requires you to keep a multitude of things in mind to be able to come up with the perfect Gmail basic HTML template.

Email Uplers is hopeful for some miracles. Have you come across any issues other than those stated here? We’d love to hear from you!