Finally! Gmail will support Responsive Email
Posted: Wed Dec 04, 2024 9:37 am
We're back, marketers! The routine begins for most people. And what better way to get back than with good news? What seemed like it would never come... has arrived. Gmail has finally put aside its stubbornness and agreed to accept media queries to properly adapt the design of emails to different screens .
Soon, users who use Gmail as an Email Service Provider (ESP) will be able south africa mobile phone number list to receive their emails on their mobile devices with a responsive design, providing better visibility and usability to the user experience.
Gmail will support Responsive GIF
Until now, Gmail has dedicated its efforts to improving mobile usability on its own, ignoring the CSS inside the <style> tag and, therefore, preventing the correct rendering of emails. Finally, it has come to its senses and made the right decision: to make life a little less complicated for email marketing professionals. It seems that ESPs are beginning to collaborate in the standardization of email marketing, which will make the day-to-day life of email designers considerably easier. Another clear example of this is the collaboration between Microsoft and Litmus.
What practical aspects does this news translate into?
Standardizing the use of media queries to adapt email design to mobile devices
The goal of using Responsive Email is to improve usability and user experience across different screens . However, media queries do not work on all ESPs. Gmail is the main email client that refused to accept this type of code, which made things difficult for email designers. But that is history now, Gmail will now accept the use of media queries , which means that around 75% of email clients will accept responsive design in their emails. Without a doubt, we are getting closer to standardizing the process of adapting emails to mobile devices.
CSS Media queries
Source: Google Apps Developer Blog
You will no longer have to “hack” emails to display them in Gmail with the original design
Email designers have struggled to the end to make email designs look even minimally good to users with Gmail accounts. However, although they managed to make it look similar to the original design in many cases, the work involved was very laborious and completely unnecessary. And even more so if we take into account that the results in many cases were not comparable to the original email designs. Now, the work of professionals will be a little easier and they will have one less thing to worry about.
Goodbye to CSS inlining!
Until now, Gmail did not read any of the CSS declared in the <head>, that is, in the usual section where CSS styles that define the design of an email are declared. Gmail ignored all this data, which required repeating it again within the HTML tags (inline), which implied many limitations. Thus, the <style> tag in Gmail will soon be able to be used in the <head> of emails.
CSS Selectors
Source: Google Apps Developer Blog
Gmail Expands Support for CSS Properties and Media Queries
This will allow you to design emails using the same pattern as the main ESPs.
Supported media queries
Supported types
all
screen
Supported queries
min-width
max-width
min-device-width
max-device-width
orientation
min-resolution
max-resolution
Supported keywords
and
only
Access the complete and official list of CSS and Media Queries supported by Gmail here
Ultimately, although Gmail has taken a step forward with this news, there are still many aspects that need to be standardized so that the task of designing and laying out an email for different ESPs is unified and simplified. For example, it is surprising that Gmail still does not support Google Web Fonts . This is one of the many examples that this ESP still needs to be polished and improved.
Soon, users who use Gmail as an Email Service Provider (ESP) will be able south africa mobile phone number list to receive their emails on their mobile devices with a responsive design, providing better visibility and usability to the user experience.
Gmail will support Responsive GIF
Until now, Gmail has dedicated its efforts to improving mobile usability on its own, ignoring the CSS inside the <style> tag and, therefore, preventing the correct rendering of emails. Finally, it has come to its senses and made the right decision: to make life a little less complicated for email marketing professionals. It seems that ESPs are beginning to collaborate in the standardization of email marketing, which will make the day-to-day life of email designers considerably easier. Another clear example of this is the collaboration between Microsoft and Litmus.
What practical aspects does this news translate into?
Standardizing the use of media queries to adapt email design to mobile devices
The goal of using Responsive Email is to improve usability and user experience across different screens . However, media queries do not work on all ESPs. Gmail is the main email client that refused to accept this type of code, which made things difficult for email designers. But that is history now, Gmail will now accept the use of media queries , which means that around 75% of email clients will accept responsive design in their emails. Without a doubt, we are getting closer to standardizing the process of adapting emails to mobile devices.
CSS Media queries
Source: Google Apps Developer Blog
You will no longer have to “hack” emails to display them in Gmail with the original design
Email designers have struggled to the end to make email designs look even minimally good to users with Gmail accounts. However, although they managed to make it look similar to the original design in many cases, the work involved was very laborious and completely unnecessary. And even more so if we take into account that the results in many cases were not comparable to the original email designs. Now, the work of professionals will be a little easier and they will have one less thing to worry about.
Goodbye to CSS inlining!
Until now, Gmail did not read any of the CSS declared in the <head>, that is, in the usual section where CSS styles that define the design of an email are declared. Gmail ignored all this data, which required repeating it again within the HTML tags (inline), which implied many limitations. Thus, the <style> tag in Gmail will soon be able to be used in the <head> of emails.
CSS Selectors
Source: Google Apps Developer Blog
Gmail Expands Support for CSS Properties and Media Queries
This will allow you to design emails using the same pattern as the main ESPs.
Supported media queries
Supported types
all
screen
Supported queries
min-width
max-width
min-device-width
max-device-width
orientation
min-resolution
max-resolution
Supported keywords
and
only
Access the complete and official list of CSS and Media Queries supported by Gmail here
Ultimately, although Gmail has taken a step forward with this news, there are still many aspects that need to be standardized so that the task of designing and laying out an email for different ESPs is unified and simplified. For example, it is surprising that Gmail still does not support Google Web Fonts . This is one of the many examples that this ESP still needs to be polished and improved.