Developing HTML emails is not for the faint-hearted. There are so many mail clients and so many user interfaces to take into consideration. One of the biggest, and of course trickiest, is Gmail.
Google’s email service only hit the market in 2004, but it quickly made a name for itself and replaced Yahoo as a market leader in no time. Today, Gmail remains the most popular email platform, owning 43% of the email service market share in 2020 with over 1.8 billion users worldwide. Interesting for developers to note is that 75% of all Gmail users access their email on mobile devices.
When we at Databias develop HTML signatures, we always take Gmail – and its quirks into account. Here we list a few.
Although many people associate Gmail with webmail and mobile apps, Gmail has many different email clients including Gmail’s inbox client, G Suite for businesses, as well as a particularly problematic version of their Android client that’s configured for POP/IMAP access (GANGA).
Gmail does support embedded styles. However, it is very finicky when it comes to parsing embedded styles. If it encounters even one error, it throws away the entire style block. Gmail also eliminates your style block if it exceeds 8192 characters so keep them short.
Gmail displays an image download icon over large unlinked images i.e. those that are not wrapped with a URL. The simplest solution is to ensure that images larger than 300×150 are wrapped with a link.
Gmail automatically converts phone numbers, email address and URLs to links unless you have already done so yourself. Therefore it is wise to always insert an anchor around the URL or email address and format it like the rest of your text. For example:
Gmail uses the HTML5 DOCTYPE regardless of the DOCTYPE specified in your email. This may cause your email to render differently than if you loaded your email in a browser. The biggest problem with this DOCTYPE is that it can create extra space under images. There are a few workarounds to fix this issue, and these are the simplest (these work in Outlook.com and Yahoo! Beta, as well):
- Add style display:block to the image element
- Add align absbottom in the image element
- Add align texttop to the image element
Those are some basic hints to keep your email signatures rendering well in Gmail. If you are interested in our email branding solution, get in touch with us support@databias.co.za