“You can’t use HTML5 or CSS3 in email.”
Due to their “limited” support, this is a commonly-held notion throughout the email design industry. However, we’re calling it a complete myth.
While support certainly isn’t universal, many of the leading email clients support HTML5 and CSS3. In fact, about 50% of the total market and 3 out of the top 5 email clients support them. Support may be even bigger for your particular audience.
But, what about the clients that don’t support these advanced functionalities? How will your email look to those subscribers? When it comes to email, it’s all about providing your subscribers with a great experience. However, this doesn’t mean that your email has to look the same across every client—it just needs to be easily accessible for all of your subscribers.
Two of our favorite email rockstars—Jonathan Kim and Brian Graves—have emphasized the varying approaches being used: defensive email design and progressive enhancement.
Defensive email design
Nearly two years ago, Jonathan Kim presented “Pushing the Limits of Email” at our Mobile Masterclass workshop. During his talk, Jonathan coined the term defensive email design to explain the current state of email design.
He explained that email designers are stuck in an archaic state of design due to some email clients having limited CSS support. He advocated for email designers to start designing for the clients that support web rendering engines first in order to advance the email design industry.
Progressive enhancement
In a similar fashion, at The Email Design Conference 2014, Brian Graves, UI designer at DEG, presented on “Winning the Design Battle on Every Screen.” The main focus of his talk was on progressive enhancement, which involves providing advanced functionality in environments where its supported.
He also emphasized the importance of graceful degradation. Graceful degradation means that if your subscriber’s email client doesn’t support a certain functionality, you’ll still provide them with a pleasant experience.
Interested in checking out Brian’s full presentation? The slides and recording are now available!
An escalator is a great example of progressive enhancement and graceful degradation in real life. The late comedian Mitch Hedberg joked, “An escalator can never break: it can only become stairs. You should never see an Escalator Temporarily Out Of Order sign, just Escalator Temporarily Stairs. Sorry for the convenience.” Regardless of its environment, an escalator maintains its functionality.
IMPLEMENTING PROGRESSIVE ENHANCEMENT FOR HTML5 + CSS3
Using progressive enhancement is the most efficient way to approach email design. We know that using conventional HTML5 and CSS3 in email causes a lot of rendering problems across clients. Fallback support is very inconsistent—some HTML and CSS have solid fallbacks whereas others don’t. Different quirks pop up in individual clients. Using standard HTML5 and CSS3 requires a lot more testing and slows down development. So, what is the best way to actually implement progressive enhancement in email?
Using HTML5 and CSS3 in email doesn’t have to be difficult. It doesn’t require endless hours of troubleshooting in quirky email clients (we’re looking at you, Outlook). All it takes is the proper framework to quickly implement HTML5 and CSS3 without the hassle or fear of running into rendering problems. And, lucky for you, we have that framework!
Here is the single greatest line of code ever made for email designers and developers:
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Insert styles here */
}This media query only targets WebKit-supported email clients—which have incredible support for HTML5 and CSS3. This media query allows you to use of modern techniques like HTML5 video, CSS3 animation, web fonts, and more.
This approach also splits email development for modern email clients and older clients in two. You can use Safari/Chrome to test and develop modern techniques for WebKit-supported clients while using Firefox for your baseline experience for older clients like Outlook.
Approaching email development this way transitions more of the quality assurance (QA) process to the browser instead of the email client. It gives email designers more power, control, and confidence in developing an email that will render gracefully across all email clients.
|
WebKit Targeting Media Query Support in Email Clients |
|
|
Apple Mail |
 |
|
iOS (iPhone / iPad) |
|
|
Android Mail 2.3 |
|
|
Android Mail 4.2 |
|
|
AOL Mail (Chrome) |
|
|
Outlook 2011 + 2015 (Mac) |
|
Check out these Litmus test results, which shows support for WebKit targeting media queries. It should be noted that Gmail—both as a webmail client and mobile app—does not support media queries, so the tests are not valid for those screenshots.
You can also target Gecko (Firefox) rendering with this media query:
@-moz-document url-prefix() {
/* Insert styles here */
}Few clients have Gecko (Firefox) as a rendering engine, which is why it’s best to target WebKit for your enhanced version of your email. But, it’s easy to simply add in the same functionality WebKit rendering engines have with this media query for certain clients like Thunderbird.
Are there other ways to implement HTML5 and CSS3 in email besides this method? Yes. But, we believe this technique is the fastest way to develop—as well as the most bulletproof. It minimizes the amount of development work needed for quirky email clients like Outlook and focuses on browser-based testing.
SUMMING IT UP: TIPS FOR PROGRESSIVE ENHANCEMENT
Know your audience
Where are your subscribers opening your emails? Are they using clients with great CSS and HTML support, like iPhone and Apple Mail? You can use Litmus’ Email Analytics tool to figure out which email apps are most popular with your subscribers.
Based off of this information, you can then determine whether progressive enhancement will work for you. For example, if a large percentage of your audience is using WebKit, which has great support for advanced functionalities, then perhaps trying out innovative techniques like HTML5 video may be a good idea!
Build a baseline experience
Build a baseline email experience for subscribers using email apps with limited support for HTML and CSS—such as Outlook and Gmail—before enhancing your email for other clients. Progressive enhancement should not create suboptimal experiences for other users.
Enhance where possible
Once you have a baseline experience built, enhance that experience for your other users. You can use techniques like CSS3, video, interaction, SVG, and web fonts. Remember, even the email clients with better HTML and CSS support have their own individual quirks and still require testing to see what’s possible.
SEE IT IN ACTION: EXAMPLES OF PROGRESSIVE ENHANCEMENT IN EMAIL
Let’s take a look at a few groundbreaking examples that use progressive enhancement in email. To view the enhancements for these emails, you must be using a WebKit-powered browser like Chrome or Safari.
The Email Design Conference 2014 HTML5 Video Background Email
To announce The Email Design Conference 2014, we decided to do some serious progressive enhancement with an HTML5 video background. Even though this specific technique only worked in Apple Mail and Outlook 2011 (Mac), those two clients accounted for about 40% of our audience for that particular email send.
The HTML5 video simply fell back to a static background image for all email clients that did not support the video. Our results were amazing—and so was the feedback!
B&Q Interactive Carousel Email
One of the coolest emails of the year was B&Q’s interactive carousel email. For WebKit clients, the email contained a hotspot carousel where users could tap through to see different sections.
Perhaps the most impressive part of the entire email is the fallback it used for non-WebKit emails —a beautiful grid layout of the carousel that didn’t hide or duplicate any content!
You can open the email in Firefox or Internet Explorer to view the fallback.
Litmus Builder Interactive Tour Email
For the launch of our new email code editor, Litmus Builder, we made a fully clickable interactive tour inside of the email. Again, this technique only worked in Apple Mail and Outlook 2011 (Mac) but accounted for a large part of our audience. (*Note: The email needs to be at least 800px wide to view the tour.)
The tour simply fell back into a static background image and a call to action to the landing page. The email was a massive success, gaining thousands of users of the product in the first few days.
Interested in giving Litmus Builder a try? Sign up free today so you can start experimenting with using HTML5 and CSS3 in your emails!
A FRAMEWORK FOR EMAIL DESIGN INNOVATION
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Insert styles here */
}This media query provides a simple framework of innovation for email designers. We can build a better experience for the majority of subscribers who have modern email clients.
The best defense is a good offense. It’s time to start playing offense. To start innovating in email design with this media query. To push email forward.
Do it for your subscribers. For our craft. For the love of email.
We can’t wait to see what we build together.
If you use this method—or develop more advanced versions of your own—in your email(s), or if you have any questions about the method, please post in the comments below or, better yet, the Litmus Community!
DISCOVER YOUR AUDIENCE + TEST YOUR DESIGNS
Feeling inspired to start pushing email forward using advanced techniques like HTML5 and CSS3? Be sure to identify your subscribers’ favorite emails apps, as well as test your newly created emails.
With Email Analytics you can understand where your subscribers are opening your emails so you can focus your progressive enhancement (and graceful degradation!) efforts.
Testing your designs is also crucial step during this process. Consistently test across over 30+ clients and apps to ensure that your subscribers are easily accessible for your subscribers—regardless of where they are opening your emails.
Get 7 days of unlimited Litmus Email Analytics and Email Testing.