Did you know Google is rolling out a major Gmail update geared toward responsive email design, including support for embedded style sheets and media queries? In fact, the majority of the rollout occurred early last week. And it’s a pretty big (and exciting!) deal.
Due to Gmail’s large market share, this is huge news for anyone who has ever worked with HTML email design and understands the difficulties and limitations with Gmail in the past.
So … What Does This Really Mean to You?
If your company is currently running email marketing campaigns (or better yet, in between them), this may be a great time to update your HTML email templates to take advantage of Google’s push toward a mobile-friendly Gmail experience with responsive design.
- For marketers, the benefits will be more accessible emails for Gmail subscribers, providing a better user experience. More and more templates will be mobile-friendly with variable font sizes and content layout based on device size.
- For developers, their workflow will be simplified by no longer inlining styles within email message HTML to accommodate Gmail. Instead, style sheets can be embedded as a separate block of code (similar to other email clients like Apple Mail), which will make styles easier to edit and maintain – and allow for media queries and responsive design.
Real-Life Example: Let’s Try It!
Today I set out to experiment with Gmail a bit and see how email templates I use on a regular basis can be refactored to align with Gmail’s update. I copied the latest version of a frequently used template and began to do a couple basic things.
- First, I used an HTML editor to perform a find-and-replace to quickly remove all instances of inline style attributes on elements. Then, with the HTML clean and tidy, I began to move my CSS style rules into an embedded style sheet in the <head> of the document. This step can be made easier using web apps like extractcss.com. My email template is fairly simple, so I found a manual approach to be sufficient.
- Using my browser’s web inspector on elements to copy CSS rules, I compared the presentation of my new template with the old one. This also gave me the chance to reevaluate my code for other techniques that may be out-of-date.
- Once this initial work was done, I sent out a proof as a test through my email marketing tool. To my surprise, now I didn’t see any of my styles! After scratching my head for a moment, I remembered reading a section in the Campaign Monitor blog about the Gmail update regarding Overlimit style sheets. As noted in the blog, there is actually an 8,192-character limit for the embedded style sheet after the email has been run through a pre-processor, minified and prefixed. I was roughly over the limit by 300 characters, so my style sheet was being stripped out of the email. The good news? I recognized many CSS selectors that were redundant and could be optimized, which reduced my style sheet code to fit within the character limit.
- Now, for the most part, my embedded style sheet works wonderfully in Gmail, and I can continue to enhance and test my code in all the various Gmail apps. It’s a big improvement. This is truly a better time to design – and receive – emails than ever, which is great news for developers, marketers and customers alike.
Want to Learn More?
I recommend reading Campaign Monitor’s Gmail Update: A closer look at Google’s rendering refresh for an in-depth account of the update and how it may affect your day-to-day workflow. Another good resource is Google’s Supported CSS documentation, which details support for specific properties and media queries.
