The creative Outlook is brighter for Gmail. The first was from Litmus with the announcement of their partnership with Microsoft. This basically means that the email testing community will have a direct contact / bug feed. This will enable the team at Microsoft to pinpoint the pitfalls of the platform and look at ways to iron them out.
When it comes to rendering and handling our beautifully crafted emails, Outlook has long been a thorn in the email creative’s side. A direct communication channel with the product team is a big plus for the email community.
As if this wasn’t epic enough, Gmail have also shared their big announcement. They have now added support for the <style> tag and have confirmed that they will be supporting media queries at the end of the month! Yes, you heard me correctly. Please return to your previous seated position and stow your oxygen masks safely above your head.
To support this update, Gmail have released a host of useful resources including documents and blogs explaining how to benefit from this change. Please see the end of this article for links.
With an increase of webmail traffic to 28% as reported by Litmus this month, this is great timing. I have worked with Many companies opting to use Gmail as their corporate email client. Could this now influence an even bigger shift? I hope that Gmail’s recent troublesome server drop was just down to a rush of post-announcement news. On a serious note, although the drop was brief, those outages could still affect productivity.
Ok, so what does this mean for my campaign?
You now have more control over the styling of your responsive templates. The styling and mobile layout can now be adjusted via the style tag and media queries. This means a larger number of your recipients will enjoy a similar experience and you will have more control over your creative.
The supported CSS properties vary across different mobile email clients. For example, some of the properties used to create interactive or kinetic email are not yet supported in Gmail. We will keep a close eye on this.
Although font styling properties have been added, be careful when adding custom web fonts. Support for these is not included. Regardless of email client, always remember that web fonts can take time to load. Litmus have reported an average of 8 seconds to grab the reader’s attention on open. Always test your emails on a slower mobile network signal with a poor download speed.
I remember a time when background creative would need to be designed to work with Gmail’s positioning limitations. Gmail have now included lots of background image control through the CSS. This is a big plus for fluid or layered creative. With this in mind, remember download speeds and readability when placing your content. Most versions of Outlook do not support CSS backgrounds, so always ensure that your design degrades gracefully across all email experiences.
Will this affect me in EasyEditor?
In a nutshell, the older EasyEditor code will benefit from some of the added styling options. The new rebooted code will continue to work as intended. It will also benefit from the added styling options and potential reduction in code weight.
Older templates built using the original responsive code will work much as they did before. However, now they will enjoy the benefits of the added CSS support. This means styling or backgrounds controlled by the <style> tag will render and position well on native iOS, Android and now Gmail. The documentation provided by Google does not yet mention which HTML doctype is supported. We will test this on release. The doctype will determine if the older column blocks stack on mobile or not. There are still ways to create a stacked responsive structure through the use of floated tables in older templates. You can access the HTML code within the editor to manually implement these yourself. You can also have these created and inserted into your template by our creative studio.
EasyEditor Mobile Code
How about the new EasyEditor mobile code rebooted? This was originally implemented to overcome a number of issues. The first issue being the inconsistencies within mobile email clients when rendering responsive structures, particularly those lacking media query support. We tackled this through the use of fluid hybrid layout. One of the biggest reasons for this was to deal with the issues that the Gmail app presented. Through a mixture of inlined styles, targeted widths and media queries, the code is super-flexible in EasyEditor. It offers a consistent experience across the majority of email clients. Although Gmail makes up a significant percentage of mobile email opens, there are other reasons why the fluid hybrid structure is a robust approach, like older handsets and business accounts.
Another reason for the reboot was to introduce a flexible mobile-first structure and remove the need for the specific HTML5 doctype. Rather than creating a fixed desktop design and using media queries to contort it into a responsive mobile layout, we moved to a flexible mobile-first design approach that solidifies when rendered in desktop email clients.
Future proof your email design
My personal mantra when it comes to email creative is ‘keep it simple’.
Overloading the email space with graphics and complicated code layout can often come back to haunt you within the various email clients. Think of it as the shop window rather than the shop itself. It needs to be seamless, uncluttered, immediate, and on-brand.
Users spend 80% of their time looking at information above the fold so make sure you place the call to action within this area. It’s basically the newspaper folded in half on the newspaper stand. The main headline and image is going to encourage the required action. If they do read on, keep it clear, clean and concise with consistent well-spaced out items. The mind will find it easier to navigate and digest the content.
Please find a list of helpful articles explaining the supported structures and properties:
Official Gmail Blog – Better emails, tailored to all your devices
Gmail & Inbox Sender Resources – CSS Support
Gmail & Inbox Sender Resources – Gmail Supported CSS Properties & Media Queries
Email on Acid – Gmail Announces Support for Embedded Styles and Media Queries