CSS Compatibility Issue in Email

by sylviah 15. December 2011 11:55

Need to create a website-like email newsletter for your client’s campaign?

Or, an email report with specific layout?

Beware! Most email clients have far lower support for CSS and HTML than the web. Your beautiful design work might look great on one email client, but look undesirable on a different email client.

The best way to ensure your email looks great across all clients is to test on all of them. Unfortunately, it is a very time consuming process since there are over 30 email clients on the market. My suggestion is to pick a list of most popular email clients to test. You can narrow down the list by knowing which email clients your recipients will most likely to use.

Here are the top 10 most popular email clients (as of June 2011):

Outlook

iOS Devices (iPhone, iPad and iPod Touch)

Hotmail

Apple Mail

Yahoo! Mail

Gmail

Windows Mail

Android

AOL

Thunderbird

[From: http://www.campaignmonitor.com/stats/email-clients/]

My second suggestion is to code or design the email with the limitations in mind. There are some coding practices that will help creating a successful html email.

Use inline styles instead of external or embedded style sheets. Many email services cut everything above the body tag and disable external style sheets.

Never! I mean NEVER use JavaScript in an email. Your email will be marked as spam by most email services. Other elements that may not supported: HTML Forms, ActiveX components, Adobe Flash animations, animated GIFs.

Use table for layout instead of div. Tables are more consistently supported.

Declare width, cellpadding, and cellpsacing for all tables and table cells.

Do not use background images. Background colors are okay.

Do not use images for important content. Many email clients turn images off until it is allowed by the user.

Provide alt text and declare both width and height for all images.

Finally, test your email by sending samples to the selected email clients. To perform a more thorough test, check the samples on different operation systems.

If you want to learn more about this topic, website such as Campaign Monitor http://www.campaignmonitor.com/resources/) provides in-depth information and guides (see sample below) about CSS support in email. 

 

Other useful websites:

http://www.email-standards.org/clients/

References:

http://www.davidjrush.com/blog/2011/05/email-client-compatibility-html-friendly-emails/

http://assistenza.mailup.it/KB/a382/css-and-e-mail-clients-compatibility-issues.aspx

http://kb.mailchimp.com/article/how-to-code-html-emails

Tags: , , ,

Software Development

Permalink | Comments (0)

HTML5 and CSS 3 – Cleaner Semantic Markup (Part 1)

by Evan 3. March 2011 15:47

“Upgrading” to HTML5 can be as simple as changing your doctype. Previous versions of HTML defined many doctypes, and choosing the right one could be tricky. In HTML5, there is only one doctype:

<!DOCTYPE html>

Upgrading to the HTML5 doctype won’t break your existing markup, because all of the tags defined in HTML 4 are still supported in HTML5.

Meaningful Markup

In the past, designers worked with incorrect table-based layouts. Eventually, savvy designers embraced more semantically correct layout methods, structuring their pages with <div> elements instead of tables, and using external stylesheets for presentation. Unfortunately, complex designs require significant differentiation of underlying structural elements, which commonly results in the “<div>-soup” syndrome. Perhaps this looks familiar:


   

      

         

            
Cleaner Markup Example

            
Posted on March 3rd, 2011

         

         

            
Lorem ipsum text blah blah blah.

            
Lorem ipsum text blah blah blah.

            
Lorem ipsum text blah blah blah.

         

         

            
Tags: HMTL, code, demo

         

      

      

         

            
Tangential Information

         

         

            
Lorem ipsum text blah blah blah.

            
Lorem ipsum text blah blah blah.

            
Lorem ipsum text blah blah blah.

         

         

            
Tags: HMTL, code, demo
While slightly contrived, this example serves to illustrate the structural redundancy of designing complex layouts with HTML 4 (as well as XHTML 1.1). Fortunately, HTML 5 alleviates <div>-soup syndrome by giving us a new set of structural elements. These new HTML 5 elements replace meaningless <div>s with more semantically accurate definitions, and in doing so provide more “natural” CSS hooks with which to style the document. With HTML 5, our example evolves: 


   

      

         

            
Cleaner Markup Example

            
Posted on March 3rd, 2011

         

         

            
Lorem ipsum text blah blah blah.

            
Lorem ipsum text blah blah blah.

            
Lorem ipsum text blah blah blah.

         

         

            
Tags: HMTL, code, demo

As you can see, HTML 5 enables us to replace our multitude of <div>s with semantically meaningful structural elements. This semantic specificity not only improves the meaningfulness of our web pages, but also enables us to remove many of the class and id attributes that were previously required for targeting our CSS. In fact, CSS 3 makes it possible to eliminate virtually all class and id attributes.

Tags: ,

Software Development

Permalink | Comments (0)

Tag cloud