As an email marketer you have probably already discovered that getting your newsletter or email campaign to display as you intended across the main email clients can be a challenge. The most popular email clients in business for example – Gmail (including Gmail for Businesses) and Microsoft Outlook 2007 / 2010 are pretty restrictive and only support about 40% of HTML / CSS styles.
Even more challenging for email marketers – HTML ‘Best Practices’ for designing Websites are unfortunately often ‘Worst Practices’ for designing email campaigns, so your most experienced website designer / coder is probably designing email campaigns that won’t display right in a lot of email inboxes. (Hint: Always use the Pinpointe email campaign preview tool to see how your email will display in various email clients.)
What is CSS Styling?
CSS stands for ‘Cascading Style Sheets’. CSS styling is used to add styling to individual HTML elements (font characteristics, spacing, line colors, table properties etc) using <style> tags. CSS can be implemented in 3 ways:
An external file or CSS sheets. All styling information is contained in an external CSS style sheet. This is considered ‘good practice’ for web design. It doesn’t work at all for email design as almost every email client will ignore an external CSS stylesheet.
An embedded style section. In this case, an HTML file (your HTML Email design) has a section of code near the top with a <style> </style> section where styles can be defined. Your favorite friendly email client will in most cases, strip or ignore this too, so your email won’t look nearly as cool as your designer intended.
Inline CSS styling. Unlike CSS from an external or embedded style sheet, inline CSS must be applied to each HTML element you wish to style, instead of being bundled together in a separate section of your email. This is what most email clients *do* support.
For example, by adding <style> tags to the HTML code below CSS is used to adjust the font and background colors:
[highlight]<p style=”background: green; color: white;”>Adding Inline CSS to text</p>[/highlight]
Each CSS property (e.g. “background”) and its value (e.g. “green”) must be separated by a colon “:” and each CSS statement (property and value) must be separated with a semicolon “;” in order to for this to work correctly. Unfortunately, inline styling is a lot more cumbersome to code and inline styling makes it difficult to change the look of an email design.
Why Use Inline CSS?
Since email clients disable external style sheets or strip embedded ones, inline CSS has become the most popular method for adding style to HTML emails. Unlike CSS from an external or embedded style sheet, inline CSS must be applied to each HTML element you wish to style.
CSS / HTML Email Inline Tool to the Rescue
So what’s an email marketer to do, if your design team has crafted a cool email design that you like – but used an embedded style sheet instead of inline CSS styles?
Simple. Check out this tool to convert embedded HTML Email CSS styles to inline CSS.
This CSS Inliner tool converts CSS styles in your email campaign into inline style attributes that most email clients will display. Just paste your original HTML code with an embedded CSS Style section and this handy tool will instantly produce an inlined version that you can paste back into your Pinpointe editor.
Inline CSS Tips
- Forget background images. Gmail and Outlook ignore background images. Don’t use them – your images will not display. Consider using a background color instead.
- Stop using margins. The CSS Margin tag is not recognized by many email clients. Instead, tell your email designer to code like they did in the old days and use nested tables. Assign padding (on the <td> level) or cellpadding (on the <table> level). Without margin, the best way to center objects is wrapping them in a <div> with the property align=”center”.
- Don’t bother with <h1>, <h2>,… heading tags. Paragraph tags <p> and heading tags (<h1><h2><h3> etc.) can receive styling by the email client that overrides your inline styling. Instead, style text within div or span tags.
- Keep width under 720 pixels. Email preview panes vary in size. Most are small. If your email design is too wide, people won’t take the time to scroll back and forth to read it.
- Use tables for layout. The only thing predictable about the CSS ‘positioning’ and ‘float’ tags, is that they are unpredictable and basically won’t work in many email clients. Instead, use tables to hold all content. Also avoid using colspan and rowspan; nesting tables allows for the most stable, and granular, layout control. Cellspacing and cellpadding must be declared for each table and individual content styles (such as font settings) should be placed on specific table cells, or <td> tags.
- Don’t depend on images. More than 65% of email clients now block images by default, so many recipients will never see them. Avoid using images for critical information like headlines or calls to action. Adding the “alt” attribute is good practice, even though Outlook will ignore it.
