I have design html email template, but I don’t know how to use CSS in email template.
Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.
Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.
Lost your password? Please enter your email address. You will receive a link and will create a new password via email.
Please briefly explain why you feel this question should be reported.
Please briefly explain why you feel this answer should be reported.
Please briefly explain why you feel this user should be reported.
Email is an essential piece of any marketing strategy. It’s a quick and easy way to reach your audience. It’s also an effective way to build clever and compelling campaigns to communicate with your contacts at all stages during the buyer’s journey. So, it’s no wonder that more than half of marketersRead more
Email is an essential piece of any marketing strategy.
It’s a quick and easy way to reach your audience. It’s also an effective way to build clever and compelling campaigns to communicate with your contacts at all stages during the buyer’s journey. So, it’s no wonder that more than half of marketers say they receive the most ROI from their emails.
However, email campaigns don’t come without their pain points.
Low open rates, poor conversions, and formatting issues can spell doom for even the best-planned email campaigns.
Fortunately, those first two problems may be solved with simply copy changes. But the formatting issues are a different issue if they are caused by your CSS code.
This article will explain how CSS is used, as well as break down some of the problems often associated with implementing CSS in HMTL emails and provide a few possible solutions.
What exactly are Cascading Style Sheets (CSS)?
CSS, or Cascading Style Sheets, essentially act as a design blueprint in your HTML code. It describes how HTML elements, such as the color, headers, tables, photos, etc., will line up and display on the page.
At its core, CSS was designed to make life easier for web developers. Instead of manually adding different commands for fonts, colors, or other design elements beyond a basic layout, all of these elements can be contained in one .CSS file. A designer would just need to update one file in order to make changes throughout an entire website.
Although a major time saver, especially on large and complex websites, CSS can be far less reliable with emails.
Why CSS in HTML emails can cause problems
When you build an email in most of the popular email tools on the market today, you’ll see your finished product as it was intended. It may include Flash elements, tables, or compelling graphics.
However, when that content is opened by readers using their various email providers, they may see something totally different.
The main reason behind these display issues in CSS emails isn’t the code. Rather, it’s the capabilities of the email provider, all of which can differ depending on the version of the email provider you are using.
So, for instance, specific code may call for an image-heavy template. While it might look great on your friend’s Gmail app, you could open the email in Outlook on your desktop and it would appear stripped down with no images.
How to be successful with CSS in HTML emails
Just because there can be issues with CSS in HTML emails doesn’t mean you should abandon efforts to use it. It all comes down to determining which codes are absolutely needed and how to style them so they can be rendered by email platforms.
Campaign Monitor has a fairly detailed and helpful list of the most popular CSS commands and which email providers do and do not support each piece of code.
Here are a few options to consider that can keep your email displays impressive without running into CSS issues:
1. Use inline CSS.
If you are set on using CSS, your best bet is to use inline code. This is the most effective and widely used method for including CSS in HTML emails. According to Litmus research, 86% of email designers inline their CSS.
The benefit of using inline CSS is that most email providers will support this style, which means you’re likely to get the best results without running into any formatting trouble. However, since your email developer will have to write extra code in each line for each additional design element beyond basic HTML, it can take extra time to create email templates.
There are email template builder tools that can help streamline this development, but that same Litmus research found that nearly 70% of marketers were inlining their CSS by hand, or without any inline builders.
2. Avoid embedded and external CSS in HTML emails.
There are two other CSS options that can be considered in your HTML emails, but these increase the risk of display problems.
It’s best to avoid these two methods if possible.
3. Stay away from background images.
Although it looks nice, an email formatted with a background image does not display anything other than alt text if it can’t be rendered by the email program.
The result is just a blank screen with broken image icons and a few words of text.
And what’s more, a growing number of email readers are even voluntarily turning off images in their emails to reduce load time and improve email speed. Google recently revealed that 43% of Gmail users actually don’t read emails with background images on.
So, if four out of every 10 people aren’t looking at your background image designs anyway, you can reduce the chances of your images failing to load due to CSS issues for the other six by simply leaving these images out of your emails altogether.
4. See which platforms your audience is using.
Although it’s definitely not a best practice, there are some marketers out there who may not have the time or resources to develop a CSS-friendly email template that works across the board. So, as a result, they might just try to optimize their email so it works for most of their audience.
Apple Mail remains the most popular email service. Roughly 40% of people use it to read their emails. That’s followed by Gmail at around 20%. But that doesn’t mean your contacts are using the same platforms.
For instance, if you are a B2B company that sells data center services, the majority of your customers may read their emails in Outlook on their work desktop. But if you’re a B2C company that sells clothing, you’re probably seeing more customers opening emails on mobile in Gmail.
If you know your audience, you can format your emails so they work in the most popular platforms, and sacrifice the quality that the minority of your audience will see.
It should be repeated that although this is an option, it’s definitely not recommended.
5. Don’t use CSS at all.
If you’re unsure or cautious about sending HTML emails with CSS, there is a simple solution: plain-text emails.
Most of the big email providers (including Gmail and Outlook) already allow users to see a plain-text version of your email if you are using CSS code that is not recognized. But you could take it one step further and just send all of your emails using basic HTML or plain text.
While they do not look flashy and definitely won’t win any design awards, this might be the best way to get your message across. Take a look at this example from Nintendo:See less