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.