With many potential customers opening emails on mobile, it’s essential that marketers optimize their sends for tablets and smartphones in addition to desktop computers. Luckily, Google has made that easier with their announcement that Gmail has begun to support emails created with responsive design starting in late September.
Email designers, it’s time to rejoice. Gmail is changing—big time!
On August 31, 2016, Gmail began supporting the CSS property display: none; and soon now, Gmail announced they will begin supporting <style> and media queries too.
This is huge news for the email community, and will have major implications on email design and development.
So what’s supported?
The good news is that quite a lot is supported when the new version launched. From a design standpoint, there are two main benefits:
-
We can use media queries, bringing support for responsive design up to iPhone mail app standards and making responsive design the de-facto standard for (almost) all mobile users.
-
Support for the <style> tag means we can use classes to apply style to content, greatly reducing the need to inline code. That means a huge decrease in code size, improves load times for all email users and reduces time spent by email devs.
Gmail has not historically supported classes or id’s in the <head> of an email, which forced email designers to use inline CSS to style their emails. Now, Gmail will support embedded CSS with classes and id’s, which removes the need for inline CSS in Gmail.
What this means for Email design
These updates signal a major turning point in email development, allowing designers and marketers to create more accessible email campaigns without the need for CSS inlining. With Gmail’s support for media queries, over 75% of email clients will support responsive design.
This GIF from Google illustrates the difference:
What email designers can be happy about
Aside from the obvious code improvements, there is much for email designers to be excited about here:
The much improved support for CSS also means much less reliance on email hacks. That’s a great thing, because hacky code (like the dir=“rtl” technique for example) can often cause secondary rendering issues elsewhere.
But most importantly, the huge opportunity here is time. Email designers and developers can now focus on the things that are important — creating a great message and experience for users, instead of drafting long pages of complex code.
What does this mean for marketers?
The growth of email engagement on mobile devices is not slowing anytime soon, so this is a move that’s not only welcomed, but long overdue. Here’s why Gmail’s announcement is such a big deal for marketers:
-
Wider reach: Gmail has one billion users worldwide, and 75% of Gmail users access their accounts on mobile devices. This change represents a tremendous opportunity for email marketers to target millions of potential customers with emails optimized for mobile.
-
Better user experience: 42% of consumers in a BlueHornet study said they would delete an email if it didn’t display properly on a mobile device. This change will improve the recipient experience, and perhaps save some messages from the dreaded delete.
-
Greater accessibility: Accessibility in email is essential for a campaign’s success. Features in CSS media queries that Gmail now support include larger, touch-friendly buttons and automatic image resizing. Additionally, Gmail will support CSS screen-reading settings so recipients can more easily listen to emails as well.
-
Streamlined email design: Email marketers and designers will no longer have to hack their way to mobile-optimized emails using CSS inlining, templates, or manually adjusting sizes and proportions. CSS media queries are a far less complicated, one-stop process for responsive design.
-
Gmail is an influencer: Now that the largest email provider is supporting responsive design, other services may follow suit in order to compete.
How will these changes impact your email? Use Juvlon to instantly preview your email in Gmail—and other email clients too.