What Mischief Happens In Gmail?<\/strong><\/h2>\n\n\n\nIs your HTML email not displaying properly in Gmail? As per Litmus\u2019 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.<\/p>\n\n\n\n
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:<\/p>\n\n\n\n
- Images disabled by default<\/li>
- Lack of inlining CSS support<\/li>
- No media query support<\/li>
- Float, margin, paragraph, and padding not supported<\/li>
- Gmail app on the iPhone turns phone numbers and dates automatically to blue<\/li><\/ul>\n\n\n\n
HTML Email Hacks For Gmail<\/strong><\/h2>\n\n\n\nBefore you send a Gmail HTML email, keep the following hacks in mind to avoid getting in a pickle.<\/p>\n\n\n\n
1. Images Become Disproportionate in Gmail Android<\/strong><\/h3>\n\n\n\nAs a best practice while coding images in email<\/a>, an image is accommodated in a display block of half dimension to be displayed clearly in a retina display.<\/p>\n\n\n\n![\"mailchimp](\"https:\/\/lh4.googleusercontent.com\/gpZwZswrBHUxhG8cCJs9CfHpBJW4R3E93R-4OdUiuulDARXlwCqo78szXZeN66C4AtZqiDeqaLPNHtyv81eziCYmDpnvYlY0H9Yf2bTS5Oi8rGE_vcC2C7wKIFhV5-dwGM_jYwR7=s0\")
<\/figure>\n\n\n\nThere 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.<\/p>\n\n\n\n![\"demo-email-template\"](\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2021\/10\/image1.jpg\")
<\/a><\/figure>\n\n\n\nReason behind this glitch<\/strong><\/p>\n\n\n\nUnfortunately, 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.<\/p>\n\n\n\n![\"Demo-Email-Layout\"\/](\"https:\/\/lh4.googleusercontent.com\/F86HGiMgxHVNrDohbQt285Kh9JdprW0NofXVqdvkLzDOxhUIW-aDkQDssvMo9cIpnBUozryq2WTdOzyqzHJymX3bpIg-5xLiVPcsGZgEat9eqxxvCbl0xS_GJuf6fEdsXVFcDWYi=s0\")
<\/figure>\n\n\n\nSolution: What do You do<\/strong><\/p>\n\n\n\nWhile there is no specific workaround for this currently, here are some quick fixes that can help avert this problem and optimize your <\/strong>Gmail HTML emails.<\/strong><\/p>\n\n\n\n- Don\u2019t specify the height for images in the mobile layout<\/li>
- For any spacer you want to use, make use of cell-padding property<\/li><\/ol>\n\n\n\n
\n\n\n\n2. Responsive emails not rendered on third-party apps<\/strong><\/h3>\n\n\n\nSince Gmail strips away media queries from email, responsive emails<\/a> need to be coded without media queries. Such layouts are known as Spongy. Look at the following code snippet for further clarity. <\/p>\n\n\n\n<\/div><\/div><\/div><\/div>Copy Code<\/span>Copied<\/span>Use a different Browser<\/span><\/a><\/div><\/div>@media only screen and (max-width: 480px)\n\n{\n\n .hide {display:none !important;}\n\n}\n\n<table cellpadding=\u201d0\u2033 cellspacing=\u201d0\u2033 border=\u201d0\u2033 class=\u201dhide\u201d>\n\n<tr>\n\n <td height=\u201d1\u2033 class=\u201dhide\u201d style=\u201dmin-width:700px; font-size:0px;\n\nline-height:0px;\u201d>\n\n <img height=\u201d1\u2033 src=\u201dspacer.gif\u201d style=\u201dmin-width: 700px; \n\ntext-decoration: none; border: none;\u201d \/>\n\n <\/td>\n\n<\/tr>\n\n<\/table><\/code><\/pre><\/div><\/div>\n\n\n\nIf 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.<\/p>\n\n\n\n![\"Hybrid](\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2022\/07\/hybrid-email.gif\")
<\/figure>\n\n\n\n
\n\n\n\n3. Gmail App bumps up the font size to as much as 50%<\/strong><\/h3>\n\n\n\nIn 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 you create a HTML email in Gmail.<\/p>\n\n\n\n
a) Use display:none (add this to your CSS)<\/p>\n\n\n\n
<\/div><\/div><\/div><\/div>Copy Code<\/span>Copied<\/span>Use a different Browser<\/span><\/a><\/div><\/div><div style=\u201ddisplay: none; line-height: 0; color: #ffffff;\u201d>\n\nHello World!\n\n<\/div><\/code><\/pre><\/div><\/div>\n\n\n\nb) Use white-space: nowrap<\/p>\n\n\n\n
<\/div><\/div><\/div><\/div>Copy Code<\/span>Copied<\/span>Use a different Browser<\/span><\/a><\/div><\/div><div style=\u201dwhite-space: nowrap; line-height: 0; color: #ffffff;\u201d>\n\nHello World!\n\n<\/div><\/code><\/pre><\/div><\/div>\n\n\n\nc) Use a spacer image<\/p>\n\n\n\n
<\/div><\/div><\/div><\/div>Copy Code<\/span>Copied<\/span>Use a different Browser<\/span><\/a><\/div><\/div><tr class=\u201dem_dn\u201d>\n\n <td>\n\n <table cellpadding=\u201d0\u2033 cellspacing=\u201d0\u2033 border=\u201d0\u2033 align=\u201dcenter\u201d width=\u201d600\u2033>\n\n <tr>\n\n <td cellpadding=\u201d0\u2033 cellspacing=\u201d0\u2033 border=\u201d0\u2033 height=\u201d1\u2033; style=\u201dline-height: 1px; min-width: 600px;\u201d>\n\n <img src=\u201dspacer.gif\u201d width=\u201d600\u2033 height=\u201d1\u2033 style=\u201ddisplay: block; max-height: 1px; min-height: 1px; min-width: 600px; width: 600px;\u201d\/>\n\n <\/td>\n\n <\/tr>\n\n <\/table>\n\n <\/td>\n\n <\/tr><\/code><\/pre><\/div><\/div>\n\n\n\nd) Use a div and   together<\/p>\n\n\n\n
<\/div><\/div><\/div><\/div>Copy Code<\/span>Copied<\/span>Use a different Browser<\/span><\/a><\/div><\/div><div class=\u201dem_dn\u201d style=\u201dfont:20px courier; color:#ffffff; \n\nbackground-color:#ffffff;\u201d>\n\n \n\n \n\n \n\n<\/div><\/code><\/pre><\/div><\/div>\n\n\n\n
\n\n\n![\"\"](\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/01\/Email-template-production-768x192-1.jpg\")
<\/a><\/div><\/div>\n\n\n\n4. Gmail hides ima<\/strong>ges by default<\/strong><\/h3>\n\n\n\nEmail Uplers won\u2019t categorize this as a major deal-breaker. This is because nearly 43% of Gmail users<\/a> 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\u2019t load, they don\u2019t leave large, empty placeholders in their place by using display:none.<\/p>\n\n\n\n<\/div><\/div><\/div><\/div>Copy Code<\/span>Copied<\/span>Use a different Browser<\/span><\/a><\/div><\/div>td[class=em_hide], table[class=em_hide], span[class=em_hide], br[class=em_hide]\n\n{\n\n display:none !important;\n\n}<\/code><\/pre><\/div><\/div>\n\n\n\n
\n\n\n\n5. Gmail styles links as blue and they are underlined by default<\/strong> <\/h3>\n\n\n\nTemplates in Gmail <\/strong>don\u2019t 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<\/a>,<\/strong> you need to add the following style tag.<\/p>\n\n\n\n<\/div><\/div><\/div><\/div>Copy Code<\/span>Copied<\/span>Use a different Browser<\/span><\/a><\/div><\/div><a href=\u201chttps:\/\/emailweb.com\u201d style=\u201dtext-decoration:none; \n\ncolor:#00001b\u201d>emailweb\n\n<\/a><\/code><\/pre><\/div><\/div>\n\n\n\n\u2018text-decoration:none\u2019 removes the underline and \u2018#00001b\u2019 can replace any color code.<\/p>\n\n\n\n
\n\n\n\n6. External CSS styles are stripped away<\/strong><\/h3>\n\n\n\nTemplates 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<\/a> is an important coding practice.<\/p>\n\n\n\n
\n\n\n\n7. Custom Web-font Support<\/strong><\/h3>\n\n\n\nIronically, Google hosts a custom font library but Gmail HTML email templates don\u2019t 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\u2019ve already covered it over here<\/a>.<\/p>\n\n\n\n
\n\n\n\n8. There is a white space below an image<\/strong> <\/h3>\n\n\n\nThis can be totally avoided in your <\/strong>email templates for GMAIL by adding a \u2018display:block\u2019 inside your image source code. The following code snippet illustrates the same.<\/p>\n\n\n\n<\/div><\/div><\/div><\/div>Copy Code<\/span>Copied<\/span>Use a different Browser<\/span><\/a><\/div><\/div><td style=\u201dpadding: 0px; margin: 0px; font-size:16px; font-weight:bold;\u201d>\n\n<img src=\u201dxyz.jpg\u201d width=\u201d600\u2033 height=\u201d217\u2033 border=\u201d0\u2033 style=\u201ddisplay:block;\n\npadding: 0px; margin: 0px;\u201d \/>\n\n<\/td><\/code><\/pre><\/div><\/div>\n\n\n\n
\n\n\n\n9. Gmail doesn\u2019t support <style> or <link> in the <head><\/strong> <\/h3>\n\n\n\nThis is hands down among the most frustrating limitations in this list. Gmail basic HTML <\/strong>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.<\/p>\n\n\n\n<\/div><\/div><\/div><\/div>Copy Code<\/span>Copied<\/span>Use a different Browser<\/span><\/a><\/div><\/div><a href=\u201dhttps:\/\/emailweb.com \u201d target=\u201d_blank\u201d style=\u201dcolor:#ffffff; \n\nline-height:32px; text-decoration:none; display:block; \n\nbackground-color:#e25b46;\u201d>\n\nView Infographic\n\n<\/a><\/code><\/pre><\/div><\/div>\n\n\n\nPlacement of <style> tag is a very important point to be considered when following a <\/em>step-by-step guide to building email templates<\/em><\/strong>.<\/em><\/p>\n\n\n\n
\n\n\n\n10. Float, margin, paragraph, and padding are not supported<\/strong><\/h3>\n\n\n\nIt is best to stick to basic nested table based layout with each TD tag carrying the margin and padding while developing <\/strong>email templates for Gmail.<\/p>\n\n\n\n
While many issues of the past have been patched up in subsequent updates, some of the persistent common woes faced are:<\/p>\n\n\n\n
HTML Email Hacks For Gmail<\/strong><\/h2>\n\n\n\nBefore you send a Gmail HTML email, keep the following hacks in mind to avoid getting in a pickle.<\/p>\n\n\n\n
1. Images Become Disproportionate in Gmail Android<\/strong><\/h3>\n\n\n\nAs a best practice while coding images in email<\/a>, an image is accommodated in a display block of half dimension to be displayed clearly in a retina display.<\/p>\n\n\n\n<\/figure>\n\n\n\nThere 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.<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nReason behind this glitch<\/strong><\/p>\n\n\n\nUnfortunately, 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.<\/p>\n\n\n\n<\/figure>\n\n\n\nSolution: What do You do<\/strong><\/p>\n\n\n\nWhile there is no specific workaround for this currently, here are some quick fixes that can help avert this problem and optimize your <\/strong>Gmail HTML emails.<\/strong><\/p>\n\n\n\n- Don\u2019t specify the height for images in the mobile layout<\/li>
- For any spacer you want to use, make use of cell-padding property<\/li><\/ol>\n\n\n\n
\n\n\n\n2. Responsive emails not rendered on third-party apps<\/strong><\/h3>\n\n\n\nSince Gmail strips away media queries from email, responsive emails<\/a> need to be coded without media queries. Such layouts are known as Spongy. Look at the following code snippet for further clarity. <\/p>\n\n\n\n<\/div><\/div><\/div><\/div>Copy Code<\/span>Copied<\/span>Use a different Browser<\/span><\/a><\/div><\/div>@media only screen and (max-width: 480px)\n\n{\n\n .hide {display:none !important;}\n\n}\n\n<table cellpadding=\u201d0\u2033 cellspacing=\u201d0\u2033 border=\u201d0\u2033 class=\u201dhide\u201d>\n\n<tr>\n\n <td height=\u201d1\u2033 class=\u201dhide\u201d style=\u201dmin-width:700px; font-size:0px;\n\nline-height:0px;\u201d>\n\n <img height=\u201d1\u2033 src=\u201dspacer.gif\u201d style=\u201dmin-width: 700px; \n\ntext-decoration: none; border: none;\u201d \/>\n\n <\/td>\n\n<\/tr>\n\n<\/table><\/code><\/pre><\/div><\/div>\n\n\n\nIf 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.<\/p>\n\n\n\n<\/figure>\n\n\n\n
\n\n\n\n3. Gmail App bumps up the font size to as much as 50%<\/strong><\/h3>\n\n\n\nIn 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 you create a HTML email in Gmail.<\/p>\n\n\n\n
a) Use display:none (add this to your CSS)<\/p>\n\n\n\n
<\/div><\/div><\/div><\/div>Copy Code<\/span>Copied<\/span>Use a different Browser<\/span><\/a><\/div><\/div><div style=\u201ddisplay: none; line-height: 0; color: #ffffff;\u201d>\n\nHello World!\n\n<\/div><\/code><\/pre><\/div><\/div>\n\n\n\nb) Use white-space: nowrap<\/p>\n\n\n\n
<\/div><\/div><\/div><\/div>Copy Code<\/span>Copied<\/span>Use a different Browser<\/span><\/a><\/div><\/div><div style=\u201dwhite-space: nowrap; line-height: 0; color: #ffffff;\u201d>\n\nHello World!\n\n<\/div><\/code><\/pre><\/div><\/div>\n\n\n\nc) Use a spacer image<\/p>\n\n\n\n
<\/div><\/div><\/div><\/div>Copy Code<\/span>Copied<\/span>Use a different Browser<\/span><\/a><\/div><\/div><tr class=\u201dem_dn\u201d>\n\n <td>\n\n <table cellpadding=\u201d0\u2033 cellspacing=\u201d0\u2033 border=\u201d0\u2033 align=\u201dcenter\u201d width=\u201d600\u2033>\n\n <tr>\n\n <td cellpadding=\u201d0\u2033 cellspacing=\u201d0\u2033 border=\u201d0\u2033 height=\u201d1\u2033; style=\u201dline-height: 1px; min-width: 600px;\u201d>\n\n <img src=\u201dspacer.gif\u201d width=\u201d600\u2033 height=\u201d1\u2033 style=\u201ddisplay: block; max-height: 1px; min-height: 1px; min-width: 600px; width: 600px;\u201d\/>\n\n <\/td>\n\n <\/tr>\n\n <\/table>\n\n <\/td>\n\n <\/tr><\/code><\/pre><\/div><\/div>\n\n\n\nd) Use a div and   together<\/p>\n\n\n\n
<\/div><\/div><\/div><\/div>Copy Code<\/span>Copied<\/span>Use a different Browser<\/span><\/a><\/div><\/div><div class=\u201dem_dn\u201d style=\u201dfont:20px courier; color:#ffffff; \n\nbackground-color:#ffffff;\u201d>\n\n \n\n \n\n \n\n<\/div><\/code><\/pre><\/div><\/div>\n\n\n\n
\n\n\n<\/a><\/div><\/div>\n\n\n\n4. Gmail hides ima<\/strong>ges by default<\/strong><\/h3>\n\n\n\nEmail Uplers won\u2019t categorize this as a major deal-breaker. This is because nearly 43% of Gmail users<\/a> 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\u2019t load, they don\u2019t leave large, empty placeholders in their place by using display:none.<\/p>\n\n\n\n<\/div><\/div><\/div><\/div>Copy Code<\/span>Copied<\/span>Use a different Browser<\/span><\/a><\/div><\/div>td[class=em_hide], table[class=em_hide], span[class=em_hide], br[class=em_hide]\n\n{\n\n display:none !important;\n\n}<\/code><\/pre><\/div><\/div>\n\n\n\n
\n\n\n\n5. Gmail styles links as blue and they are underlined by default<\/strong> <\/h3>\n\n\n\nTemplates in Gmail <\/strong>don\u2019t 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<\/a>,<\/strong> you need to add the following style tag.<\/p>\n\n\n\n<\/div><\/div><\/div><\/div>Copy Code<\/span>Copied<\/span>Use a different Browser<\/span><\/a><\/div><\/div><a href=\u201chttps:\/\/emailweb.com\u201d style=\u201dtext-decoration:none; \n\ncolor:#00001b\u201d>emailweb\n\n<\/a><\/code><\/pre><\/div><\/div>\n\n\n\n\u2018text-decoration:none\u2019 removes the underline and \u2018#00001b\u2019 can replace any color code.<\/p>\n\n\n\n
\n\n\n\n6. External CSS styles are stripped away<\/strong><\/h3>\n\n\n\nTemplates 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<\/a> is an important coding practice.<\/p>\n\n\n\n
\n\n\n\n7. Custom Web-font Support<\/strong><\/h3>\n\n\n\nIronically, Google hosts a custom font library but Gmail HTML email templates don\u2019t 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\u2019ve already covered it over here<\/a>.<\/p>\n\n\n\n
\n\n\n\n8. There is a white space below an image<\/strong> <\/h3>\n\n\n\nThis can be totally avoided in your <\/strong>email templates for GMAIL by adding a \u2018display:block\u2019 inside your image source code. The following code snippet illustrates the same.<\/p>\n\n\n\n<\/div><\/div><\/div><\/div>Copy Code<\/span>Copied<\/span>Use a different Browser<\/span><\/a><\/div><\/div><td style=\u201dpadding: 0px; margin: 0px; font-size:16px; font-weight:bold;\u201d>\n\n<img src=\u201dxyz.jpg\u201d width=\u201d600\u2033 height=\u201d217\u2033 border=\u201d0\u2033 style=\u201ddisplay:block;\n\npadding: 0px; margin: 0px;\u201d \/>\n\n<\/td><\/code><\/pre><\/div><\/div>\n\n\n\n
\n\n\n\n9. Gmail doesn\u2019t support <style> or <link> in the <head><\/strong> <\/h3>\n\n\n\nThis is hands down among the most frustrating limitations in this list. Gmail basic HTML <\/strong>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.<\/p>\n\n\n\n<\/div><\/div><\/div><\/div>Copy Code<\/span>Copied<\/span>Use a different Browser<\/span><\/a><\/div><\/div><a href=\u201dhttps:\/\/emailweb.com \u201d target=\u201d_blank\u201d style=\u201dcolor:#ffffff; \n\nline-height:32px; text-decoration:none; display:block; \n\nbackground-color:#e25b46;\u201d>\n\nView Infographic\n\n<\/a><\/code><\/pre><\/div><\/div>\n\n\n\nPlacement of <style> tag is a very important point to be considered when following a <\/em>step-by-step guide to building email templates<\/em><\/strong>.<\/em><\/p>\n\n\n\n
\n\n\n\n10. Float, margin, paragraph, and padding are not supported<\/strong><\/h3>\n\n\n\nIt is best to stick to basic nested table based layout with each TD tag carrying the margin and padding while developing <\/strong>email templates for Gmail.<\/p>\n\n\n\n
As a best practice while coding images in email<\/a>, an image is accommodated in a display block of half dimension to be displayed clearly in a retina display.<\/p>\n\n\n\n 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.<\/p>\n\n\n\n Reason behind this glitch<\/strong><\/p>\n\n\n\n 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.<\/p>\n\n\n\n Solution: What do You do<\/strong><\/p>\n\n\n\n While there is no specific workaround for this currently, here are some quick fixes that can help avert this problem and optimize your <\/strong>Gmail HTML emails.<\/strong><\/p>\n\n\n\n Since Gmail strips away media queries from email, responsive emails<\/a> need to be coded without media queries. Such layouts are known as Spongy. Look at the following code snippet for further clarity. <\/p>\n\n\n\n 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.<\/p>\n\n\n\n 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 you create a HTML email in Gmail.<\/p>\n\n\n\n a) Use display:none (add this to your CSS)<\/p>\n\n\n\n b) Use white-space: nowrap<\/p>\n\n\n\n c) Use a spacer image<\/p>\n\n\n\n d) Use a div and   together<\/p>\n\n\n\n Email Uplers won\u2019t categorize this as a major deal-breaker. This is because nearly 43% of Gmail users<\/a> 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\u2019t load, they don\u2019t leave large, empty placeholders in their place by using display:none.<\/p>\n\n\n\n Templates in Gmail <\/strong>don\u2019t 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<\/a>,<\/strong> you need to add the following style tag.<\/p>\n\n\n\n \u2018text-decoration:none\u2019 removes the underline and \u2018#00001b\u2019 can replace any color code.<\/p>\n\n\n\n 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<\/a> is an important coding practice.<\/p>\n\n\n\n Ironically, Google hosts a custom font library but Gmail HTML email templates don\u2019t 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\u2019ve already covered it over here<\/a>.<\/p>\n\n\n\n This can be totally avoided in your <\/strong>email templates for GMAIL by adding a \u2018display:block\u2019 inside your image source code. The following code snippet illustrates the same.<\/p>\n\n\n\n This is hands down among the most frustrating limitations in this list. Gmail basic HTML <\/strong>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.<\/p>\n\n\n\n Placement of <style> tag is a very important point to be considered when following a <\/em>step-by-step guide to building email templates<\/em><\/strong>.<\/em><\/p>\n\n\n\n It is best to stick to basic nested table based layout with each TD tag carrying the margin and padding while developing <\/strong>email templates for Gmail.<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\n
\n\n\n\n2. Responsive emails not rendered on third-party apps<\/strong><\/h3>\n\n\n\n
@media only screen and (max-width: 480px)\n\n{\n\n .hide {display:none !important;}\n\n}\n\n<table cellpadding=\u201d0\u2033 cellspacing=\u201d0\u2033 border=\u201d0\u2033 class=\u201dhide\u201d>\n\n<tr>\n\n <td height=\u201d1\u2033 class=\u201dhide\u201d style=\u201dmin-width:700px; font-size:0px;\n\nline-height:0px;\u201d>\n\n <img height=\u201d1\u2033 src=\u201dspacer.gif\u201d style=\u201dmin-width: 700px; \n\ntext-decoration: none; border: none;\u201d \/>\n\n <\/td>\n\n<\/tr>\n\n<\/table><\/code><\/pre><\/div><\/div>\n\n\n\n<\/figure>\n\n\n\n
\n\n\n\n3. Gmail App bumps up the font size to as much as 50%<\/strong><\/h3>\n\n\n\n
<div style=\u201ddisplay: none; line-height: 0; color: #ffffff;\u201d>\n\nHello World!\n\n<\/div><\/code><\/pre><\/div><\/div>\n\n\n\n<div style=\u201dwhite-space: nowrap; line-height: 0; color: #ffffff;\u201d>\n\nHello World!\n\n<\/div><\/code><\/pre><\/div><\/div>\n\n\n\n<tr class=\u201dem_dn\u201d>\n\n <td>\n\n <table cellpadding=\u201d0\u2033 cellspacing=\u201d0\u2033 border=\u201d0\u2033 align=\u201dcenter\u201d width=\u201d600\u2033>\n\n <tr>\n\n <td cellpadding=\u201d0\u2033 cellspacing=\u201d0\u2033 border=\u201d0\u2033 height=\u201d1\u2033; style=\u201dline-height: 1px; min-width: 600px;\u201d>\n\n <img src=\u201dspacer.gif\u201d width=\u201d600\u2033 height=\u201d1\u2033 style=\u201ddisplay: block; max-height: 1px; min-height: 1px; min-width: 600px; width: 600px;\u201d\/>\n\n <\/td>\n\n <\/tr>\n\n <\/table>\n\n <\/td>\n\n <\/tr><\/code><\/pre><\/div><\/div>\n\n\n\n<div class=\u201dem_dn\u201d style=\u201dfont:20px courier; color:#ffffff; \n\nbackground-color:#ffffff;\u201d>\n\n \n\n \n\n \n\n<\/div><\/code><\/pre><\/div><\/div>\n\n\n\n
\n\n\n<\/a><\/div><\/div>\n\n\n\n4. Gmail hides ima<\/strong>ges by default<\/strong><\/h3>\n\n\n\n
td[class=em_hide], table[class=em_hide], span[class=em_hide], br[class=em_hide]\n\n{\n\n display:none !important;\n\n}<\/code><\/pre><\/div><\/div>\n\n\n\n
\n\n\n\n5. Gmail styles links as blue and they are underlined by default<\/strong> <\/h3>\n\n\n\n
<a href=\u201chttps:\/\/emailweb.com\u201d style=\u201dtext-decoration:none; \n\ncolor:#00001b\u201d>emailweb\n\n<\/a><\/code><\/pre><\/div><\/div>\n\n\n\n
\n\n\n\n6. External CSS styles are stripped away<\/strong><\/h3>\n\n\n\n
\n\n\n\n7. Custom Web-font Support<\/strong><\/h3>\n\n\n\n
\n\n\n\n8. There is a white space below an image<\/strong> <\/h3>\n\n\n\n
<td style=\u201dpadding: 0px; margin: 0px; font-size:16px; font-weight:bold;\u201d>\n\n<img src=\u201dxyz.jpg\u201d width=\u201d600\u2033 height=\u201d217\u2033 border=\u201d0\u2033 style=\u201ddisplay:block;\n\npadding: 0px; margin: 0px;\u201d \/>\n\n<\/td><\/code><\/pre><\/div><\/div>\n\n\n\n
\n\n\n\n9. Gmail doesn\u2019t support <style> or <link> in the <head><\/strong> <\/h3>\n\n\n\n
<a href=\u201dhttps:\/\/emailweb.com \u201d target=\u201d_blank\u201d style=\u201dcolor:#ffffff; \n\nline-height:32px; text-decoration:none; display:block; \n\nbackground-color:#e25b46;\u201d>\n\nView Infographic\n\n<\/a><\/code><\/pre><\/div><\/div>\n\n\n\n
\n\n\n\n10. Float, margin, paragraph, and padding are not supported<\/strong><\/h3>\n\n\n\n