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! |
In taking into account the complexity of testing your email, we must first consider the most popular email applications used today.
Each desktop client uses an embedded rendering engine in order to display your email. In order to control potential spam and spyware threats, each client then sets restrictions on supported HTML, CSS and scripting elements. Popular desktop clients include:
![]() |
Outlook 2003 IE 6,7 or 8 Engine* |
![]() |
Lotus Notes 6, 7 Rich Text View - similar to Wordpad |
![]() |
Outlook 2007 Microsoft Word Engine |
![]() |
Lotus Notes 8 IE 6,7 or 8 Engine* |
![]() |
Mozilla Thunderbird 2.0, 3.0 Firefox Engine |
![]() |
Windows Live (Hotmail) Client IE 6,7 or 8 Engine* |
![]() |
Apple Mail (aka Mac Mail) Safari Engine |
![]() |
Entourage 2004, 2007 Internet Explorer 5 for the Mac |
![]() |
Windows Mail IE 6,7 or 8 Engine* |
* The version of IE that is used to render your email depends on what the user has installed on their local machine.
Web based email clients present an entirely different challenge. Since users can open their web based email from any of the popular web browsers, we have to focus less on the embedded “rendering engine” and more on how your email 1.) looks in every popular web browser and 2.) gets interpreted by each email client.
For example: Gmail sets very strict restrictions on embedded CSS, whereas Hotmail uses an outdated doc type which may alter the way your images and text will render.
As if that wasn’t enough, your email will render inside the Gmail, Yahoo, and Hotmail user interface. Therefore, you must compete with their default CSS. AOL, on the other hand, uses an iframe to display your email.
Popular Web Based Email Clients:

The most popular web browsers:

As you already know, each of these web browsers vary when it comes to following W3C standards, rendering coding errors, and displaying blocked images, ALT, and TITLE tags.
Other big contenders include:
In the end, there are a multitude of different ways in which your email might be received which makes testing much more difficult than testing a standard web page. So the question is:
Here’s our recommended approach:
Have you had enough yet? No?
Well, for the hard core testers out there, let’s enter into the realm of mobile device email…
To make matters even more complicated, some users may use their mobile devices to retrieve their email. Although users are more likely to use the email application that comes with their device operating system, others may prefer to check their web based email through their handheld web browser. There are currently 40 different handheld applications for web browsing.
Here is a list of popular mobile device operating systems:
The good news is that the iPhone has excellent support for HTML/CSS web standards and it is estimated that an average of 2-4% of your potential readers are receiving their email on this device.
Another silver lining to developing emails for mobile devices is that most revert to the attached text version, that is why it is best to embed a link at the header of your text version to a landing page which contains the HTML version of your email. More often than not, that link will launch the standard web browser within the device.
It is our goal to provide simulations for mobile devices in the future. But in the meantime, here are a few online and windows based simulation tools that might help you on your way:
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!