HTML Email Hacks Archive: Gmail workarounds

0
257


Monks love all the nichès involved in designing and coding of your HTML emails. In the journey of coding over 35000+ emails, we, Monks 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 Monks present workaround HTML email Hacks for GMAIL.

What mischiefs happen in Gmail?

As per Litmus’ Email Client Market Share survey for August 2016, Gmail desktop & mobile holds 16% and 10% 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 user.

In a recent update, Gmail was gracious enough to support CSS class property ‘display:none’, which was warmly appreciated by the email community. Even though the small step for Gmail turns out to be a giant leap for emails, we are yet far away from achieving an issue-free rendering of emails in Gmail. Some of the most 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 AndroidAs 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 29th 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.demo-email-template
    Reason behind this glitchUnfortunately, 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.
    Demo-Email-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

     

  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.

    HTML email hacks for Gmail

  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: Monks 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. We have covered the method about inlining CSS in your emails.
  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 fall-back font has been covered by the Monks.
  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.


  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

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



Original Source