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.

Read More Google Font API and HTML Email

Get connected with Email on Acid for up-to-date news and information on the subject of email design, development, and testing!

Email Testing RSS Feed Email Test on Twitter Email Preview on Digg Email CSS on Linked In Email Simulator on Stumbled Upon


Tuesday, 18 August 2009

Email Simulation - Web Browsers within Browsers

HTML email testing challenges…

As we faced off with the beta version of Email on Acid, we knew some challenges would be harder to deal with than others.  The simple fact is that when our users run a test in Firefox (for example) it is difficult for us to perfectly simulate a client like Outlook 03, Windows Live or Windows Mail because each of these examples are using an Internet Explorer engine to render emails.  Unfortunately there is no clear solution to this issue aside from simulating some of the more obvious differences.

One obvious difference is the support for certain CSS styles such as the generic “font” property.

Firefox does not support this particular property but IE does.  So if a designer where to create their email and only test in IE, their fonts would look exactly as intended.  It may also look fine inside the for-mentioned IE desktop clients. But if that developer where to run our email test using Firefox, it wouldn’t be an exact simulation - unless we where to add special rules to parse that property so it renders correctly in Firefox.

Gmail Preview, Hotmail Preview, AOL Preview

Other, more complicated issues arise when our users submit code that is full of HTML or CSS errors.  As we all know, each of the web browsers have different rules for handling issues like extra table cells and missing close tags.  In the end, we may have to implement some type of code validation tool that identifies key issues before running the acid test.  For more on that subject - check out our blog post Simulating Errors in our Email Test.

Simulating “Alt” attributes can be another tricky subject.  In Firefox, alt text only appears if the image is broken.  In IE, the text appears inside a small popup box.  Alt attributes are handled differently inside email clients as well - making it difficult to simulate how they would look in any browser.  When simulating web clients, it is our goal to render your email exactly how it would look if a user where to be looking at it from within the browser you are running your acid test in.  When it comes to desktop clients, we may eventually have to simulate things like alt text and image blocking exactly the way they look inside the client but that will have to wait for a later release.

In conclusion, at this time, we highly recommend you test in this order:

Step1.) First, test your email in all the popular web browsers (IE 6, 7, 8, FF, Safari, Opera, and Chrome)
Step2.) Then run your email through our Email Test using Firefox.  For even better end results, re-run the Acid Test in IE as well.



Share/Save/Bookmark

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!

Email Testing RSS Feed Email Test on Twitter Email Preview on Digg Email CSS on Linked In Email Simulator on Stumbled Upon

Share Your Comment

Name:
Email:
Location:
URL:

Comment:

Remember my personal information
Notify me of follow-up comments?

Please enter the word you see in the image below: