A Bulletproof Guide to Using HTML5 and CSS3 in Email

HTML 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.

source

Leave a Reply

Your email address will not be published. Required fields are marked *