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.

Carlos Diaz
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 24, 2024
Philip Rivers Net Worth: NFL Career and Post-Retirement Success

Philip Rivers' final season in the NFL marked the culmination of a remarkable 17-year career. Initially drafted by the New York Giants, Rivers was traded to the San Diego Chargers, where he spent 16 seasons before moving to the Indianapolis Colts for his final year in 2020. With career earnings exceeding $250 million, Rivers made […]

Read More
May 24, 2024
Best ATL Luxury Car Rentals in 2024

Supercars for hire come with advanced safety features, more comfortable driving, and reliability. The best Atlanta luxury car companies maintain their vehicles to the highest standards, and they have well-trained chauffeurs who are always available to take you to your destination. Whether you need a Rolls Royce or Lamborghini for your next trip, you can […]

Read More
May 24, 2024
From Booking to Boarding: Essential Flight Hacks for Every Traveler

Flying plays a crucial role in today's travel landscape, with an impressive average of 97,439 commercial flights departing globally every day. However, amidst the thrill of discovering new places, arranging a flight and maneuvering through airport protocols can seem overwhelming. In this post, we'll explore key flight strategies to simplify every step of your trip, […]

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.
© 2024 UrbanSplatter.com, All Rights Reserved.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram