I had an idea today, would it be possible to use the CSS hover technique to create some kind of JavaScript rollover replacement for Email. I wasn't looking for your typical link hover effect or a mouseover effect on an image, my concern was more along the lines of: you have a link, and when you mouse over it can you expand the area to show more text beneath it.
This could be quite useful when you consider it's implications in scenarios like the following: You have a paragraph long intro to a story that ends with a "more" link leading you to the full version of the story somewhere on the web. What if vertical resources were sparse and you needed to condense this? Not only would you be able to condense it using hover, the whole paragraph then becomes a clickable link to the full story... or perhaps even more useful... rollover text ads that expand to show skyscrapers and then contract again to just the text, allowing you to perhaps include more ads while in actuality using less space!
So with this in mind I set about testing all the clients and browsers I could with the following VERY simple code.
I know right away this won't work in Gmail, since hover cannot be applied inline and Gmail cuts out the style block. But it's still worth an experimentation anyways since I found Gmail simply defaulted to show the entire content and so even when it breaks the user is still getting essentially the full experience.
My results for browsers were as follows:
WINDOWS XP SP2
DESKTOP CLIENTS
Working
Outlook 2003
Outlook Express
Thunderbird
Eudora
Incredimail
Opera
WEB CLIENTS - Internet Explorer 7 & Firefox 2
Working
AIM Mail
Excite
Hotmail Live
Hotmail Classic
Yahoo Classic
Not Working But Degrades Well
Gmail
MAC OS X 10.4
DESKTOP CLIENTS
Working
Entourage
Mac Mail
So as you can see these are totally encouraging results! This basically means that no matter what the scenario you use this technique in, even if it fails the user will still see your content.
Tuesday, January 22, 2008
CSS Hover in HTML Email... is it possible???
Posted by Mike Kleiman at 2:08 PM 1 comments
Subscribe to:
Posts (Atom)
Archives