It’s been 12 years since Gmail launched, and it’s been 12 years that Gmail has been unable to support media queries. Today (30th September 2016) they have finally joined the 21st century.
Email designers have had to use inline styles and CSS to make their emails look as they should in Gmail. Even then the appearance was lacklustre at best, and that’s still being polite. Gmail will now support embedded CSS in the of an email’s code, which makes the need for inlining CSS less important. This therefore also means responsive emails are much easier and more reliable to code for Gmail support.
The benefits this has are clear – Better looking emails with less painstaking hacks. Some of the greatest improvements will be responsive designs working much better on your mobile devices, the support of background images and buttons will render better to aid accessibility. If you’re a Gmail user, keep an eye on your marketing emails over the next few weeks and no doubt you’ll see this change for yourself. Be patient though if you don’t notice it straight away as this is a gradual roll out which may take a couple of weeks to complete.
CSS Properties Supported in Gmail and Inbox by Gmail
Gmail took their modernisation to a new level by being the first ever email platform to release full documentation on what CSS properties their new development caters for:
- azimuth
- background
- background-blend-mode
- background-clip
- background-color
- background-image
- background-origin
- background-position
- background-repeat
- background-size
- border
- border-bottom
- border-bottom-color
- border-bottom-left-radius
- border-bottom-right-radius
- border-bottom-style
- border-bottom-width
- border-collapse
- border-color
- border-left
- border-left-color
- border-left-style
- border-left-width
- border-radius
- border-right
- border-right-color
- border-right-style
- border-right-width
- border-spacing
- border-style
- border-top
- border-top-color
- border-top-left-radius
- border-top-right-radius
- border-top-style
- border-top-width
- border-width
- box-sizing
- break-after
- break-before
- break-inside
- caption-side
- clear
- color
- column-count
- column-fill
- column-gap
- column-rule
- column-rule-color
- column-rule-style
- column-rule-width
- column-span
- column-width
- columns
- direction
- display
- elevation
- empty-cells
- float
- font
- font-family
- font-feature-settings
- font-kerning
- font-size
- font-size-adjust
- font-stretch
- font-style
- font-synthesis
- font-variant
- font-variant-alternates
- font-variant-caps
- font-variant-east-asian
- font-variant-ligatures
- font-variant-numeric
- font-weight
- height
- image-orientation
- image-resolution
- isolation
- letter-spacing
- line-height
- list-style
- list-style-position
- list-style-type
- margin
- margin-bottom
- margin-left
- margin-right
- margin-top
- max-height
- max-width
- min-height
- min-width
- mix-blend-mode
- object-fit
- object-position
- opacity
- outline
- outline-color
- outline-style
- outline-width
- overflow
- padding
- padding-bottom
- padding-left
- padding-right
- padding-top
- pause
- pause-after
- pause-before
- pitch
- pitch-range
- quotes
- richness
- speak
- speak-header
- speak-numeral
- speak-punctuation
- speech-rate
- stress
- table-layout
- text-align
- text-combine-upwrite
- text-decoration
- text-decoration-color
- text-decoration-line
- text-decoration-skip
- text-decoration-style
- text-emphasis
- text-emphasis-color
- text-emphasis-style
- text-indent
- text-orientation
- text-overflow
- text-transform
- text-underline-position
- unicode-bidi
- vertical-align
- voice-family
- width
- word-spacing
- writing-mode
What Gmail’s new media query support means for businesses and the end-consumer
Businesses should be able to enjoy a slightly reduced build cost for their email campaigns as the coding is (in theory) easier to do. Furthermore, the design of the email can be more advanced than before and as mentioned earlier, they’ll look much better on mobile devices without the need to pinch and zoom the screen.
These benefits link down to the end-consumer, with prettier and more modern looking emails. 16% of email opens are on Gmail platforms. Thanks to this new support, 16% more of your opens can deliver a more seamless and slick brand experience.