Are you about to make some changes to your e-mails using CSS but you’re not quite sure how to do it? There are a couple of things you should know before you get down to business, understanding the constraints of email clients and their various degrees of CSS support is indeed a key aspect.

Let’s take a look at a few tips to make the task easier:

Use inline styles: make sure you use the ‘style’ tag to incorporate your CSS rules into the HTML code this is because email clients need inline styles and not websites, which often make use of external style sheets.

Keep it simple: it would be preferable to stick to the basic CSS properties as not all of them are supported by e-mail clients. Examples are font colour and size as well as background colour.

HappyTips: avoid complicating your work by using shadows, gradients and animations.

web designer mentre prende appunti seduto sul divano con il suo computer

Use tables for layout: although modern online design mainly relies on CSS for graphical layout, email design continues to make extensive use of tables.

HappyTips: favour the use of tables to organise your email layout and forget about flexboxes, floats or grids.

Check your emails: it is good to make sure that your emails display correctly on all platforms given the variety of email clients and devices that exist. How to do this?

HappyTips: Use tools such as Litmus and Email on Acid to check the CSS compatibility of your emails

Fallbacks: Use fallbacks, having an alternative solution when an email client does not support certain CSS attributes is a lifeboat.

We have compiled a set of guidelines that, if you follow them, will assist you in creating attractive and efficient emails that will be compatible with most email clients. An ever-valid tip is to test your emails regularly to verify and consequently ensure maximum compatibility. That way if problems arise you can take timely action by making CSS changes where necessary.

Let’s delve into a few aspects:

Internal CSS

We all agree that one of the most tedious aspects during the email creation process is the need to specify styles directly within the style attributes of each element, in other words we are referring to ‘inline CSS’.

However, internal CSS, i.e. styles defined within a <style> element, now enjoys greater support. This approach is much more efficient as it allows you to use combinations of selectors and reduce the amount of code, making it more readable.

In order to implement internal CSS correctly, certain rules must be followed. Are you already giving up because you think the rules are too many? And here comes the good news! Fortunately, you can adhere to all these rules simply by using two <head> elements and inserting the <style> element in the second one.

Multimedia queries

The internal CSS allows you to employ multimedia queries, which are essential for responsive design. We recommend creating responsive layouts that can be elegantly adapted to simpler, vertical layouts.

Happy Tips: Avoid nested media queries. Limit or completely avoid using feature conditions such as screen width, minimum and maximum width.

web designer mentre tramite css modifica layout email

Customised fonts

Custom fonts improve the aesthetics of e-mails, making them more attractive, however, integration via the most common method () is only supported by 21.21% of current e-mail clients.

The alternative, @font-face, unfortunately does not enjoy much wider support. Despite these limitations, both methods allow the use of fallback fonts, minimising the risks in adopting @font-face.

This approach remains relatively simple and can be used with font services such as Google Fonts and Adobe Fonts.

SVG images

Unfortunately, SVG has very limited support and its fallback options are even less reliable. At the moment, it would be preferable to avoid the use of SVG and opt for PNG/JPG images instead.
In general, it is advisable to limit the use of heavy images, not only for performance reasons on slower devices, but also to ensure a better user experience on portable devices by avoiding excessive scrolling.

You thought it would be easier, didn’t you? Well yes, email development remains complex despite the introduction of modern features.
If you want to lighten the stress load, we recommend using drag and drop from Postcards to create the desired design without having to worry about which HTML/CSS features are supported or not.