{"id":96687,"date":"2024-05-17T09:11:06","date_gmt":"2024-05-17T07:11:06","guid":{"rendered":"https:\/\/happybrain.it\/?p=96687"},"modified":"2024-05-17T15:28:45","modified_gmt":"2024-05-17T13:28:45","slug":"html-e-css-nelle-e-mail","status":"publish","type":"post","link":"https:\/\/happybrain.it\/en\/2024\/05\/17\/html-e-css-nelle-e-mail\/","title":{"rendered":"HTML and CSS in E-mails"},"content":{"rendered":"

[vc_row row_height_percent=”0″ overlay_alpha=”50″ gutter_size=”3″ column_width_percent=”100″ shift_y=”0″ z_index=”0″ uncode_shortcode_id=”185403″][vc_column column_width_percent=”80″ gutter_size=”3″ overlay_alpha=”50″ shift_x=”0″ shift_y=”0″ shift_y_down=”0″ z_index=”0″ medium_width=”0″ mobile_width=”0″ width=”1\/1″ uncode_shortcode_id=”146320″][vc_empty_space empty_h=”1″][vc_column_text uncode_shortcode_id=”202920″]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.<\/p>\n

Let’s take a look at a few tips to make the task easier:<\/p>\n

Use inline styles<\/strong>: make sure you use the \u2018style\u2019 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.<\/p>\n

Keep it simple<\/strong>: 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.<\/p>\n

HappyTips: avoid complicating your work by using shadows, gradients and animations.<\/p><\/blockquote>\n

[\/vc_column_text][vc_single_image media=”96695″ media_width_percent=”100″ uncode_shortcode_id=”191299″][vc_column_text uncode_shortcode_id=”710229″]Use tables for layout<\/strong>: although modern online design mainly relies on CSS for graphical layout, email design continues to make extensive use of tables.<\/p>\n

HappyTips: favour the use of tables to organise your email layout and forget about flexboxes, floats or grids.<\/p><\/blockquote>\n

Check your emails<\/strong>: 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?<\/p>\n

HappyTips: Use tools such as Litmus and Email on Acid to check the CSS compatibility of your emails<\/p><\/blockquote>\n

Fallbacks<\/strong>: Use fallbacks, having an alternative solution when an email client does not support certain CSS attributes is a lifeboat.<\/p>\n

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.[\/vc_column_text][vc_single_image media=”96697″ media_width_percent=”100″ uncode_shortcode_id=”102338″][vc_column_text uncode_shortcode_id=”635797″]Let’s delve into a few aspects:[\/vc_column_text][vc_custom_heading heading_semantic=”h3″ uncode_shortcode_id=”165610″]Internal CSS[\/vc_custom_heading][vc_column_text uncode_shortcode_id=”209900″]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 \u2018inline CSS\u2019.<\/p>\n

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.<\/p>\n

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.[\/vc_column_text][vc_custom_heading heading_semantic=”h3″ uncode_shortcode_id=”654302″]Multimedia queries[\/vc_custom_heading][vc_column_text uncode_shortcode_id=”198319″]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.<\/p>\n

Happy Tips: Avoid nested media queries. Limit or completely avoid using feature conditions such as screen width, minimum and maximum width.<\/p><\/blockquote>\n

[\/vc_column_text][vc_single_image media=”96694″ media_width_percent=”100″ uncode_shortcode_id=”743401″][vc_custom_heading heading_semantic=”h3″ uncode_shortcode_id=”101382″]Customised fonts[\/vc_custom_heading][vc_column_text uncode_shortcode_id=”914453″]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.<\/p>\n

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.<\/p>\n

This approach remains relatively simple and can be used with font services such as Google Fonts and Adobe Fonts.[\/vc_column_text][vc_custom_heading heading_semantic=”h3″ uncode_shortcode_id=”634929″]SVG images[\/vc_custom_heading][vc_column_text uncode_shortcode_id=”204854″]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.
\nIn 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.<\/p>\n

You thought it would be easier, didn’t you? Well yes, email development remains complex despite the introduction of modern features.
\nIf 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.[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"

We have drawn up a set of guidelines to help you create attractive and efficient e-mails that work on a wide range of e-mail clients.<\/p>\n","protected":false},"author":13,"featured_media":96693,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[281,406],"tags":[235,439,440,485,489,491,492],"class_list":["post-96687","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-design","category-about-web","tag-web-design","tag-html","tag-web","tag-query","tag-font","tag-email","tag-css"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/happybrain.it\/en\/wp-json\/wp\/v2\/posts\/96687","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/happybrain.it\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/happybrain.it\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/happybrain.it\/en\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/happybrain.it\/en\/wp-json\/wp\/v2\/comments?post=96687"}],"version-history":[{"count":16,"href":"https:\/\/happybrain.it\/en\/wp-json\/wp\/v2\/posts\/96687\/revisions"}],"predecessor-version":[{"id":96720,"href":"https:\/\/happybrain.it\/en\/wp-json\/wp\/v2\/posts\/96687\/revisions\/96720"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/happybrain.it\/en\/wp-json\/wp\/v2\/media\/96693"}],"wp:attachment":[{"href":"https:\/\/happybrain.it\/en\/wp-json\/wp\/v2\/media?parent=96687"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/happybrain.it\/en\/wp-json\/wp\/v2\/categories?post=96687"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/happybrain.it\/en\/wp-json\/wp\/v2\/tags?post=96687"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}