Default CSS in Web & Desktop Email Clients
It’s important to beware!
It comes as no surprise that web clients use their own style sheets to render their pages. In the new version of Yahoo Mail and AIM Mail, emails are rendered inside an I-frame allowing for a fairly clean slate. However, in clients like G-Mail, Hotmail and Yahoo-Classic, they seem to make an attempt to reset browser defaults but several of their self-imposing styles are still carried over.
This issue may actually challenge the notion that you are always safe using the basics when it comes to tables and divs. In fact if you didn’t know that you needed to overwrite certain styles using embedded or inline CSS, your end result may look much different than expected.
For example, Hotmail applies a margin value to its p, h1-h6, ul, and li elements and ironically they don’t support the “margin” property in the rendered email itself. Fortunately they do support “margin-left,” “margin-right,” and “margin-bottom.” In this instance, if you are using a background color or inserting images in any of these elements and you don’t set a value for the above properties, you may see unwanted spacing in the end result.
As luck would have it, web clients are not the only ones using default CSS. Most desktop clients use them as well. We hope you can read through our sarcasm here.
Simulating the so called “default” CSS for each email client wasn’t a huge problem for us. It was mostly just a matter of being rather tedious and time consuming and as we continue to run test after test, we are sure to refine them as we go.
When we started this Email Test project, we where obviously aware of the current challenges of testing an email in each of the popular clients, but when doing this type of research we find that it may be even more important than we had originally thought. We even ran several high profile corporate emails through our test and saw that default CSS played a big roll in the final output.
That said, we will conclude by repeating the phrase “It’s important to beware!“
Author: Kyle Lapaglia
Author: Kyle Lapaglia
38 thoughts on “Default CSS in Web & Desktop Email Clients”
Comments are closed.
Thanks for this well crafted piece of writing about such an important issue facing us.
You always come up with great stuff I love your blogs!
Cheer!
Web Design India
You are putting very good effort into the stuff you post. Keep up the good work
This is really informative article.We get many emails from customers who would like to use CSS in their email newsletters, particular when creating their stationery and templates for MailList King. CSS (Cascading Style Sheets) are widely used when creating web pages and allow improved styling and layout of HTML content. Unfortunately, email isn’t the web. Your design may look great in one email client, but chances are it will be different in other email clients.
Nice stuff indeed! You have provided very good information in details regarding this topic. It is really very useful.
hopefully someday soon css will become the standard in email design, but with new desktop and web clients being released css support still seems to be lacking. I can almost understand the reasons why web based clients have the need to drop support, but for desktop clients surely full support can be introduced
In clients like G-Mail, Hotmail and Yahoo-Classic, they seem to make an attempt to reset browser defaults but several of their self-imposing styles are still carried over.SEO Web design
I love this blog because it’s always giving us new innovative think.
Very important tutorial! Yiya, mate Default CSS in web and desktop email clients is highly impressive stuffs. Thanks for review. Keep it up!
E-mail css formatting can be one of the most frustrating things to do. It’s so strict – especially with pictures. Text ain’t so bad.
Very Polite stuff definitely! I find here few points which are truly effective tutorial point. By catching this issue you published very useful information. Thanks!
You have provided very good information in details regarding this topic. It is really very useful. Default CSS in web and desktop email clients is highly impressive stuffs. Thanks for review. Keep it up! Cheers
E-mail css formatting can be one of the most frustrating things to do. It’s so strict – especially with pictures. Text ain’t so bad.
Effective and informative post! The dealing point with Default CSS in web & desktop email clients i.e. G-Mail, Hotmail and Yahoo-Classic. Their mistake follows up here though we should teach from the content.ecommerce software
About “Default CSS in Web & Desktop Email Clients” whatever you shared here seems to me pretty outstanding from all side. Thanks mate. 🙂
Very important tutorial! Yiya, mate Default CSS in web and desktop email clients is highly impressive stuffs. Thanks for review. Keep it up!
Very thought provoking input man. I’m so pleased by reading this post and whatever mistake follows up here though we should teach from the content. Thanks
very useful and interesting
Nice Post..Thanks for sharing with us..useful for me…
Nice Post..Very useful for us
Good day! This is kind of off topic but I need some advice from an established blog. Is it very hard to set up your own blog? http://www.mitechtechnology.com/
Well explain most of the factor of On-page SEO. I like to suggest every beginner to learn more about seo terms please visit SEO Service
I too have felt the same difficulty with Outlook on my computer. I do hope the programmers avoid that feature so as to make it more user personalized.Could you please let me know if you happen to get a work around?
I really like your post. Thanks so lot for your convene. I’m very fired up to show it to anyone. Thanks so much with this fantastic post.
The differences in standards can be rather annoying, especially when your going for a specific look, from a development perspective, anyway excellent post. Bill Phills
very useful indeed, I prefer outline CSS because its faster loading time.
i dont think the web rendering in yahoo is all that great, i think it would be better to use inline css in this instance.
very interesting post. the Default CSS in web and desktop email clients is highly impressive things.
Really a good information on default CSS of web and desktop clients. Thanks a lot for the share. Keep it up!
Good to know ! Thanks
Great article. I have been looking for this information all over the web and I really find this resource very helpful. Thank you for sharing. Trey – Web Design Melbourne
Nice post about CSS, sometimes different browsers also have different settings that others don’t for example Firefox has some that start with MOZ- and I believe Chrome has the same as-well but it has been a while since I worked on any real CSS.
Nice post about CSS in Web & Desktop. Good know this. Thanks for posting
Nice….Always submit good stuff like this..
I appreciate to your current work in shape of article. Best written and easy to learn.
Thanks for the useful sharing.
I’m glad I found your article. The information is smart and interesting. I am unable to thank you enough for the blog posts on your web page. I know you add a lot of time and energy into them and truly hope you know how deeply I enjoy it.
Very useful information! Thanks!
Hi ! i have recently find your blog and its just awesome.Got a lot of unique and informative stuff here .