“Creating email templates that look perfect in all email clients is easy…” said no web developer, ever. Each renders HTML in a different way and it can be a serious challenge to make your perfectly designed template actually look perfect in the recipient’s inbox.
And with Gmail becoming a more and more popular email client - especially in B2B - it can no longer be ignored when developing templates.
Litmus’ Email Client Market Share recently highlighted Gmail as 2nd and Google Android as the 4th most popular email clients. Google Android is higher than both Apple Mail and Outlook, and the vast majority of design agencies simply do not factor in any code considerations for Android. This becomes more of an issue with the Gmail app for Android which Google is strongly encouraging everyone to use as of Android 5.0. With that in mind, we felt compelled to provide a few tips, when designing HTML templates, to ensure they remain looking sexy on all clients - particularly Gmail and Google Android
1. Avoid splitting the email into more than 2 columns. It is possible to design and implement a 3 column design, where each column increases to full width on the mobile view. But the process of increasing to full width on a mobile view becomes very difficult especially in Android Gmail.
2. Ensure multi-column layouts are of equal width. With 1 column occupying more than half of the desktop width, it becomes very difficult to shift all columns to full width on the mobile view in Android Gmail.
3. Ensure content is the same length in 2 column layout. 2 columns of content will sit in a row spanning the full width of the email. Therefore, if one column contains more content than the other, the smaller column will contain blank space (or just the background colour) to fill the remaining space to match the height of the other column. This becomes more apparent for email templates where the height of one column could easily increase or decrease when the text it contains is changed for example.
4. Avoid vertically aligning content other than to the top. Attempting to vertically align content to the middle or bottom becomes very difficult in Android Gmail. For example, to align a CTA button to the bottom of a content block containing text becomes impossible to achieve consistently across email clients. Our recommended approach would be to create a new row immediately below containing the CTA button.
Follow these simple tips and maybe we’ll start hearing web developers actually say “creating email templates that look perfect in all email clients is easy…”
Over the past 7 years CleverTouch have developed more than 250 responsive email templates for our clients. To understand how CleverTouch can help make your template designs render perfectly across all email clients, get in touch.
