Home Products Downloads News Store Support

Guidelines for using CSS in email newsletters | MaxBulk Mailer ▸ Frequently Asked Questions

Guidelines for using CSS in email newsletters

MaxBulk Mailer ▸ Frequently Asked Questions

Compatible with MS Windows Compatible with MacOS


Guidelines for using CSS in email newsletters

Email newsletters are more popular than ever, and everyone loves to design a rich website-like newsletter for their subscribers. Unfortunately, email isn't the web. Your beautiful design work might look great in one email program, but chances are when you look at the same work a different email program the results will not be the same.

Why? In a nutshell, some email clients are moving away from full CSS support. CSS (Cascading Style Sheets) is the technology that allows for modern, powerful, flexible website designs. (If you don't know what CSS is or how to use it, chances are the rest of this article isn't for you -- but show it to your email newsletter designer!)

As of early 2007, Gmail is the most restrictive as it will ignore all external and embedded style sheets. (It will support inline styles.) Worse, Microsoft's just-released Outlook 2007 actually takes a few big steps backwards in its CSS support. (Check out Campaign Monitor's article for the shocking lowdown!) For this reason, we consider compatibility with Gmail to be the baseline CSS support to design to. If it looks great in Gmail, chances are, it will look great in most other clients.

Even with inline styles, there are some restrictions. Fortunately, deprecated tag attributes will fill the role of certain disabled inline styles.

So here are some guidelines for creating successful email newsletters that will look good even in the worst email clients. We don't mention much about design aesthetics, just coding practices that will succeed in all environments. (For testing, we used Gmail, Outlook 2003, Outlook Web Access, Hotmail, and Yahoo).

Things To Avoid

New paragraph Do not rely on external (<link rel="stylesheet">) or embedded style sheets (those contained within the <style> tag above the <body> tag). This is the most important thing to avoid. Many email services cut everything above the body tag and disable external style sheets.

New paragraph  Don't use javascript in an email newsletter. Ever. There's no better way to have your newsletter marked as spam.

Things To Do

New paragraph Use tables for layout. Lots of them. You're welcome to try <div> tags for positioning and layout, but our research shows that tables are more consistently supported. C'mon now. Get over your table-phobia. But do very simple layouts, avoiding lots of nested tables. Not only will this make your layouts easier to use, you'll avoid problems with background colors (see point #3 below).

New paragraph Use inline styles liberally in tables. In fact, you'll find you can get the best mileage out of inline styles in <td> tags. That way you are setting up little style regions within each table. Think of these inline styles as miniature style sheets. This allows non-technical users to swap content in and out of pre-formatted cells in a modular fashion.

New paragraph Avoid background colors in table cells that contain other tables. The background colors will disappear in Outlook 2007. Avoid background images entirely.

New paragraph  Test your newsletter by sending to yourself or colleagues. This will give you the chance to catch any problems before your whole subscriber list does!

Images

New paragraph Define background images using background= instead of the inline background-image call. Gmail, among others, will ignore any url() attribute in an inline style. Keep in mind, though that if the background image is ignored, the default color is going to be white. That means your white text on black backgrounds will disappear! Don't do it! Stick with text colors that are visible against a white background.

New paragraph Don’t use images for important content like calls to action, headlines and links to your web site. Outlook, Gmail and others turn images off until allowed by the user. If your entire newsletter is graphical, all your recipients are going to see is a lot of broken images.

New paragraph Provide alt text for all images.

New paragraph  Declare BOTH height AND width parameters for images. Poor old Outlook Web Access especially needs this for your table layout to display properly.

External sources:

An awesome article by Xavier Frenette which lines out exactly which properties, tags, and selectors are or are not supported by various email clients.

A similar article by David Greiner which includes information about Macintosh.

Campaign Monitor's rundown on CSS support in Outlook 2007.






Recent questions from our MaxBulk Mailer users
  451 Error code NEW Screenshot
  Problem sending email to Gmail recipients NEW Screenshot
  What is the meaning of the recipient panel icons NEW Screenshot
  What is the best mail server I can use with MaxBulk Mailer Screenshot
  How can I export my lists to a new computer Screenshot
  How to send a HTML email Screenshot
  How to hide text in my message Screenshot
  Google ending support for less secure apps YouTube Video
  How to add social networks icons to my message Screenshot
  How do I set up an unsubscribe link Screenshot
  How to export several lists into to a single file Screenshot
  What are the Zoho mail settings for MaxBulk Mailer? Screenshot
  Emails sent but not received Screenshot
  HTML Email is received empty Screenshot
  How to use an alternative text when a tag value is empty Screenshot

MaxBulk Mailer is a full-featured and easy-to-use bulk mailer and mail-merge software for macOS and Windows that allows you to send out customized press releases, prices lists, newsletters and any kind of text or HTML documents to your customers or contacts.

MaxBulk Mailer is fast, fully customizable and very easy to use. MaxBulk Mailer handles plain text, HTML and rich text documents and gives full support for attachments. With MaxBulk Mailer you will create, manage and send your own powerful, personalized marketing message to your customers and potential customers.

Thanks to its advanced mail-merge and conditional functions you can send highly customized messages and get the best results of your campaigns. You also have support for international characters, a straightforward account manager with support for all type of authentication schemes including SSL, a complete and versatile list manager, support for importation from a wide range of sources including from remote mySQL and postgreSQL databases.

MaxBulk Mailer is a software tool that you purchase once, no need to pay on a per-email basis to submission services!

▾ Last videos, Online events and Q&A Sessions ▾
▾ Last customer reviews ▾

🔐 Secured by Comodo SSL | UptimeRobot - Site Loaded properly