I was browsing around in Chrome, looking at some examples of different JavaScript frameworks that Apple has created in the past few years and hit this:
“To access One to One, you must use a supported browser. Please download and install Safari 3.”
Harsh.
(And it hasn’t been updated to reflect the current version of Safari).
Curious about text rendering characteristics between Flash 10, Silverlight 4.0 and Photoshop, I created two small applications, one in Flash CS 4, and one in Visual Studio 2010. The Silverlight 4.0 tests are using the release candidate which was current as of March 23, 2010.
I used Times New Roman in all of the tests and used full text justification in all of the examples.
There are two types of text rendering available in Silverlight, Animated and ClearType (the default).
(You may click on images to see full size versions in a new window – I did that so that it would be easy for you to move the images around and do your own side-by-side comparisons).
Flash 10 has similar offerings, with an Anti-alias for readability and anti-alias for animation option:
Side by side using the animated mode:
Then, the options for “readability” or the default compared side-by-side. (Note that I flipped the apps around so they’d layer correctly below)
To my eye, I preferred the Flash Anti-alias for Readability option just slightly over the other options. The animation friendly options left the text feeling too soft for me. What I didn’t like about the Silverlight ClearType option was the darkness of the font overall.
Zoomed in (with Silverlight on the top). You’ll see how the Silverlight text uses darker strokes overall.
The levels of the “anti-alias for readability” text:
Whereas the levels of the Silverlight ClearType option:
Interesting difference.
I next tweaked the foreground color of the text in the Silverlight ClearType example, deciding that the black was too black for comfortable on screen reading.
I set the foreground of the text to #3d3d3d (click image to enlarge).
Very close. So close that I’m not sure that I could distinguish between the two renderings without detailed study. The lightening of the foreground color made the text look a bit softer than the original, but not so far as to make the text blurry.
If you were wondering what the appearance of the text would be when aliased, here’s Photoshop’s rendering (I’m warning you … you wont’ like it!):
Below, you can see how the bowl of the letter ‘a’ in Flash 10 and the area along the meanline are nearly disconnected from the stem. This general lightness appears throughout Flash’s rendering of Times New Roman.
Since my original inspiration was to determine how to make text look as sharp as possible when using Silverlight, I wanted to see what I liked best from what was available readily on my Windows 7 PC. I used:
For a text-rendering side by side comparison, I put the block of text next to the text from Photoshop Crisp, Silverlight, and Flash.
Going further, I’ve created zoomed images of the lowercase letter “a” from the sources mentioned above. I’m amazed how differently an anti-aliased “a” can be when different companies all approach the problem with unique algorithms.
Photoshop (No Anti-alias option selected)
What’s your preference? Hope you found this useful.
(If you’re wondering how I created full-text-justification in Silverlight, I’ll provide the solution in a follow-on post).
Oh, you’ve got to freakin’ kidding me. Of all of the 3rd party plug-ins to require, someone thought requiring Java was the best choice as a government sponsored broadband speed test technology?
Fail.
I uninstalled Java quite a long time ago (finally).
“The ten principles that contribute to a Googley user experience.”
Definitely read the full details here:
I’ve enjoyed following the thought pattern of Stephen regarding the major iteration of the Firefox user interface and experience here. This latest post walks through the general clean up of the title bar, menu bars, address bar, and bookmark bar in Firefox.
I must say that the new proposals for Firefox finally take the UI from a all-too typical layout to something modern, hip, and clean. A web browser should not interfere with the one task it is intended to perform: view and interact with web pages.
For normal browsing (and not development) I use Google’s Chrome browser nearly exclusively, and when I don’t use it, I switch to IE 8. That combo works well enough (and best handles sites that are more IE friendly than they are web-standards friendly).
I particularly like Chrome’s clean approach to full screen web browsing. Admittedly, having more than a couple dozen tabs open tends to make the tabs a bit unwieldy (I’ve got 44 tabs open in Chrome right now).
Compared to Firefox (one of the proposals and the current 3.5 shipping UI), the proposals definitely modernize the user experience of Firefox, yet not quite maximizing the web application experience like Chrome does so well (Firefox images grabbed from Stephen’s web site):
I’m not sure that the orange Firefox button is really necessary though for the average user (at the cost of a significant amount of horizontal and vertical pixel-estate). What kind of actions would users expect to find there? But more importantly, what would the UI for the drop down look like?
It would be a big failure if it was nothing more than a cascading drop down menu, for example, like I’ve configured in Firefox 3.5 with some extension who’s name I’ve forgotten.
Overall, I do consider this progress though, and appreciate the transparency of the design process with the next version of Firefox.
And I, unlike some of the commenters on Stephen’s blog, feel like it’s more important to make progress rather than be artificially held back by old designs, and not giving into lots of options and configuration choices which cater to vocal groups (so that they can never change). In this case, I’d follow Apple and Google’s lead (and even Microsoft’s to some extent when it comes to applications): make it good, make it simple, don’t put it lots of bells and whistles and don’t make it too configurable.
