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!
|
The Mystery of Hotmail’s Strange Image Spacing
The Case of a Hidden Escape Character…
It’s official, there’s an invisible ghost haunting Hotmail and it had us spooked for over 3 days! OK so we don’t mean Friday the 13th scary, but still scary to a programmer who doesn’t see it coming!
Turns out it isn’t a ghost at all, it’s a Microsoft supported escape character which Hotmail adds after every image. As you can rightfully assume, it doesn’t lurk in IE but it does in Firefox, Safari, Opera, and Chrome. Since these browsers don’t support the escape character, they read it as a special character without any horizontal width (our proverbial sheet over the ghost). That, matched with Hotmail’s default CSS (line-height:normal;) creates a vertical space below every image - ah ha - mystery solved!
Whew! Moving on…
Once we figured it out, the next challenge was to simulate the issue in our Email Test. In the end, we are happy to report that we where successfully able to simulate the exact same spacing issues inside FF, Opera and Chrome no matter what size your images are.
This issue of course brings us back to our ongoing question: Should we support multiple web browsers when running our Email Test? So far, the obvious answer seems to be “yes” - considering the fact that results will clearly vary from one browser to the next when it comes to web based email clients. In fact, we feel inclined to simulate your email exactly the way it will look when viewed in the browser you are running your test in.
With all that said; at this time we recommend that you test your HTML/CSS email in the following order:
Step 1.) First, test your email in all the popular web browsers (IE 6, 7, 8, FF, Safari, Opera, and Chrome)
Step 2.) Then run your email through our Acid Test in Firefox for a few reasons…
a. This will ensure that you see the infamous Hotmail ghost (if it applies to you)
b. Firefox is the web browser that we have done most of our testing in to date
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!
Comments
