CSS in HTML Email Newsletter: What’s new?

I will not repeat that CSS is a language for describing the appearance of an HTML document. You already know that. But what is the real use of CSS inlining in email marketing?

While HTML structures the content and layout, CSS inlining in email is used to style and format the content like including link colors and headline fonts.

With the combination of CSS and HTML elements, we get such email newsletter masterpieces like:

Did you like it?  Of course, you do?

Certainly, the result of the designing such email campaign will be gorgeous but is it worth it?
Let's find out!

Why do we need to use CSS in HTML email newsletters?

Email clients are unpredictable. Using CSS elements in designing email you can:

1. Control the visual appearance of your email campaign (font, colors, text styles etc.)
   
2. Improve email loading speed.
3. However, one of the main benefits for most marketers is that using CSS allows to speed up email development process.

What happens if you don’t inline your styles? The styling in the body of your email will not display in clients like Gmail.

Here is how this email displayed with the inline CSS:

Top 3 trends of using CSS in HTML emails

Trending tips of how and why brands create interactive elements using CSS in email marketing 2018.

Accordion CSS in email newsletters

I think you know the rule about the perfect email newsletter length - it should be visual short with only 2 scrolls long. But how to keep this rule when you have to tell so much?
Clever email developers came up with lifehack how to visually shorten a long e-mail with the help of the accordion effect.

Just like the musical instrument accordion, using of interactive design element – Accordion helps collapse and expand sections of the email based on user interaction.

Roughly 80% of the popular email clients will support the email with this effect so there are no problems with its displaying.

Using Accordion effect you can dramatically reduce the email length without compromising on the email copy.

There are some more advantages of adding Accordion CSS to email campaigns:

• The newsletters look better organized and better legible.
• The overall length of the email is not affected because in an accordion email, since the sections are stacked and only one section remains open at the time.
• As each accordion part has an individual CTA so you can track the CTA in which section delivers the most clicks compared to others. It a good method of testing and analysis best CTA effectivity for future campaigns.

CSS animation in email campaigns

CSS animation is a method of animating certain HTML elements without having to use processor and memory-hungry JavaScript or Flash.

Top reason to use it in emails:

• It is lightweight and fast to load.
• Animations run smoother.
• The element can be scaled. This means there will be no concerns about pixelation in retina displays.

Here is a great example of using CSS animation in email promotion of Annabelle Creation movie:

CSS Sliders

This is a demonstration of cycling through a series of content, built with CSS transforms and a bit of JavaScript. It works with a set of images, text, or custom markup.

The technical side:

Litmus shared its experience in one of its articles - “We used the radio buttons hack to create HTML and CSS click events where each article was its own "slide" tied to a radio button. The contextual logic hides and shows each slide article content based on if its corresponding radio button is checked.”

The visual side:

Here is an example of how the company uses CSS slider gallery in one of its email campaigns:

Benefits of CSS Sliders in the design of email newsletter:

• Sliders are perfect for multiple CTAs without being too pushy on the recipient.
• It is a possibility to showcase more in less space along with attractive details. The users can click on the slide they like and can be directed to the relevant page.
• You can demonstrate a set of products without occupying a lot of space.
• Emails with sliders have good conversion and lead generation. It’s great to generate curiosity and give a snapshot of the new products or offers.
• Adding more images in sliders will not make any difference in the page load time.
• The number of images in CSS Slider doesn’t affect the download speed of the email.

CSS/HTML Email Design Golden Rules

Here are some additional design best practices of the 2018 year for building successful HTML emails you shouldn't miss:

• The max-width of your emails should be between 600 and 800 pixels.
• It is better to use cross-platform Times New Roman, Calibri, and Arial fonts.
• Limit the use of JavaScript or Flash to create motion in your emails, better add video or animation.
• Don’t overuse the image (<img>) tag. Some of the email clients block images by default, images take longer to download than text, use more data and create a risk of landing your email in a spam folder.
• Design your emails to be easily scaled down for smaller screens.
• Preview and fully test your email campaigns before sending to your entire email list.

Really cool samples of CSS/HTML emails

• Return Path “Should we stay or should we go“ email newsletter:

One of the rare examples when the carousel effect worked in the newsletter without delays and failures.

• One more sample of dynamic email newsletter from Taco Bell you will definitely love.

Want more useful info about CSS emails? Write your wishes in comments and we will supply you with more samples and details of designing such newsletters.

Written by:

Anastasia Sukhareva