A look at HTML and CSS practices in emails that work

March 30, 2023

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.


I believe in making the impossible possible because there’s no fun in giving up. Travel, design, fashion and current trends in the field of industrial construction are topics that I enjoy writing about.

Leave a Reply

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

Related Posts

May 29, 2023
Choosing The Perfect Canvas Print: A Comprehensive Guide

Canvas prints have become a popular choice for home decor, adding a touch of elegance and personalization to any space. With a wide range of options available, choosing the perfect canvas print can seem overwhelming. In this comprehensive guide, we will walk you through the key factors to consider when selecting a canvas print that […]

Read More
May 29, 2023
Engaging and Educational Activities for 3-4-Year-Olds

Are you looking for stimulating activities to keep your 3-4-year-olds engaged and help their development? Look no further! We understand the importance of providing enriching experiences for young children.  In this article, we will explore a wide range of activities 3-4 year olds that are fun and educational. These activities have been carefully curated to […]

Read More
May 29, 2023
6 Tips To Follow When Moving From The City To The Country

  Looking for a tree change? You’re not alone. In recent years, many cities across the globe have been experiencing some of the largest migrations to the countryside. This effective exodus from city centres has largely been inspired by two main factors: the development of digital technologies for remote work, and the effects of COVID-19 […]

Read More


Welcome to Urban Splatter, the blog about eccentric luxury real estate and celebrity houses for the inquisitive fans interested in lifestyle and design. Also find the latest architecture, construction, home improvement and travel posts.


linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram