US Data Corporation Direct Marketing Blog

Highlights of Gmail’s Support for Embedded Styles and Media Queries3:12 pm


By Janet

Highlights of Gmail’s Support for Embedded Styles and Media Queries

Since August, email marketers around the world have been looking forward to Gmail’s new support for media queries and responsive design. The changes are finally here! Gmail now supports <style> tags, classes, IDs, and media queries. Before the changes, email designers had to rely on inline CSS to style their emails. Now, Gmail supports embedded CSS with classes and IDs, which eliminates the need for inline CSS in Gmail. This gives designers more flexibility and less obstacles to overcome to make their emails responsive.

Gmail has supported CSS for a long time, but only a very limited amount. Gmail’s support has mainly been for inline styles and not for style sheets, which allow email designers to swiftly make changes to an entire HTML email with minimal re-coding.

Gmail’s support of style classes and IDs means that designers can stop using inline styles for every single element. You can now use a class instead, and a single update to that class in the <head> will affect every occurrence of that style.

Media query in a CSS technique introduced in CSS3. It uses the @media rule to include a block of CSS properties only if a certain condition is true. Media queries allow designers to code a single responsive template that displays well no matter what device readers use, creating a cohesive viewing and reading experience. Many emails rely on media queries to modify content and design to create a user-friendly experience across a range of screens sizes and devices. It’s very important that your emails are responsive since more than 50% of all email opens happen on mobile devices.

Gmail is also introducing additional support for CSS background properties such as background-clip, background-position, and background-size. With background-size support, emails can have scalable and responsive background images. These changes will definitely help designers add some flexibility to email designs.

However, it’s important to note that although designing for Gmail has gotten easier, you still need to use tables for Outlook. Unfortunately, Outlook only supports the table background attribute and not background CSS. There isn’t a universal email design standard yet.

Example without responsive design. picture2

Example without responsive design.                        Example with responsive design.

(Source: https://gsuite-developers.googleblog.com/2016/09/your-emails-optimized-for-every-screen-with-responsive-design.html)

Also, if you have a large Outlook audience, then inline styles and tables are still necessary for email design. Hybrid/spongy development can still be used in emails as a baseline structure for tricky clients like Outlook. Outlook doesn’t respect embedded CSS. These rules need to be replicated inline. Outlook will strip CSS out when stripping the <head>and <body> tags.

The new Gmail support changes currently only affect Gmail webmail, Inbox webmail, and Android’s Gmail and Inbox apps. Changes for the Gmail and Inbox apps on iOS is expected to come out soon.

Gmail has made it easier to design emails that look great across their clients and a lot more accessible. These changes will help email marketers and designers create more user-friendly email campaigns without the need for inline CSS. Email accessibility is critical to email marketing success.  An email is a waste if the recipient can’t read or interact with it. To view a full list Gmail supported changes, please visit Gmail’s official documentation and the developer documentation.

How do you feel about Gmail’s changes? Let us know in a comment below.


CSS & Media Query Tutorials:

https://css-tricks.com/ideas-behind-responsive-emails/

https://litmus.com/blog/a-guide-to-css-inlining-in-email

http://kb.mailchimp.com/campaigns/ways-to-build/css-in-html-email

http://www.w3schools.com/css/css_rwd_mediaqueries.asp

https://litmus.com/blog/understanding-media-queries-in-html-email

Search

Newsletter

Sign up for our free mailing list to receive our newsletter, special promotions, and more!

Follow Us

Facebook Twitter LinkedIn Google+ RSS Feed

Like Us on Facebook

Learn More About...

Email Marketing

Marketing Strategy

Direct Mail Marketing

Data Cards

Fun Marketing Facts

Mobile Marketing

Social Media

Happy Client Highlight

Work Tips

Recent Posts

5 Tips for Convincing Clients to Try New Marketing Strategies

Is Direct Mail Marketing Still Effective with Millennials?

Email Marketing Relevancy Is More Important Than Ever

5 Black Friday and Cyber Monday Email Marketing Guidelines

Marketing 101: What is Direct Marketing?

Archives

April 2017

January 2017

November 2016

October 2016

September 2016

August 2016

July 2016

June 2016

May 2016

April 2016

March 2016

February 2016

January 2016

December 2015

November 2015

October 2015

September 2015

August 2015

July 2015

June 2015

May 2015

April 2015

March 2015

February 2015

January 2015

December 2014

November 2014

October 2014

September 2014

August 2014

July 2014

June 2014

May 2014

April 2014

March 2014

February 2014

January 2014

December 2013

November 2013

October 2013

September 2013

August 2013

July 2013

April 2013

March 2013

February 2013

January 2013

December 2012

November 2012

October 2012

September 2012

August 2012

July 2012

June 2012

May 2012

April 2012

March 2012

February 2012

January 2012

December 2011

November 2011

October 2011

September 2011

August 2011

July 2011

June 2011