[Update] Newer HTML Email Hacks Archive for Gmail

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

Not every email client is identical when showing the same email…

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 some need coaxing (Gmail, Outlook, Yahoo!) so that they play well the Email.

In our first of the series, the Uplers present  HTML email hacks & workarounds for GMAIL.

What mischief happens in Gmail?

As per Litmus’ Email Client Market Share survey for March 2018, Gmail desktop & Android holds 22% and 3% respectively in overall email client distribution. So it is very much important that your emails render perfectly across both medium when a majority of subscribers are Gmail userS.

Uplers create emails that render well across 40+ email clients. Want one? Let’s talk.

As of 29th March 2018, many Gmail android users have been complaining about receiving emails where images are getting squished and there are unnecessary spaces between different sections.

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 are not supported in Gmail.
• Gmail app on iPhone turns Phone numbers and date automatically to blue.

HTML email hacks for Gmail

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.As of 29^th March 2018, we identified a new glitch with Gmail Android App. We found that whenever the height of an image is specified in an email, the image is not downscaled proportionately, especially when the email is viewed in Gmail Android.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, the image has the width as per the screen size, but the height is of 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:

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

Want to impart a great experience to your subscribers regardless of the email client or device? Get a quote.

---

2. Responsive emails not rendered on third party app: Since Gmail strips away media queries from email, responsive emails need to be coded without media queries. Such layouts are known as Spongy.

If you code it without media queries and then use media queries to further enhance the layout for a native app that becomes Hybrid Emails.

Uplers can help you in creating responsive emails for every device. Order now.

---

3. Gmail App bumps up the font size 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 (and nobody likes that). There are 4 ways to avoid this.

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

b) Use white-space: nowrap

c) Use a spacer image

d) Use a div and &nbsp together

---

4. Gmail hides images by default: Uplers won’t categorize this as a major deal breaker. Since 43% of Gmail users read their emails without having images on as per a research in 2014. Best practice is to include proper alt text 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.

---

5. Gmail styles links as blue and underlined by default: Gmail doesn’t support black , #00 or #000000 and replaces them with default link color (i.e. #1155CC). So in order to prevent links to be blue and underlined you need to add following style tag.

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

---

6. External CSS styles are stripped away: Gmail strips away any CSS that is not inlined. ESPs such as Campaign Monitor and Mailchimp help you inline your CSS or you can 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 custom font library but Gmail doesn’t support the inclusion of custom web fonts. It is better to provide appropriate fallback font while experimenting with custom web fonts. Conditions to look into while choosing fonts on basis of available fallback font has been covered by the Uplers.

---

8. There is a white space below an image: This can be totally avoided by adding a ‘display:block’ inside your image source code.

---

9. Gmail doesn’t support <style> or <link> in the <head>: One of the most frustrating in this list. Gmail ignores any style or link tags specified in the head section and hence you need to overwrite the default link color by adding a color style to each and every <a> within email body.

Placement of <style> tag is 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.

---

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

In addition to above issues which have workarounds, there are many others which still are unable to be bypassed such as:

PARTIAL/NO SUPPORT :

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

(Aesthetic):

• Background-position a:hover
• Border
• Font inheritance
• List-style-image

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