This just in: Gmail DOES support embedded styles!
With limitations of course….
Though many in the email design industry have griped about how Gmail strips the <style> section from emails, this isn’t quite true. Some styles are actually allowed through in the web app (not mobile apps). What Gmail really does is to strip the classes and ID’s from elements in the email, making it impossible to style using those identifiers.
This means that you can style elements in Gmail using generic selectors. For example, if you want to remove all padding, borders and margins from tables, you can use the following code and it will be effective in the Gmail web app:
<style>
table {border: 0; margin: 0; padding: 0;}
</style>Responsive Design
It even works inside of media queries! This got us very excited. We thought, “The answer is finally here! Responsive design in the Gmail app!” Unfortunately, this is not the case. It seems that the Gmail app (for mobile devices) strips everything inside of the style tags. We tried using some of the generic selectors that work inside of the Gmail web app, but those don’t work either.
The Sad Truth
In the world of browsers, it’s Internet Explorer that causes web designers and developers to gnash their teeth. But when it comes to email web clients, for some reason it is the otherwise forward thinking tech giant Google that has us pulling our hair out. Google has decided not to allow any of the coding techniques that would otherwise improve users’ mobile experience. We can only hope that the next release of the Gmail app will remedy this situation.
Google, hear my cry!
Author: Alex Ilhan
Hailing all the way from England, Alex brings his email development expertise along with an endless stream of cups of tea and British cynicism. Follow him on Twitter: @omgitsonlyalex.
3 thoughts on “This just in: Gmail DOES support embedded styles!”
Comments are closed.
This is indeed very annoying! I’ve also found that Google Apps still strips out the <style> tag too. So businesses running their email through Gmail will not be able to see your element styling from the head.
Thanks to your discovery that Gmail supports style but strips id and classes, I did a few experiments and apparently you can use attribute selectors to target other attributes to mimic the availability of classes!
http://freshinbox.com/blog/interactive-emails-in-gmail-using-css-attribute-selectors/
This is great news (kind of)! I’ll be sure to report back if I find anything of interest after some testing. Thanks!