While web browsers get consistent updates to support the emerging HTML and CSS standards, the same can’t be said for email clients. Delivering visually stunning emails to your subscribers can result in higher conversion rates. That’s why companies constantly look for new methods to streamline the coding of attractive emails.

What works in emails HTML and CSS-wise? The situation with email clients is not as grim as it used to be just a few years ago. Below you can find the latest HTML and CSS standards supported in an email that you can use in 2022.

Internal CSS to replace inline CSS

Previously, you had to have a style for every element in your email. Adding styles tended to become tedious with an increasing number of elements. We are familiar with the inline CSS and the style “style:value” attribute for every <element>.

Most popular email clients have been updated to support internal styles you can add via the HTML <style> element. While it makes declaring styles for elements easier, it should also make your code look clean and highly readable. Unfortunately, we are still far away from having external CSS support.

Tables work better than Flexbox and Grid

You will still be more likely to use HTML <table> when developing emails. We are still far from using the latest CSS to streamline beautiful, mobile-ready email design. While modern email clients have outstanding support for <div>, Flex and Grid should be included.

For instance, “display:flex" works. However, if you want to use some Flex CSS properties such as "flex-direction," "flex-wrap," or "align-items," you will have a hard time. The situation with Grid is even worse as it has limited support.

If you are a developer focused on coding emails, the chances are that you are going to remain stuck with old HTML and CSS in the foreseeable future.

Choose PNG and JPEG over SVG

One of the best email design practices is to ensure fast loading times. It contributes to a great user experience and can improve click-through rates. That’s why developers want to include SVG images. These files are lighter and have extremely fast loading speeds. PNG and JPEG images can delay loading and disrupt the experience.

Unfortunately, email clients have great support for PNG and JPEG images. SVG has insignificant support compared to PNG and JPEG. It's better to stick to these two image times for now. Reducing the image size and using better-compressing methods can help you improve loading times.

Use media queries to deliver responsive design

Over 60% of consumers use their mobile devices to read email. It means that responsive design is imperative today. It will enable you to deliver a consistent experience across devices. Plus, you can choose vertical over linear email design to make it more attractive for the recipients.

Is it supported by email clients, though?

Yes, it is. Most popular email clients have support for media queries. You can use them to create responsive email layouts. You won’t be able to use the media queries inline, though – you will have to write a media query inside the <style> element.

Font-face works with font embedding services

Custom typography can help you enhance the visual experience your emails provide. Most email clients don't have great support for embedding custom fonts. For instance, only 2 in 10 clients support the excellent old <link rel=”stylesheet”>.

The safest way to add custom fonts is to use @font-face to select the desired font family and define fallback fonts. The good news is that developers can still use Adobe and Google Fonts to embed chosen font families.

Beyond the design: protection of emails

Since email is one of the favorite malware distribution channels among hackers, you should know how to protect yourself. First, you need a strong password for your email account – use upper and lowercase letters, special characters, and numbers.

You can add two additional layers of protection if you use email software that encrypts your emails and a VPN that encrypts online traffic for all your online communications. A VPN download means you can protect your email exchanges if you use less secure email providers. For instance, some of them might lack encryption. Thus, add that extra layer of protection.

If your device is infected with malicious code, it can find its way into the email and use your outbox as a central hub to infect all your email recipients potentially. You can prevent it if you use antivirus software and regularly update it.

There are no significant developments when it comes to email client updates. With few exceptions, most of them still use old HTML and CSS code. All the things on the list work in 2022, and you can use them to create stunning emails and deliver a consistent visual experience across devices.