Blog
The Google Font API and HTML Email |
|
05.24.2010 Google, in conjunction with Typekit, just released a new Font API that allows designers to easily import non-standard OS fonts into their web pages. The API uses the CSS @font-face rule but relies on their CDN to provide the data bandwidth, which is probably much faster than yours. After hearing about this we wanted to investigate and find out the email client support for such an API. Get connected with Email on Acid for up-to-date news and information on the subject of email design, development, and testing!
|
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!”
If you haven't signed up yet, give our FREE online Email Test a try. Just drop in your code and we will instantly simulate your email in the most popular email clients!
Get connected with Email on Acid for up-to-date news and information on the subject of email design, development, and testing!
